1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
---
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> 어트리뷰트가 변경될때마다 호출되는 {{domxref("EventHandler")}} 입니다.</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>요청 시간 초과때마다 호출되는 {{domxref("EventHandler")}} 입니다. {{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>
<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<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>
|
