XMLHttpRequest

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequestEventTarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="276" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">XMLHttpRequestEventTarget</text></a><polyline points="401,25  411,20  411,30  401,25" stroke="#D4DDE4" fill="none"/><line x1="411" y1="25" x2="441" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest" target="_top"><rect x="441" y="1" width="140" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="511" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">XMLHttpRequest</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

XMLHttpRequest 는 이름으로만 봐서는 XML 만 받아올 수 있을 것 같아 보이지만, 모든 종류의 데이터를 받아오는데 사용할 수 있습니다. 또한 HTTP 이외의 프로토콜도 지원합니다(file 과 ftp 포함).

통신을 통해 서버로부터 이벤트나 메시지 데이터를 받아야 한다면, EventSource 를 통한 server-sent events 사용을 고려하세요. 완전 양방향 통신을 해야 한다면 웹 소켓이 더 나은 선택일 수 있습니다.

생성자

XMLHttpRequest()

생성자는 XMLHttpRequest 를 초기화합니다. 다른 모든 메소드 호출이전에 호출되어야 합니다.

속성

이 인터페이스는 XMLHttpRequestEventTarget 과 EventTarget 의 속성도 상속합니다.

XMLHttpRequest.onreadystatechange

readyState 어트리뷰트가 변경될때마다 호출되는 EventHandler 입니다.

XMLHttpRequest.readyState Read only

요청의 상태를 unsigned short 로 반환합니다.

XMLHttpRequest.response Read only

응답 엔티티 바디를 갖는하는 XMLHttpRequest.responseType 의 값에 따라 ArrayBuffer, Blob, Document, JavaScript 객체, 또는 DOMString 을 반환합니다.

XMLHttpRequest.responseText Read only

요청에 대한 응답을 텍스트로 갖는 DOMString 을 반환합니다. 요청이 성공하지 못했거나 아직 전송되지 않았을 경우 null 을 반환합니다.

XMLHttpRequest.responseType

응답 타입을 정의하는 열거형 값입니다.

XMLHttpRequest.responseURL Read only

응답의 연속된 URL 을 반환합니다. URL 이 null 인 경우 빈 문자열을 반환합니다.

XMLHttpRequest.responseXML Read only

요청에 대한 응답을 갖는 Document 를 반환합니다. 요청이 성공하지 못했거나, 아직 전송되지 않았거나, XML 또는 HTML 로 파싱할 수 없는 경우 null 을 반환합니다. workers 에서는 사용이 불가합니다.

XMLHttpRequest.status Read only

요청의 응답 상태를 갖는 unsigned short 를 반환합니다.

XMLHttpRequest.statusText Read only

HTTP 서버에 의해 반환된 응답 문자열을 갖는 DOMString 을 반환합니다. XMLHTTPRequest.status 와는 다르게, 응답 메시지의 전체 텍스트를 갖습니다(예, "200 OK").

XMLHttpRequest.timeout

요청이 자동으로 종료될때까지 걸린 시간을 밀리초 단위로 나타내는 unsigned long 입니다.

XMLHttpRequestEventTarget.ontimeout

요청 시간 초과때마다 호출되는 EventHandler 입니다.

XMLHttpRequest.upload Read only

업로드 과정을 나타내는 XMLHttpRequestUpload 입니다.

XMLHttpRequest.withCredentials

사이트 간 Access-Control 요청이 쿠키나 인증 헤더와 같은 자격 증명을 사용해야하는지 여부를 나타내는 Boolean 입니다.

비표준 속성

XMLHttpRequest.channelRead only

nsIChannel 입니다. 요청을 수행할 때 객체에 의해 사용된 채널입니다.

XMLHttpRequest.mozAnonRead only

Boolean 입니다. true 일 경우, 요청이 쿠키나 인증 헤더 없이 전송됩니다.

XMLHttpRequest.mozSystemRead only

Boolean 입니다. true 일 경우, 요청에대해 동일 출처 정책(same origin policy)이 강제되지 않습니다.

XMLHttpRequest.mozBackgroundRequest

 Boolean 입니다. 객체가 백그라운드 서비스 요청을 나타내는지 여부를 표시합니다.

