function Person(name, blog) {
    this.name = name;
    this.blog = blog;
}
var unikys = new Person("unikys", "unikys.tistory.com");
alert(unikys.name); // === "unikys"

function Person(name, blog) {
    this.name = name;
    this.blog = blog;
}
Person.prototype = {
    getName: function () {
        return this.name;
    },
    getBlog: function () {
        return this.blog;
    }
};
var unikys = new Person("unikys", "unikys.tistory.com");
var stranger = new Person("stranger", "www.google.com");
alert(unikys.getName()); // === "unikys"
alert(unikys.getBlog()); // === "unikys.tistory.com"
alert(stranger.getName()); // === "stranger"
alert(stranger.getBlog()); // === "www.google.com"

Person.prototype.introduce = function () {
    alert("Hi!, my name is " + this.name + ", please visit my blog " + this.blog);
};
unikys.introduce();  // === Hi!, my name is unikys, please visit my blog unikys.tistory.com

Person.prototype.gender = "male";
alert(unikys.gender); // === "male"
alert(stranger.gender); // === "male"

Person.prototype.gender = "male";
alert(stranger.gender); // === "male";
stranger.gender = "female";

alert(unikys.gender); // === male (not female?)
alert(Person.prototype.gender); // === male (also not female???)

unikys = new Person();
alert(unikys.constructor === Person);  // === true
alert(unikys.constructor.prototype === Person.prototype);  // === true

function Person() {};
var unikys = new Person(), stranger = new Person();
Person.prototype.gender = "male";
stranger.gender = "female";

function Person() {};
Person.prototype.gender = "male";
var unikys = new Person(), stranger = new Person();
alert(unikys.gender === "male" && stranger.gender === "male");  // === true;
Person.prototype.gender = "female";
alert(unikys.gender === "female" && stranger.gender === "female");  // === true;

function Car() {
    this.wheel = 4;
    this.beep = "BEEP!";
};
Car.prototype.go = function () {
    alert(this.beep);
};
function Truck() {
    this.wheel = 6;
    this.beep = "HONK!";
};
Truck.prototype = new Car();
function SUV() {
    this.beep = "WANK!";
};
SUV.prototype = new Car();
var truck = new Truck(), suv = new SUV();
alert(truck.wheel === 6 && suv.wheel === 4);  // === true;
alert(truck.beep === "HONK!" && suv.beep === "WANK!");  // === true;
truck.go(); // === "HONK!"
suv.go(); // === "WANK!"

function Person(name, blog) {
    this.name = name;
    this.blog = blog;
}
Person.prototype.getName = function () {
    return this.name;
};
Person.prototype.getBlog = function () {
    return this.blog;
};
var unikys = new Person("unikys", "unikys.tistory.com");
for (var prop in unikys) {
    console.log("unikys[" + prop + "] = " + unikys[prop]);
}

for (var prop in unikys) {
    if (unikys.hasOwnProperty(prop)) {
        console.log("unikys[" + prop + "] = " + unikys[prop]);
    }
}

출처 - http://unikys.tistory.com/316

2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편)

2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초

2013/01/07 - [속깊은 자바스크립트 강좌] function declaration vs function expression 차이점

2013/01/10 - [속깊은 자바스크립트 강좌] 함수를 호출하는 방법과 this의 이해

2013/01/21 - [속깊은 자바스크립트 강좌] Closure의 이해 / 오버로딩 구현하기

2013/01/30 - [속깊은 자바스크립트 강좌] Closure 쉽게 이해하기/실용 예제 소스

2013/02/13 - [속깊은 자바스크립트 강좌] 쉬어가기: 웹 개발 방법론의 변화/자바스크립트의 재발견

2013/02/22 - [속깊은 자바스크립트 강좌] 객체지향의 기본: prototype

2013/10/04 - [속깊은 자바스크립트 강좌] 상속, new와 Object.create의 차이

2013/10/29 - [속깊은 자바스크립트 강좌] 글로벌(전역) 변수와 window 객체

2013/11/06 - [속깊은 자바스크립트 강좌] 변수 선언 방법에 대하여

출처 - http://unikys.tistory.com/382

함수의 apply(), call() 메서드

From. 프론트엔드 개발자를 위한 자바스크립트 프로그래밍

함수에는 apply()와 call() 두 가지 메서드가 더 있습니다. 이들 메서드는 모두 소유자인 함수를 호출하면서 this를 넘기는데, 결과적으로는 함수 내부에서 this 객체의 값을 바꾸는 것이나 마찬가지입니다. apply() 메서드는 매개변수로 소유자 함수에 넘길 this와 매개변수 배열으로 받습니다. 두 번째 매개변수는 Array의 인스턴스일 수도 있고 arguement 객체일 수도 있습니다. 다음 예제를 보십시오.

이 예제에서 callSum1()은 sum()을 호출하면서 자신의 this와 arguments 객체를 매개변수로 넘겼습니다. callSum2() 역시 sum()을 호출하지만 이번에는 arguments 객체가 아니라 매배변수 배열을 넘겼습니다. 두 함수 모두 올바르게 실행됩니다.

call() 메서드도 apply()와 마찬가지로 동작하지만 매개변수를 전달하는 방식이 다릅니다. this가 첫 번째 매개변수인 점은 똑같지만 call()을 사용할 때는 반드시 다음 예제와 같이 매개변수를 각각 나열해야 합니다.

결과는 apply()와 마찬가지입니다. apply()와 call() 중 어느 쪽을 쓸지는 순전히 개발자의 재량이며 매개변수를 전달하기 편리한 방식으로 택하면 됩니다. arguments 객체를 그대로 전달해도 되거나 매개변수로 전달할 데이터가 이미 배열 형태로 준비되어 있다면 apply()가 나을 것이고, 그렇지 않다면 call()이 더 나을 겁니다. 전달할 매개변수가 없다면 두 메서드는 완진히 똑같습니다.

물론 apply()와 call()의 진가는 매개변수를 전달해 호출하는 것이 아니라 this를 바꾸는데 있습니다. 다음 예제를 보십시오.

이 예제는 this 객체를 설명할 때 썼던 예제를 조금 고친 겁니다. 이번에도 sayColor()는 전역 함수로 정의되었으므로 전역 스코프에서 호출하면 this.color를 window.color로 평가하여 "red"를 표시합니다. sayColor.call(this)나 sayColor.call(window)와 같이 호출하면 함수 컨텍스트를 명시적으로 전역 스코프로 지정하는 것인데 이렇게 해도 마찬가지로 "red"를 표시합니다. 반면 sayColor.call(o)는 함수의 컨텍스트를 o로 설정하므로 "blue"를 표시합니다.

