diff options
Diffstat (limited to 'files/ko/web/api/xmlhttprequest/index.html')
| -rw-r--r-- | files/ko/web/api/xmlhttprequest/index.html | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/files/ko/web/api/xmlhttprequest/index.html b/files/ko/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..43437969b0 --- /dev/null +++ b/files/ko/web/api/xmlhttprequest/index.html @@ -0,0 +1,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> |