---
title: XMLHttpRequest
slug: Web/API/XMLHttpRequest
tags:
  - AJAX
  - API
  - HTTP
  - XHR
  - XMLHttpRequest
  - 레퍼런스
  - 웹
  - 인터페이스
  - 통신
translation_of: Web/API/XMLHttpRequest
---
<p>{{DefaultAPISidebar("XMLHttpRequest")}}<br>
 <code>XMLHttpRequest</code>(XHR) 객체는 서버와 상호작용하기 위하여 사용됩니다. 전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있습니다. 이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다. <code>XMLHttpRequest</code> 는 {{Glossary("AJAX")}} 프로그래밍에 주로 사용됩니다.</p>

<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{InheritanceDiagram(650, 150)}}</span></p>

<p><code>XMLHttpRequest</code> 는 이름으로만 봐서는 XML 만 받아올 수 있을 것 같아 보이지만, 모든 종류의 데이터를 받아오는데 사용할 수 있습니다. 또한 <a href="https://developer.mozilla.org/ko/docs/Web/HTTP">HTTP</a> 이외의 프로토콜도 지원합니다(<code>file</code> 과 <code>ftp</code> 포함).</p>

<p>통신을 통해 서버로부터 이벤트나 메시지 데이터를 받아야 한다면, {{domxref("EventSource")}} 를 통한 <a href="https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events">server-sent events</a> 사용을 고려하세요. 완전 양방향 통신을 해야 한다면 <a href="https://developer.mozilla.org/ko/docs/WebSockets">웹 소켓</a>이 더 나은 선택일 수 있습니다.</p>

<h2 id="생성자">생성자</h2>

<dl>
 <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
 <dd>생성자는 XMLHttpRequest 를 초기화합니다. 다른 모든 메소드 호출이전에 호출되어야 합니다.</dd>
</dl>

<h2 id="속성">속성</h2>

<p><em>이 인터페이스는 {{domxref("XMLHttpRequestEventTarget")}} 과 {{domxref("EventTarget")}} 의 속성도 상속합니다.</em></p>