call()이나 apply()를 써서 스코프를 바꾸면 객체마다 일일히 메서드를 등록하지 않아도 된다는 장점이 있습니다. this 객체를 설명할 때는 o 객체에 직접 sayColor() 메서드를 등록했었지만 이번에는 그렇게 하지 않았습니다.

ECMAScript 5판의 함수에는 bind()라는 메서드도 정의되었습니다. 이 메서드는 새 함수 인스턴스를 만드는데 그 this는 bind()에 전달된 값입니다. 예를 들어 다음 코드를 보십시오.

이 예제에서는 sayColor()에서 bind()를 호출하면서 객체 o를 넘겨 objectSayColor()라는 함수를 생성했습니다. objectSayColor() 함수의 this는 o에 묶이므로 전역에서 함수르 호출하더라도 항상 "blue"를 표시합니다.

출처 - http://www.florakid.com/florakid_lib/sub/javascript/apply_call_method.html

arguments 객체는 함수에 전달된 인수에 해당하는 Array같은 객체입니다.

구문

arguments

설명

arguments 객체는 모든 함수 내에서 이용 가능한 지역 변수입니다. arguments 객체를 사용하여 함수 내에서 함수의 인수를 참조할 수 있습니다. 이 객체는 함수에 전달된 각 인수를 위한 항목(entry)을 포함합니다, 첫 번째 항목의 인덱스가 0에서 시작하는. 예를 들어, 함수에 인수 셋이 전달된 경우, 다음과 같이 참조할 수 있습니다:

arguments[0]
arguments[1]
arguments[2]

arguments는 설정될 수도 있습니다:

arguments[1] = 'new value';

arguments 객체는 Array가 아닙니다. Array와 비슷하지만 length 빼고는 어떤 Array 속성도 없습니다. 예를 들어, pop 메서드가 없습니다. 그러나 실제 Array로 변환될 수 있습니다:

var args = Array.prototype.slice.call(arguments);

arguments를 실제 Array로 변환하기 위해 Array.from() 메서드 또는 전개 연산자를 사용할 수도 있습니다:

var args = Array.from(arguments);
var args = [...arguments];

var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));

당신이 형식상 받기로 선언된 것보다 많은 인수로 함수를 호출하는 경우 arguments 객체를 사용할 수 있습니다. 이 기법은 가변 인수가 전달될 수 있는 함수에 유용합니다. 함수에 전달된 인수의 수를 결정하기 위해 arguments.length를 쓰세요, 그 뒤에 arguments 객체를 사용하여 각 인수를 처리하세요. 함수 signature에 매개변수의 수를 결정하기 위해서는, Function.length 속성을 쓰세요.

속성

arguments.callee

현재 실행 중인 함수를 가리킵니다.

arguments.caller 

현재 실행 중인 함수를 호출한 함수를 가리킵니다.

arguments.length

함수에 전달된 인수의 수를 가리킵니다.

arguments[@@iterator]

arguments의 각 인덱스 값을 포함하는 새로운 Array Iterator 객체를 반환합니다.

예

여러 문자열을 연결하는 함수 정의하기

이 예는 여러 문자열을 연결하는 함수를 정의합니다. 함수의 유일한 형식 인수는 연결할 항목을 구분하는 문자를 지정하는 문자열입니다. 함수는 다음과 같이 정의됩니다:

function myConcat(separator) {
  var args = Array.prototype.slice.call(arguments, 1);
  return args.join(separator);
}

이 함수에 인수를 얼마든지 전달할 수 있으며 리스트 내 항목처럼 각 인수를 사용하여 리스트를 만듭니다.

// "red, orange, blue" 반환
myConcat(", ", "red", "orange", "blue");

// "elephant; giraffe; lion; cheetah" 반환
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// "sage. basil. oregano. pepper. parsley" 반환
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");

HTML 리스트를 만드는 함수 정의하기

이 예는 리스트 HTML을 포함하는 문자열을 만드는 함수를 정의합니다. 함수의 유일한 형식 인수는 리스트가 정렬되지 않은(bulluet(글 머리 기호)가 붙는) 경우 "u" 또는 정렬된(번호가 매겨진) 경우 "o"인 문자열입니다. 함수는 다음과 같이 정의됩니다:

function list(type) {
  var result = "<" + type + "l><li>";
  var args = Array.prototype.slice.call(arguments, 1);
  result += args.join("</li><li>");
  result += "</li></" + type + "l>"; // end list

  return result;
}

이 함수에 인수를 얼마든지 전달할 수 있고, 표시된 유형의 리스트에 항목으로 각 인수를 추가합니다. 예를 들면:

var listHTML = list("u", "One", "Two", "Three");

/* listHTML은:

"<ul><li>One</li><li>Two</li><li>Three</li></ul>"

*/

나머지, 기본 및 비구조화된 매개변수

arguments 객체는 나머지 매개변수, 기본 매개변수 또는 비구조화된 매개변수와 함께 사용될 수 있습니다.

function foo(...args) {
  return arguments;
}
foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 }

그러나, 비엄격 함수에서는 mapped arguments 객체는 함수가 어떤 나머지 매개변수, 기본 매개변수 또는 비구조화된 매개변수든 포함하지 않는 경우에만 제공됩니다. 예를 들어, 기본 매개변수를 사용하는 다음 함수에서는, 100 대신에 10이 반환됩니다:

function bar(a=1) {
  arguments[0] = 100;
  return a;
}
bar(10); // 10

이 예에서, 어떤 나머지 매개변수, 기본 매개변수 또는 비구조화된 매개변수가 없는 경우에는, 100이 반환됩니다:

function zoo(a) {
  arguments[0] = 100;
  return a;
}
zoo(10); // 100

출처 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments

https://developers.google.com/chart/

https://developers.google.com/chart/

https://developers.google.com/maps/documentation/javascript/examples/overlay-hideshow?hl=ko

http://using.tistory.com/82

http://roadmaps.kr/grboard/board.php?id=tips&articleNo=19

http://jsfiddle.net/msoliman85/XyFDM/ 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Showing/Hiding overlays</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
// This example adds hide() and show() methods to a custom overlay's prototype.
// These methods toggle the visibility of the container <div>.
// Additionally, we add a toggleDOM() method, which attaches or detaches the
// overlay to or from the map.

var overlay;

USGSOverlay.prototype = new google.maps.OverlayView();