XMLHttpRequest.mozResponseArrayBuffer 안씀 Gecko 6 Read only

ArrayBuffer. 요청에 대한 응답입니다. 타입이 지정된 JavaScript 배열입니다.

XMLHttpRequest.multipart안씀 Gecko 22

This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22.
대신 Server-Sent Events, 웹 소켓, 또는 프로그레스 이벤트의 responseText 를 사용하시기 바랍니다.

이벤트 핸들러

XMLHttpRequest 인스턴스의 속성으로써 onreadystatechange 는 모든 브라우저에서 지원됩니다.

그 이후, 많은 부가적인 이벤트 핸들러가 다양한 브라우저에서 구현되었습니다(onload, onerror, onprogress, 등등.). XMLHttpRequest 사용하기 글을 확인하세요.

Firefox 를 포함해, 더 최신 브라우저는 on* 속성을 핸들러 함수로 설정하는것 뿐만 아니라 표준 addEventListener() API 를 통해 XMLHttpRequest 이벤트 리스닝도 지원합니다.

메소드

XMLHttpRequest.abort()

이미 전송된 요청을 중지합니다.

XMLHttpRequest.getAllResponseHeaders()

모든 응답 헤더를 CRLF 로 구분한 문자열로 반환합니다. 응답을 받지 않은 경우 null 입니다.

XMLHttpRequest.getResponseHeader()

지정한 헤더의 텍스트를 갖는 문자열을 반환합니다. 응답을 아직 받지 못했거나 응답에 헤더가 존재하지 않을 경우 null 입니다.

XMLHttpRequest.open()

요청을 초기화합니다. 이 메소드는 네이티브 코드로부터의 요청을 초기화하기 위해 JavaScript 코드에 의해 사용됩니다. 대신 openRequest() 를 사용하세요.

XMLHttpRequest.overrideMimeType()

서버에의해 반환된 MIME 타입을 오버라이드합니다.

XMLHttpRequest.send()

요청을 보냅니다. 요청이 비동기인 경우(기본값), 이 메소드는 요청이 보내진 즉시 반환합니다.

XMLHttpRequest.setRequestHeader()

HTTP 요청 헤더의 값을 설정합니다. open() 후, send() 전에 setRequestHeader() 를 호출해야합니다.

비표준 메소드

XMLHttpRequest.init()

C++ 코드에서 사용할 객체를 초기화합니다.

XMLHttpRequest.openRequest()

요청을 초기화합니다. 이 메소드는 JavaScript 코부로부터의 요청을 초기화하기위해 네이티브 코드에서 사용됩니다. 대신 open() 을 사용하세요. open() 에 대한 문서를 확인하세요.

XMLHttpRequest.sendAsBinary()

바이너리 데이터를 보내는 send() 메소드의 다른 방식입니다.

Events

abort

예를 들어 프로그램이 XMLHttpRequest.abort()를 호출해서 요청이 중단되면 발생한다.onabort 속성을 통해서도 가능하다.

error

요청에 에러가 생기면 발생한다.onerror 속성을 통해서도 가능하다.

load

XMLHttpRequest 처리 과정이 성공적으로 완료되면 발생한다.onload 속성을 통해서도 가능하다.

loadend

요청이 성공이든 (load 다음) 실패든 (abort 또는 error 다음) 완료되면 발생한다.
onloadend 속성을 통해서도 가능하다.

loadstart

요청이 데이터를 받기 시작하면 발생한다.
onloadstart 속성을 통해서도 가능하다.

progress

요청이 데이터를 받는 동안 주기적으로 발생한다.
onprogress 속성을 통해서도 가능하다.

명세

브라우저 호환성

함께 보기

• XMLSerializer: DOM 트리를 XML 로 직렬화
• XMLHttpRequest 를 다루는 MDN 튜토리얼:
  • Ajax 시작하기
  • XMLHttpRequest 사용하기
  • HTML in XMLHttpRequest
• HTML5 Rocks — New Tricks in XMLHttpRequest2