<dl>
 <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
 <dd><code>readyState</code> 어트리뷰트가 변경될때마다 호출되는 {{event("Event_handlers", "event handler")}} 입니다.</dd>
 <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
 <dd>요청의 상태를 <code>unsigned short</code> 로 반환합니다.</dd>
 <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
 <dd>응답 엔티티 바디를 갖는하는 {{domxref("XMLHttpRequest.responseType")}} 의 값에 따라 {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript 객체, 또는 {{domxref("DOMString")}} 을 반환합니다.</dd>
 <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
 <dd>요청에 대한 응답을 텍스트로 갖는 {{domxref("DOMString")}} 을 반환합니다. 요청이 성공하지 못했거나 아직 전송되지 않았을 경우 <code>null</code> 을 반환합니다.</dd>
 <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
 <dd>응답 타입을 정의하는 열거형 값입니다.</dd>
 <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
 <dd>응답의 연속된 URL 을 반환합니다. URL 이 null 인 경우 빈 문자열을 반환합니다.</dd>
 <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
 <dd>요청에 대한 응답을 갖는 {{domxref("Document")}} 를 반환합니다. 요청이 성공하지 못했거나, 아직 전송되지 않았거나, XML 또는 HTML 로 파싱할 수 없는 경우 <code>null</code> 을 반환합니다. workers 에서는 사용이 불가합니다.</dd>
 <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
 <dd>요청의 응답 상태를 갖는 <code>unsigned short</code> 를 반환합니다.</dd>
 <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt>
 <dd>HTTP 서버에 의해 반환된 응답 문자열을 갖는 {{domxref("DOMString")}} 을 반환합니다. {{domxref("XMLHTTPRequest.status")}} 와는 다르게, 응답 메시지의 전체 텍스트를 갖습니다(예, "<code>200 OK</code>").</dd>
</dl>

<div class="blockIndicator note">
<p><strong>노트:</strong> HTTP/2 명세(<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>)에 따르면, HTTP/2 는 HTTP/1.1 상태 라인에 포함된 버전이나 원인 문구를 전달하는 방법을 정의하지 않습니다.</p>
</div>

<dl>
 <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
 <dd>요청이 자동으로 종료될때까지 걸린 시간을 밀리초 단위로 나타내는 <code>unsigned long</code> 입니다.</dd>
 <dt>{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
 <dd>요청 시간 초과때마다 호출되는 {{event("Event_handlers", "event handler")}} 입니다. {{gecko_minversion_inline("12.0")}}</dd>
 <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
 <dd>업로드 과정을 나타내는 {{domxref("XMLHttpRequestUpload")}} 입니다.</dd>
 <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
 <dd>사이트 간 <code>Access-Control</code> 요청이 쿠키나 인증 헤더와 같은 자격 증명을 사용해야하는지 여부를 나타내는 {{domxref("Boolean")}} 입니다.</dd>
</dl>

<h3 id="비표준_속성">비표준 속성</h3>

<dl>
 <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
 <dd>{{Interface("nsIChannel")}} 입니다. 요청을 수행할 때 객체에 의해 사용된 채널입니다.</dd>
 <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
 <dd>Boolean 입니다. true 일 경우, 요청이 쿠키나 인증 헤더 없이 전송됩니다.</dd>
 <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
 <dd>Boolean 입니다. true 일 경우, 요청에대해 동일 출처 정책(same origin policy)이 강제되지 않습니다.</dd>
 <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
 <dd> Boolean 입니다. 객체가 백그라운드 서비스 요청을 나타내는지 여부를 표시합니다.</dd>
 <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
 <dd>{{jsxref("ArrayBuffer")}}. 요청에 대한 응답입니다. 타입이 지정된 JavaScript 배열입니다.</dd>
 <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
 <dd><strong>This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22.</strong><br>
 대신 <a href="https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="https://developer.mozilla.org/ko/docs/WebSockets">웹 소켓</a>, 또는 프로그레스 이벤트의 <code>responseText</code> 를 사용하시기 바랍니다.</dd>
</dl>

<h3 id="이벤트_핸들러">이벤트 핸들러</h3>

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

<p>그 이후, 많은 부가적인 이벤트 핸들러가 다양한 브라우저에서 구현되었습니다(<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, 등등.). <a href="https://developer.mozilla.org/ko/docs/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest 사용하기</a> 글을 확인하세요.</p>

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

<h2 id="메소드">메소드</h2>

<dl>
 <dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
 <dd>이미 전송된 요청을 중지합니다.</dd>
 <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
 <dd>모든 응답 헤더를 {{Glossary("CRLF")}} 로 구분한 문자열로 반환합니다. 응답을 받지 않은 경우 <code>null</code> 입니다.</dd>
 <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
 <dd>지정한 헤더의 텍스트를 갖는 문자열을 반환합니다. 응답을 아직 받지 못했거나 응답에 헤더가 존재하지 않을 경우 <code>null</code> 입니다.</dd>
 <dt>{{domxref("XMLHttpRequest.open()")}}</dt>
 <dd>요청을 초기화합니다. 이 메소드는 네이티브 코드로부터의 요청을 초기화하기 위해 JavaScript 코드에 의해 사용됩니다. 대신 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> 를 사용하세요.</dd>
 <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
 <dd>서버에의해 반환된 MIME 타입을 오버라이드합니다.</dd>
 <dt>{{domxref("XMLHttpRequest.send()")}}</dt>
 <dd>요청을 보냅니다. 요청이 비동기인 경우(기본값), 이 메소드는 요청이 보내진 즉시 반환합니다.</dd>
 <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
 <dd>HTTP 요청 헤더의 값을 설정합니다. <a href="https://developer.mozilla.org/ko/docs/XMLHttpRequest$edit#open"><code>open()</code></a> 후, <code>send()</code> 전에 <code>setRequestHeader()</code> 를 호출해야합니다.</dd>
</dl>

<h3 id="비표준_메소드">비표준 메소드</h3>

<dl>
 <dt>{{domxref("XMLHttpRequest.init()")}}</dt>
 <dd>C++ 코드에서 사용할 객체를 초기화합니다.</dd>
</dl>

<div class="blockIndicator warning">
<p><strong>주의:</strong> 이 메소드는 JavaScript 에서 호출되면 안 됩니다.</p>
</div>

<dl>
 <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
 <dd>요청을 초기화합니다. 이 메소드는 JavaScript 코부로부터의 요청을 초기화하기위해 네이티브 코드에서 사용됩니다. 대신 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> 을 사용하세요. <code>open()</code> 에 대한 문서를 확인하세요.</dd>
 <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
 <dd>바이너리 데이터를 보내는 <code>send()</code> 메소드의 다른 방식입니다.</dd>
</dl>

<h2 id="Events">Events</h2>

<dl>
 <dt>{{domxref("XMLHttpRequest/abort_event", "abort")}}</dt>
 <dd>예를 들어 프로그램이 {{domxref("XMLHttpRequest.abort()")}}를 호출해서 요청이 중단되면 발생한다.{{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} 속성을 통해서도 가능하다.</dd>
 <dt>{{domxref("XMLHttpRequest/error_event", "error")}}</dt>
 <dd>요청에 에러가 생기면 발생한다.{{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} 속성을 통해서도 가능하다.</dd>
 <dt>{{domxref("XMLHttpRequest/load_event", "load")}}</dt>
 <dd>{{domxref("XMLHttpRequest")}} 처리 과정이 성공적으로 완료되면 발생한다.{{domxref("XMLHttpRequestEventTarget/onload", "onload")}} 속성을 통해서도 가능하다.</dd>
 <dt>{{domxref("XMLHttpRequest/loadend_event", "loadend")}}</dt>
 <dd>요청이 성공이든 ({{domxref("XMLHttpRequest/load_event", "load")}} 다음) 실패든 ({{domxref("XMLHttpRequest/abort_event", "abort")}} 또는 {{domxref("XMLHttpRequest/error_event", "error")}} 다음) 완료되면 발생한다.<br>
 {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} 속성을 통해서도 가능하다.</dd>
 <dt>{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}</dt>
 <dd>요청이 데이터를 받기 시작하면 발생한다.<br>
 {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} 속성을 통해서도 가능하다.</dd>
 <dt>{{domxref("XMLHttpRequest/progress_event", "progress")}}</dt>
 <dd>요청이 데이터를 받는 동안 주기적으로 발생한다.<br>
 {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} 속성을 통해서도 가능하다.</dd>
</dl>

<h2 id="명세">명세</h2>

<table>
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">코멘트</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('XMLHttpRequest')}}</td>
   <td>{{Spec2('XMLHttpRequest')}}</td>
   <td>Live standard, latest version</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<p>{{Compat("api.XMLHttpRequest")}}</p>

<h2 id="함께_보기">함께 보기</h2>

<ul>
 <li>{{domxref("XMLSerializer")}}: DOM 트리를 XML 로 직렬화</li>
 <li><code>XMLHttpRequest</code> 를 다루는 MDN 튜토리얼:
  <ul>
   <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started">Ajax 시작하기</a></li>
   <li><a href="https://developer.mozilla.org/ko/docs/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest 사용하기</a></li>
   <li><a href="https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
  </ul>
 </li>
 <li><a href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li>
</ul>