function initialize() {
  var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
  var mapOptions = {
    zoom: 11,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var swBound = new google.maps.LatLng(62.281819, -150.287132);
  var neBound = new google.maps.LatLng(62.400471, -150.005608);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
  srcImage += 'examples/full/images/talkeetna.png';

  overlay = new USGSOverlay(bounds, srcImage, map);
}

/** @constructor */
function USGSOverlay(bounds, image, map) {

  // Now initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay
  this.setMap(map);
}

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.border = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayImage" pane.
  var panes = this.getPanes();
  panes.overlayImage.appendChild(this.div_);
};

USGSOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};

USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
};

// [START region_hideshow]
// Set the visibility to 'hidden' or 'visible'.
USGSOverlay.prototype.hide = function() {
  if (this.div_) {
    // The visibility property must be a string enclosed in quotes.
    this.div_.style.visibility = 'hidden';
  }
};

USGSOverlay.prototype.show = function() {
  if (this.div_) {
    this.div_.style.visibility = 'visible';
  }
};

USGSOverlay.prototype.toggle = function() {
  if (this.div_) {
    if (this.div_.style.visibility == 'hidden') {
      this.show();
    } else {
      this.hide();
    }
  }
};

// Detach the map from the DOM via toggleDOM().
// Note that if we later reattach the map, it will be visible again,
// because the containing <div> is recreated in the overlay's onAdd() method.
USGSOverlay.prototype.toggleDOM = function() {
  if (this.getMap()) {
    // Note: setMap(null) calls OverlayView.onRemove()
    this.setMap(null);
  } else {
    this.setMap(this.map_);
  }
};
// [END region_hideshow]

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>

<!-- [START region_toolbar] -->
<!-- Add an input button to initiate the toggle method on the overlay. -->
    <div id ="panel">
      <input type="button" value="Toggle visibility" onclick="overlay.toggle();"></input>
      <input type="button" value="Toggle DOM attachment" onclick="overlay.toggleDOM();"></input>
    </div>
<!-- [END region_toolbar] -->
    <div id="map-canvas"></div>
  </body>
</html>

http://prototypejs.org/doc/latest/Prototype/index.html

function setCaretPosition(ctrl, pos)
{
    if(ctrl.setSelectionRange)
    {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange)
    {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 새로운 표준에 대한 지원을 확장하고 일반적인 개발자 시나리오를 손쉽게 지원할 수 있도록 XMLHttpRequest 개체의 몇 가지 고급 기능을 제공합니다. 여기에는 다음과 같은 기능이 포함됩니다.

• 플러그 인을 사용하지 않고 이미지, 동영상 및 오디오와 같은 이진 파일을 다운로드 및 업로드합니다.
• 플러그 인을 사용하지 않고 멀티미디어 콘텐츠 스트리밍을 다운로드합니다.
• XMLHttpRequest 작업 상태를 더 잘 관찰합니다.
• 다른 브라우저와의 상호 운용성을 개선합니다.

이러한 변경 내용은 다음 섹션에서 자세히 설명합니다.

• 이진 개체 업로드 및 다운로드
• Comet 스트리밍 지원
• 고급 이벤트 지원
• XMLHttpRequest에 대한 CORS(Cross-Origin Resource Sharing)
• 관련 항목

이진 개체 업로드 및 다운로드

Internet Explorer 10에서는 XMLHttpRequest를 확장하여 이진 데이터를 지원합니다. 부분적으로 이 작업을 위해 파일 API 사양의 BLOB 인터페이스 지원을 추가합니다.

XMLHttpRequest 개체의 responseType 속성을 "blob"로 설정하면 요청과 관련된 데이터가 이진 데이터로 처리됩니다. 이 경우 다운로드 요청(예: GET)의 응답 속성 값에 영향을 줍니다.

다음 예제는 XMLHttpRequest를 사용하여 이미지를 BLOB 개체로 다운로드한 다음 그 결과를 웹 페이지의 이미지 요소에 할당하는 방법을 보여 줍니다.

var req = new XMLHttpReqest();
xhr.open("GET", "download?name=" + name, true);
xhr.responseType = "blob";
xhr.onreadystatechange = function () {
  if (xhr.readyState == xhr.DONE) {
    var blob = xhr.reponse;
    var image = document.getElementById("my-image");
    image.addEventListener("load", function (evt) {
      URL.revokeObjectURL(evt.target.src);
    }
    image.src = URL.createObjectURL(blob);
  }
}
xhr.send();

다운로드 요청에 대해 responseType 속성을 "ms-stream"으로 설정하면 다음 예제와 같이 콘텐츠를 즉석에서 처리할 수 있습니다.

var req = new XMLHttpReqest();
xhr.open("GET", "download?name=" + name, true);
xhr.responseType = "ms-stream";
xhr.onreadystatechange = function () {
  if (xhr.readyState == xhr.LOADING) {
    var stream = xhr.reponse;
    var video = document.getElementById("my-video");
    video.addEventListener("loadeddata", function (evt) {
      URL.revokeObjectURL(evt.target.src);
    }
    video.src = URL.createObjectURL(stream);
  }
}
xhr.send();

Comet 스트리밍 지원

Internet Explorer 10에서는 다음 예제와 같이 XMLHttpRequest 요청에 대한 응답을 로드하는 동안 responseText 속성을 읽을 수 있도록 하여 multipart HTTP 스트리밍(Comet 스트리밍이라고도 함)을 지원합니다.

xhr.open("GET", url);
xhr.timeout = timeout;
xhr.onreadystatechange = function() {
  if (this.readyState >= 3 && this.status == 200) {
    var content = this.responseText;
    handleContent(content);
  }
}
xhr.send();

이전 Windows Internet Explorer 버전에서는 readyState 속성이 done으로 설정된 경우에만 responseText 속성을 읽을 수 있습니다.

responseText 속성은 현재까지 읽은 응답의 전체 값을 반환합니다. 응답이 수신될 때 개별 응답 패킷을 처리하려면 다음 예제와 같이 progress 이벤트(다음 섹션에 설명됨)를 사용하거나 각 readyStateChange 이벤트 반복의 responseText 길이를 추적할 수 있습니다.

xhr.open("GET", url);
xhr.timeout = timeout;
xhr.onreadystatechange = function() {
  if (typeof this.index == "undefined")
    this.index = 0;
    
  if (this.readyState >= 3 && this.status == 200) {
    var content = this.responseText;
    handleContent( content.substring(this.index) )
    this.index = content.length;
  }
}
xhr.send();

고급 이벤트 지원

Internet Explorer 10에서는 XMLHttpRequest 개체를 확장하여 XMLHttpRequest 수준 2 사양에 지정된 다음 이벤트를 지원합니다.

XMLHttpRequest 개체의 이벤트 처리는 다음 예제와 같이 DOM 이벤트 수준 3 사양 및 진행률 이벤트 사양에 지정된 모델을 따릅니다.

var xhr = new XMLHttpRequest();
var url = "some-url";

xhr.timeout = 5000;
xhr.addEventListener("timeout", handleTimeout(evt), false);

xhr.onprogress = function(evt) {
  handleEvent("data: " + this.responseText);
  // Calculate progress 
  var str = "";
  if (evt.lengthComputable) {
    var percent = 100 * evt.loaded / evt.total;
    str = percent + "%. Current total size: " + this.responseText.length);
  } else {
    str = "Progress unknown. Current total size: " + this.responseText.length;
  }
  updateProgress(str);
}
xhr.open("GET", url);
xhr.send();

XMLHttpRequest에 대한 CORS(Cross-Origin Resource Sharing)

Internet Explorer 10에서는 XMLHttpRequest(XHR) 개체와 관련하여 CORS(Cross-Origin Resource Sharing)를 새롭게 지원합니다. CORS(Cross-Origin Resource Sharing) 사양에 정의된 CORS는 HTTP 헤더를 사용하여 대개 동일한 사이트 출처 정책으로 제한되는 도메인 간 웹 요청을 가능하게 합니다.

기본적으로 동일한 사이트 출처 정책은 웹 사이트가 다른 도메인에 있는 서버의 리소스를 요청하지 못하도록 합니다. 그러나 XMLHttpRequest(XHR) 요청에 대한 CORS를 지원하는 브라우저는 적절한 관리자가 해당 요청을 허용하도록 선택할 경우 다른 도메인의 리소스에 액세스할 수 있습니다.

웹 페이지가 XHR request를 수행하면 Internet Explorer에서 원본 헤더를 대상 서버로 보냅니다. 헤더에는 요청의 프로토콜 체계(http:// 또는 https://) 및 요청하는 웹 페이지의 호스트 이름이 포함됩니다. 대상 서버는 요청을 승인할 경우 Access-Control-Allow-Origin 헤더를 반환하며 요청을 처리할 수 있습니다.

이제 XMLHttpRequest 개체가 XHR 요청에 권한 부여 메커니즘을 포함할 수 있게 하는 withCredentials 속성을 지원합니다. 자세한 내용은 XMLHttpRequest 수준 2 사양을 참조하세요.

다음 예제와 같이 withCredentials 속성을 사용하여 CORS 지원을 검색할 수 있습니다.

var url = "http://contoso.com/services/"
if( window.XMLHttpRequest ) {
  var oReq = new XMLHttpRequest();
  if( oReq.withCredentials == undefined ) {
    oReq.open("GET", url, true);
    oReq.onload = handleResponse();
    oReq.send( null );
  } else {
  // CORS not support.  Handle fallback
  }
} else { 
  // XMLHttpRequest not supported; handle fallback
}

CORS의 실습 데모는 IE 테스트 드라이브의 실습: 사이트 간 업로드(영문)를 참조하세요.

관련 항목

DOM(문서 개체 모델)

개발자용 Internet Explorer 10 가이드

http://www.w3.org/TR/XMLHttpRequest2/#event-xhr-load

XMLHttpRequest Level 2

W3C Working Draft 17 January 2012

This Version:

http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/

Latest Version:

http://www.w3.org/TR/XMLHttpRequest/

Latest Editor Draft:

http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html

Previous Versions:

http://www.w3.org/TR/2011/WD-XMLHttpRequest2-20110816/

http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/

http://www.w3.org/TR/2009/WD-XMLHttpRequest2-20090820/

http://www.w3.org/TR/2008/WD-XMLHttpRequest2-20080930/

http://www.w3.org/TR/2008/WD-XMLHttpRequest2-20080225/

http://www.w3.org/TR/2007/WD-XMLHttpRequest-20071026/

http://www.w3.org/TR/2007/WD-XMLHttpRequest-20070618/

http://www.w3.org/TR/2007/WD-XMLHttpRequest-20070227/

http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060927/

http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060619/

http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/

Editor:

Anne van Kesteren (Opera Software ASA) <annevk@opera.com>

Table of Contents

1. 1 Introduction
   1. 1.1 Specification history
2. 2 Conformance
   1. 2.1 Dependencies
   2. 2.2 Extensibility
3. 3 Terminology
4. 4 Interface XMLHttpRequest
   1. 4.1 Origin and base URL
   2. 4.2 Task sources
   3. 4.3 Constructors
   4. 4.4 Garbage collection
   5. 4.5 Event handlers
   6. 4.6 States
   7. 4.7 Request
      1. 4.7.1 The open() method
      2. 4.7.2 The setRequestHeader() method
      3. 4.7.3 The timeout attribute
      4. 4.7.4 The withCredentials attribute
      5. 4.7.5 The upload attribute
      6. 4.7.6 The send() method
      7. 4.7.7 Infrastructure for the send() method
      8. 4.7.8 The abort() method
   8. 4.8 Response
      1. 4.8.1 The status attribute
      2. 4.8.2 The statusText attribute
      3. 4.8.3 The getResponseHeader() method
      4. 4.8.4 The getAllResponseHeaders() method
      5. 4.8.5 Response entity body
      6. 4.8.6 The overrideMimeType() method
      7. 4.8.7 The responseType attribute
      8. 4.8.8 The response attribute
      9. 4.8.9 The responseText attribute
      10. 4.8.10 The responseXML attribute
   9. 4.9 Events summary
5. 5 Interface FormData
   1. 5.1 Constructors
   2. 5.2 The append() method
6. References
   1. Normative references
7. Acknowledgments

1 Introduction

This section is non-normative.

The XMLHttpRequest object is the ECMAScript HTTP API. [ECMASCRIPT]

The name of the object is XMLHttpRequest for compatibility with the Web, though each component of this name is potentially misleading. First, the object supports any text based format, including XML. Second, it can be used to make requests over both HTTP and HTTPS (some implementations support protocols in addition to HTTP and HTTPS, but that functionality is not covered by this specification). Finally, it supports "requests" in a broad sense of the term as it pertains to HTTP; namely all activity involved with HTTP requests or responses for the defined HTTP methods.

function processData(data) {
  // taking care of data
}

function handler() {
  if(this.readyState == this.DONE) {
    if(this.status == 200 &&
       this.responseXML != null &&
       this.responseXML.getElementById('test').textContent) {
      // success!
      processData(this.responseXML.getElementById('test').textContent);
      return;
    }
    // something went wrong
    processData(null);
  }
}

var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "unicorn.xml");
client.send();

function log(message) {
  var client = new XMLHttpRequest();
  client.open("POST", "/log");
  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
  client.send(message);
}

function fetchStatus(address) {
  var client = new XMLHttpRequest();
  client.onreadystatechange = function() {
    // in case of network errors this might not give reliable results
    if(this.readyState == this.DONE)
      returnStatus(this.status);
  }
  client.open("HEAD", address);
  client.send();
}

1.1 Specification history

The XMLHttpRequest object was initially defined as part of the WHATWG's HTML effort. (Long after Microsoft shipped an implementation.) It moved to the W3C in 2006. Extensions (e.g. progress events and cross-origin requests) to XMLHttpRequest were developed in a separate draft (XMLHttpRequest Level 2) until end of 2011, at which point the two drafts were merged and XMLHttpRequest became a single entity again from a standards perspective.

Historical discussion can be found in the following mailing list archives:

• whatwg@whatwg.org
• public-webapi@w3.org
• public-appformats@w3.org
• public-webapps@w3.org

2 Conformance

All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative.

The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this specification are to be interpreted as described in RFC2119. For readability, these words do not appear in all uppercase letters in this specification. [RFC2119]

2.1 Dependencies

This specification relies on several underlying specifications.

Cross-Origin Resource Sharing

A conforming user agent must support the algorithms of the Cross-Origin Resource Sharing specification. [CORS]

DOM4

A conforming user agent must support at least the subset of the functionality defined in DOM4 that this specification relies upon, such as various exceptions and EventTarget. [DOM]

File API

A conforming user agent must support at least the subset of the functionality defined in File API that this specification relies upon, such as the Blob and File interfaces. [FILEAPI]

HTML

A conforming user agent must support at least the subset of the functionality defined in HTML that this specification relies upon, such as the basics of the Window object and serializing a Document object. [HTML]

HTTP

A conforming user agent must support some version of the HTTP protocol. Requirements regarding HTTP are made throughout the specification. [HTTP]

Progress Events

A conforming user agent must support the Progress Events specification. [PROGRESSEVENTS]

Typed Array

A conforming user agent must support the ArrayBuffer object. [TYPEDARRAY]

Web IDL

A conforming user agent must also be a conforming implementation of the IDL fragments in this specification, as described in the Web IDL specification. [WEBIDL]

XML

A conforming user agent must be a conforming XML processor that reports violations of namespace well-formedness. [XML] [XMLNS]

2.2 Extensibility

User agents, Working Groups, and other interested parties are strongly encouraged to discuss new features on a relevant public forum, preferably public-webapps@w3.org. If this is for some reason not possible prefix the extension in some way. E.g. if company Foo wants to add a proprietary method bar() it could be named fooBar() to prevent clashes with a potential non-proprietary method bar().

3 Terminology

The term user credentials for the purposes of this specification means cookies, HTTP authentication, and client-side SSL certificates. Specifically it does not refer to proxy authentication or the Origin header. [COOKIES]

To deflate a DOMString into a byte sequence means to create a sequence of bytes such that the nth byte of the sequence is equal to the low-order byte of the nth code point in the original DOMString.

To inflate a byte sequence into a DOMString means to create a DOMString such that the nth code point has 0x00 as the high-order byte and the nth byte of the byte sequence as the low-order byte.

4 Interface XMLHttpRequest

[NoInterfaceObject]
interface XMLHttpRequestEventTarget : EventTarget {
  // event handlers
  [TreatNonCallableAsNull] attribute Function? onloadstart;
  [TreatNonCallableAsNull] attribute Function? onprogress;
  [TreatNonCallableAsNull] attribute Function? onabort;
  [TreatNonCallableAsNull] attribute Function? onerror;
  [TreatNonCallableAsNull] attribute Function? onload;
  [TreatNonCallableAsNull] attribute Function? ontimeout;
  [TreatNonCallableAsNull] attribute Function? onloadend;
};

interface XMLHttpRequestUpload : XMLHttpRequestEventTarget {

};

enum XMLHttpRequestResponseType {
  "",
  "arraybuffer",
  "blob",
  "document",
  "json",
  "text"
}

[Constructor]
interface XMLHttpRequest : XMLHttpRequestEventTarget {
  // event handler
  [TreatNonCallableAsNull] attribute Function? onreadystatechange;

  // states
  const unsigned short UNSENT = 0;
  const unsigned short OPENED = 1;
  const unsigned short HEADERS_RECEIVED = 2;
  const unsigned short LOADING = 3;
  const unsigned short DONE = 4;
  readonly attribute unsigned short readyState;

  // request
  void open(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);
  void setRequestHeader(DOMString header, DOMString value);
           attribute unsigned long timeout;
           attribute boolean withCredentials;
  readonly attribute XMLHttpRequestUpload upload;
  void send();
  void send(ArrayBuffer data);
  void send(Blob data);
  void send(Document data);
  void send(DOMString? data);
  void send(FormData data);
  void abort();

  // response
  readonly attribute unsigned short status;
  readonly attribute DOMString statusText;
  DOMString getResponseHeader(DOMString header);
  DOMString getAllResponseHeaders();
  void overrideMimeType(DOMString mime);
           attribute XMLHttpRequestResponseType responseType;
  readonly attribute any response;
  readonly attribute DOMString responseText;
  readonly attribute Document responseXML;
};

[Constructor]
interface AnonXMLHttpRequest : XMLHttpRequest {
};

4.1 Origin and base URL

Each XMLHttpRequest object has an associated XMLHttpRequest origin and an XMLHttpRequest base URL.

This specification defines their values when the global object is represented by the Window object. When the XMLHttpRequest object is used in other contexts their values will have to be defined as appropriate for that context. That is considered to be out of scope for this specification.

In environments where the global object is represented by the Window object the XMLHttpRequest object has an associated XMLHttpRequest document which is the document associated with the Window object for which the XMLHttpRequest interface object was created.

The XMLHttpRequest document is used to determine the XMLHttpRequest origin and XMLHttpRequest base URL at a later stage.

4.2 Task sources

Each XMLHttpRequest object has its own task source. Namely, the XMLHttpRequest task source.

4.3 Constructors

The XMLHttpRequest object has an associated anonymous flag. If the anonymous flag is set, user credentials and the XMLHttpRequest origin are not exposed when fetching resources. It can only be set to true by using the AnonXMLHttpRequest() constructor.

client = new XMLHttpRequest()

Returns a new XMLHttpRequest object.

client = new AnonXMLHttpRequest()

Returns a new AnonXMLHttpRequest object that has the anonymous flag set.

The XMLHttpRequest() constructor must return a new XMLHttpRequest object.

The AnonXMLHttpRequest() constructor must return a new AnonXMLHttpRequest object with its anonymous flag set.

4.4 Garbage collection

An XMLHttpRequest object must not be garbage collected if its state is OPENED and the send() flag is set, its state is HEADERS_RECEIVED, or its state is LOADING, and one of the following is true:

• It has one or more event listeners registered whose type is readystatechange, progress, abort, error, load, timeout, or loadend.

• The upload complete flag is unset and the associated XMLHttpRequestUpload object has one or more event listeners registered whose type is progress, abort, error, load, timeout, or loadend.

If an XMLHttpRequest object is garbage collected while its connection is still open, the user agent must cancel any instance of the fetch algorithm opened by this object, discarding any tasks queued for them, and discarding any further data received from the network for them.

4.5 Event handlers

The following are the event handlers (and their corresponding event handler event types) that must be supported on objects implementing an interface that inherits from XMLHttpRequestEventTarget as attributes:

The following is the event handler (and its corresponding event handler event type) that must be supported as attribute solely by the XMLHttpRequest object:

4.6 States

client . readyState

Returns the current state.

The XMLHttpRequest object can be in several states. The readyState attribute must return the current state, which must be one of the following values:

UNSENT (numeric value 0)

The object has been constructed.

OPENED (numeric value 1)

The open() method has been successfully invoked. During this state request headers can be set using setRequestHeader() and the request can be made using the send() method.

HEADERS_RECEIVED (numeric value 2)

All redirects (if any) have been followed and all HTTP headers of the final response have been received. Several response members of the object are now available.

LOADING (numeric value 3)

The response entity body is being received.

DONE (numeric value 4)

The data transfer has been completed or something went wrong during the transfer (e.g. infinite redirects).

The send() flag indicates that the send() method has been invoked. It is initially unset and is used during the OPENED state.

The error flag indicates some type of network error or request abortion. It is initially unset and is used during the DONE state.

4.7 Request

The XMLHttpRequest object holds the following request metadata variables:

synchronous flag

Set when fetching is done synchronously. Initially unset.

request method

The HTTP method used in the request.

request URL

The resolved URL used in the request.

request username

The username used in the request or null if there is no username.

request password

The password used in the request or null if there is no password.

author request headers

A list consisting of HTTP header name/value pairs to be used in the request.

request entity body

The entity body used in the request or null if there is no entity body.

upload complete flag

Set when no more events are to be dispatched on the XMLHttpRequestUpload object. Initially unset.

upload events flag

Set when event listeners are registered on the XMLHttpRequestUpload object to determine whether a preflight request is needed. Initially unset.

The XMLHttpRequest object also has an associated XMLHttpRequestUpload object.

4.7.1 The open() method

client . open(method, url, async, user, password)

Sets the request method, request URL, synchronous flag, request username, and request password.

Throws a "SyntaxError" exception if one of the following is true:

• method is not a valid HTTP method.
• url cannot be resolved.
• url contains the "user:password" format in the userinfo production.

Throws a "SecurityError" exception if method is a case-insensitive match for CONNECT, TRACE or TRACK.

Throws an "InvalidAccessError" exception if one of the following is true:

• Either user or password is passed as argument and the origin of url does not match the XMLHttpRequest origin.
• There is an associated XMLHttpRequest document and either the timeout attribute is not zero, the withCredentials attribute is true, or the responseType attribute is not the empty string.

The open(method, url, async, user, password) method must run these steps (unless otherwise indicated):

1. If there is an associated XMLHttpRequest document run these substeps:

   1. If the XMLHttpRequest document is not fully active, throw an "InvalidStateError" exception and terminate the overall set of steps.

   2. Let XMLHttpRequest base URL be the document base URL of the XMLHttpRequest document.

   3. Let XMLHttpRequest origin be the origin of the XMLHttpRequest document and let it be a globally unique identifier if the anonymous flag is set.

2. If any code point in method is higher than U+00FF LATIN SMALL LETTER Y WITH DIAERESIS or after deflating method it does not match the Method token production, throw a "SyntaxError" exception and terminate these steps. Otherwise let method be the result of deflating method.

3. If method is a case-insensitive match for CONNECT, DELETE, GET, HEAD, OPTIONS, POST, PUT, TRACE, or TRACK subtract 0x20 from each byte in the range 0x61 (ASCII a) to 0x7A (ASCII z).

   If it does not match any of the above, it is passed through literally, including in the final request.

4. If method is a case-sensitive match for CONNECT, TRACE, or TRACK, throw a "SecurityError" exception and terminate these steps.

   Allowing these methods poses a security risk. [HTTPVERBSEC]

5. Let url be a URL with character encoding UTF-8.

6. Resolve url relative to the XMLHttpRequest base URL. If the algorithm returns an error, throw a "SyntaxError" exception and terminate these steps.

7. Drop <fragment> from url.

8. If the "user:password" format in the userinfo production is not supported for the relevant <scheme> and url contains this format, throw a "SyntaxError" and terminate these steps.

9. If url contains the "user:password" format let temp user be the user part and temp password be the password part.

10. If url just contains the "user" format let temp user be the user part.

11. Let async be the value of the async argument or true if it was omitted.

    If async is false, there is an associated XMLHttpRequest document and either the timeout attribute value is not zero, the withCredentials attribute value is true, or the responseType attribute value is not the empty string, throw an "InvalidAccessError" exception and terminate these steps.

12. If the user argument was not omitted follow these sub steps:

    1. If user is not null and the origin of url is not same origin with the XMLHttpRequest origin, throw an "InvalidAccessError" exception and terminate the overall set of steps.

    2. Let temp user be user.

    These steps override anything that may have been set by the url argument.

13. If the password argument was not omitted follow these sub steps:

    1. If password is not null and the origin of url is not same origin with the XMLHttpRequest origin, throw an "InvalidAccessError" exception and terminate the overall set of steps.

    2. Let temp password be password.

    These steps override anything that may have been set by the url argument.

14. Terminate the abort() algorithm.

15. Terminate the send() algorithm.

16. The user agent should cancel any network activity for which the object is responsible.

17. If there are any tasks from the object's XMLHttpRequest task source in one of the task queues, then remove them.

18. Set variables associated with the object as follows:

    • Set the request method to method.

    • Set the request URL to url.

    • If async is false, set the synchronous flag.

    • Set the request username to temp user.

    • Set the request password to temp password.

    • Empty the list of author request headers.

    • Unset the send() flag.

    • Set response entity body to null.

19. Change the state to OPENED.

20. Fire an event named readystatechange.

4.7.2 The setRequestHeader() method

client . setRequestHeader(header, value)

Appends an header to the list of author request headers, or if header is already in the list of author request headers, combines its value with value.

Throws an "InvalidStateError" exception if the state is not OPENED or if the send() flag is set.

Throws a "SyntaxError" exception if header is not a valid HTTP header field name or if value is not a valid HTTP header field value.

As indicated in the algorithm below certain headers cannot be set and are left up to the user agent. In addition there are certain other headers the user agent will take control of if they are not set by the author as indicated at the end of the send() method section.

For non same origin requests using the HTTP GET method a preflight request is made when headers other than Accept and Accept-Language are set.

The setRequestHeader(header, value) method must run these steps:

1. If the state is not OPENED, throw an "InvalidStateError" exception and terminate these steps.

2. If the send() flag is set, throw an "InvalidStateError" exception and terminate these steps.

3. If any code point in header is higher than U+00FF LATIN SMALL LETTER Y WITH DIAERESIS or after deflating header it does not match the field-name production, throw a "SyntaxError" exception and terminate these steps. Otherwise let header be the result of deflating header.

4. If any code point in value is higher than U+00FF LATIN SMALL LETTER Y WITH DIAERESIS or after deflating value it does not match the field-value production, throw a "SyntaxError" exception and terminate these steps. Otherwise let value be the result of deflating value.

   The empty string is legal and represents the empty header value.

5. Terminate these steps if header is a case-insensitive match for one of the following headers:

   • Accept-Charset
   • Accept-Encoding
   • Access-Control-Request-Headers
   • Access-Control-Request-Method
   • Connection
   • Content-Length
   • Cookie
   • Cookie2
   • Content-Transfer-Encoding
   • Date
   • Expect
   • Host
   • Keep-Alive
   • Origin
   • Referer
   • TE
   • Trailer
   • Transfer-Encoding
   • Upgrade
   • User-Agent
   • Via

   … or if the start of header is a case-insensitive match for Proxy- or Sec- (including when header is just Proxy- or Sec-).

   The above headers are controlled by the user agent to let it control those aspects of transport. This guarantees data integrity to some extent. Header names starting with Sec- are not allowed to be set to allow new headers to be minted that are guaranteed not to come from XMLHttpRequest.

6. If header is not in the author request headers list append header with its associated value to the list and terminate these steps.

7. If header is in the author request headers list either use multiple headers, combine the values or use a combination of those (section 4.2, RFC 2616). [HTTP]

See also the send() method regarding user agent header handling for caching, authentication, proxies, and cookies.

// The following script:
var client = new XMLHttpRequest();
client.open('GET', 'demo.cgi');
client.setRequestHeader('X-Test', 'one');
client.setRequestHeader('X-Test', 'two');
client.send();

// …results in the following header being sent:
X-Test: one, two

4.7.3 The timeout attribute

client . timeout

The amount of milliseconds a request can take before being terminated. Initially zero. Zero means there is no timeout.

When set: throws an "InvalidAccessError" exception if the synchronous flag is set when there is an associated XMLHttpRequest document.

The timeout attribute must return its value. Initially its value must be zero.

Setting the timeout attribute must run these steps:

1. If there is an associated XMLHttpRequest document and the synchronous flag is set, throw an "InvalidAccessError" exception and terminate these steps.

2. Set its value to the new value.

This implies that the timeout attribute can be set while fetching is in progress. If that occurs it will still be measured relative to the start of fetching.

4.7.4 The withCredentials attribute

client . withCredentials

True when user credentials are to be included in a cross-origin request. False when they are to be excluded in a cross-origin request and when cookies are to be ignored in its response. Initially false.

When set: throws an "InvalidStateError" exception if the state is not UNSENT or OPENED, or if the send() flag is set.

When set: throws an "InvalidAccessError" exception if either the synchronous flag is set when there is an associated XMLHttpRequest document or if the anonymous flag is set.

The withCredentials attribute must return its value. Initially its value must be false.

Setting the withCredentials attribute must run these steps:

1. If the state is not UNSENT or OPENED, throw an "InvalidStateError" exception and terminate these steps.

2. If the send() flag is set, throw an "InvalidStateError" exception and terminate these steps.

3. If the anonymous flag is set, throw an "InvalidAccessError" exception and terminate these steps.

4. If there is an associated XMLHttpRequest document and the synchronous flag is set, throw an "InvalidAccessError" exception and terminate these steps.

5. Set the withCredentials attribute's value to the given value.

The withCredentials attribute has no effect when fetching same-origin resources.

4.7.5 The upload attribute

client . upload

Returns the associated XMLHttpRequestUpload object.

The upload attribute must return the associated XMLHttpRequestUpload object.

4.7.6 The send() method

client . send(data)

Initiates the request. The optional argument provides the request entity body. The argument is ignored if request method is GET or HEAD.

Throws an "InvalidStateError" exception if the state is not OPENED or if the send() flag is set.

The send(data) method must run these steps (unless otherwise noted). This algorithm can be terminated by invoking the open() or abort() method. When it is terminated the user agent must terminate the algorithm after finishing the step it is on.

The send() algorithm can only be terminated if the synchronous flag is unset and only after the method call has returned.

1. If the state is not OPENED, throw an "InvalidStateError" exception and terminate these steps.

2. If the send() flag is set, throw an "InvalidStateError" exception and terminate these steps.

3. If the request method is a case-sensitive match for GET or HEAD act as if data is null.

   If the data argument has been omitted or is null, do not include a request entity body and go to the next step.

   Otherwise, let encoding be null, mime type be null, and then follow these rules:

   If data is a ArrayBuffer

   Let the request entity body be the raw data represented by data.

   If data is a Blob

   If the object's type attribute is not the empty string let mime type be its value.

   Let the request entity body be the raw data represented by data.

   If data is a Document

   Let encoding be the preferred MIME name of the character encoding of data. If encoding is UTF-16 change it to UTF-8.

   Let mime type be "application/xml" or "text/html" if Document is an HTML document, followed by ";charset=", followed by encoding.

   Let the request entity body be the result of getting the innerHTML attribute on data converted to Unicode and encoded as encoding. Re-throw any exception this throws.

   In particular, if the document cannot be serialized an "InvalidStateError" exception is thrown.

   Subsequent changes to the Document have no effect on what is transferred.

   If data is a string

   Let encoding be UTF-8.

   Let mime type be "text/plain;charset=UTF-8".

   Let the request entity body be data converted to Unicode and encoded as UTF-8.

   If data is a FormData

   Let the request entity body be the result of running the multipart/form-data encoding algorithm with data as form data set and with UTF-8 as the explicit character encoding.

   Let mime type be the concatenation of "multipart/form-data;", a U+0020 SPACE character, "boundary=", and the multipart/form-data boundary string generated by the multipart/form-data encoding algorithm.

   If a Content-Type header is in author request headers and its value is a valid MIME type that has a charset parameter whose value is not a case-insensitive match for encoding, and encoding is not null, set all the charset parameters of that Content-Type header to encoding.

   If no Content-Type header is in author request headers and mime type is not null, append a Content-Type header with value mime type to author request headers.

4. If the synchronous flag is set, release the storage mutex.

5. If the synchronous flag is unset and one or more event listeners are registered on the XMLHttpRequestUpload object, set the upload events flag.

6. Unset the error flag.

7. Set the upload complete flag if there is no request entity body or if the request entity body is empty.

8. If the synchronous flag is unset, run these substeps:

   1. Set the send() flag.

   2. Fire an event named readystatechange.

      The state does not change. The event is dispatched for historical reasons.

   3. Fire a progress event named loadstart.

   4. If the upload complete flag is unset, fire a progress event named loadstart on the XMLHttpRequestUpload object.

   5. Return the send() method call, but continue running the steps in this algorithm.

9. If the XMLHttpRequest origin and the request URL are same origin

   These are the same-origin request steps.

   Fetch the request URL from origin XMLHttpRequest origin, with the synchronous flag set if the synchronous flag is set, using HTTP method request method, user request username (if non-null) and password request password (if non-null), taking into account the request entity body, list of author request headers and the rules listed at the end of this section.

   If the synchronous flag is set

   While making the request also follow the same-origin request event rules.

   The send() method call will now be returned by virtue of this algorithm ending.

   If the synchronous flag is unset

   Make upload progress notifications.

   Make progress notifications.

   While processing the request, as data becomes available and when the user interferes with the request, queue tasks to update the response entity body and follow the same-origin request event rules.

   Otherwise

   These are the cross-origin request steps.

   Make a cross-origin request, passing these as parameters:

   request URL

   The request URL.

   request method

   The request method.

   author request headers

   The list of author request headers.

   request entity body

   The request entity body.

   source origin

   The XMLHttpRequest origin.

   credentials flag

   The withCredentials attribute's value.

   force preflight flag

   True if the upload events flag is set, or false otherwise.

   Request username and request password are always ignored as part of a cross-origin request; including them would allow a site to perform a distributed password search. However, user agents will include user credentials in the request (if the user has any and if withCredentials is true).

   If the synchronous flag is set

   While making the request also follow the cross-origin request event rules.

   The send() method call will now be returned by virtue of this algorithm ending.

   If the synchronous flag is unset

   While processing the request, as data becomes available and when the end user interferes with the request, queue tasks to update the response entity body and follow the cross-origin request event rules.

If the user agent allows the end user to configure a proxy it should modify the request appropriately; i.e., connect to the proxy host instead of the origin server, modify the Request-Line and send Proxy-Authorization headers as specified.

If the user agent supports HTTP Authentication and Authorization is not in the list of author request headers, it should consider requests originating from the XMLHttpRequest object to be part of the protection space that includes the accessed URIs and send Authorization headers and handle 401 Unauthorized requests appropriately.

If authentication fails, XMLHttpRequest origin and the request URL are same origin, Authorization is not in the list of author request headers, request username is null, and request password is null, user agents should prompt the end user for their username and password.

Otherwise, if authentication fails, user agents must not prompt the end user for their username and password. [HTTPAUTH]

End users are not prompted for various cases so that authors can implement their own user interface.

If the user agent supports HTTP State Management it should persist, discard and send cookies (as received in the Set-Cookie response header, and sent in the Cookie header) as applicable. [COOKIES]

If the user agent implements a HTTP cache it should respect Cache-Control headers in author request headers (e.g. Cache-Control: no-cache bypasses the cache). It must not send Cache-Control or Pragma request headers automatically unless the end user explicitly requests such behavior (e.g. by reloading the page).

For 304 Not Modified responses that are a result of a user agent generated conditional request the user agent must act as if the server gave a 200 OK response with the appropriate content. The user agent must allow author request headers to override automatic cache validation (e.g. If-None-Match or If-Modified-Since), in which case 304 Not Modified responses must be passed through. [HTTP]

If the user agent implements server-driven content-negotiation it must follow these constraints for the Accept and Accept-Language request headers:

• Both headers must not be modified if they are in author request headers.

• If not in author request headers, Accept-Language with an appropriate value should be appended to it.

• If not in author request headers, Accept with value */* must be appended to it.

Responses must have the content-encodings automatically decoded. [HTTP]

Besides the author request headers, user agents should not include additional request headers other than those mentioned above or other than those authors are not allowed to set using setRequestHeader(). This ensures that authors have a predictable API.

4.7.7 Infrastructure for the send() method

The same-origin request event rules are as follows:

If the response has an HTTP status code of 301, 302, 303, or 307

If the redirect violates infinite loop precautions this is a network error.

Otherwise, run these steps:

1. Set the request URL to the URL conveyed by the Location header.

2. If the XMLHttpRequest origin and the origin of request URL are same origin transparently follow the redirect while observing the same-origin request event rules.

3. Otherwise, follow the cross-origin request steps and terminate the steps for this algorithm.

HTTP places requirements on the user agent regarding the preservation of the request method and request entity body during redirects, and also requires end users to be notified of certain kinds of automatic redirections.

If the end user cancels the request

This is an abort error.

If there is a network error

In case of DNS errors, TLS negotiation failure, or other type of network errors, this is a network error. Do not request any kind of end user interaction.

This does not include HTTP responses that indicate some type of error, such as HTTP status code 410.

If timeout is not 0 and since the request started the amount of milliseconds specified by timeout has passed

This is a timeout error.

Once all HTTP headers have been received, the synchronous flag is unset, and the HTTP status code of the response is not 301, 302, 303, or 307

Switch to the HEADERS_RECEIVED state.

Once the first byte (or more) of the response entity body has been received and the synchronous flag is unset

If there is no response entity body and the synchronous flag is unset

Switch to the LOADING state.

Once the whole response entity body has been received

If there is no response entity body and the state is LOADING

If there is no response entity body and the synchronous flag is set

Switch to the DONE state.