mozilla

Revision 190968 of XMLHttpRequest

  • 리비전 슬러그: XMLHttpRequest
  • 리비전 제목: XMLHttpRequest
  • 리비전 아이디: 190968
  • 제작일시:
  • 만든이: Wafe
  • 현재 리비전인가요? 아니오
  • 댓글 /* 비동기 사용 */
태그: 

리비전 내용

XMLHttpRequest는 Microsoft가 만든 JavaScript 개체(object)입니다. 후에 Mozilla도 이것을 받아들였습니다. XMLHttpRequest는 HTTP를 통해서 쉽게 데이터를 받을 수 있게 해줍니다. 이름과는 좀 동떨어지게도 XML 문서 이상의 용도로 쓰일 수 있습니다. Gecko에서 이 개체는 nsIJSXMLHttpRequestnsIXMLHttpRequest 인터페이스를 구현한 개체입니다. 최신 버전 Gecko에서 이 개체에 변경 사항이 좀 있었습니다. XMLHttpRequest changes for Gecko1.8을 보십시오.

기본 사용

XMLHttpRequest의 사용법은 아주 간단합니다. 이 개체의 인스턴스를 만들고, URL을 열고, 요청을 보내면 됩니다. 그 후에는 인스턴스의 결과 문서와 HTTP 상태 코드를 사용할 수 있게됩니다.

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false); 
req.send(null);
if(req.status == 200)
  dump(req.responseText);
참고: 이 예제는 동기적으로 동작하므로 이 함수를 JavaScript에서 호출하면 UI가 멈춥니다. 실제 제품 코드에서는 이 코드를 사용하지 마십시오.

비동기 사용

XMLHttpRequest를 확장 기능에서 사용하려면 반드시 비동기적으로 동작하도록 해야합니다. 비동기적으로 사용할 때, 데이터가 오면 콜백을 받게 됩니다. 이로써 브라우저가 우리 요청을 처리하는 동안에도 평상시처럼 계속 동작하게 됩니다.

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      dump(req.responseText);
     else
      dump("Error loading page\n");
  }
};
req.send(null); 

프로그레스 모니터링

XMLHttpRequest가 지원하는 nsIJSXMLHttpRequest 인터페이스는 요청이 처리되는 동안 발생할 수 있는 다양한 이벤트를 들을 수 있습니다. 주기적인 진행 상태 알림, 에러 알림 등등이 이에 포함됩니다.

예를 들어, 문서를 받는 동안 사용자에게 진행 상태 정보를 제공하려면 다음과 같은 코드를 사용할 수 있습니다.

onProgress: function(e) {
  var percentComplete = (e.position / e.totalSize)*100;
  ...
},

onError: function(e) {
  alert("Error " + e.target.status + " occurred while receiving the document.");
},
..
httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url, true);
httpRequest.onprogress = this.onProgress;
httpRequest.onload = this.onLoad;
httpRequest.onerror = this.onError;
httpRequest.send(null);

onprogress의 속성인 positiontotalSize는 받은 데이터가 몇 바이트인지, 데이터의 전체 크기가 몇 바이트인지 각각 나타냅니다.

모든 이벤트는 그에 대응하는 XMLHttpRequesttarget 속성으로 가지고 있습니다.

다른 속성과 메소드

In addition to the properties and methods shown above, there are other useful properties and methods on the request object.

responseXML

If you load an XML document, the responseXML property will contain the document as an XmlDocument object that you can manipulate using DOM methods. If the server sends well-formed XML but does not specify an XML Content-Type header, you can use overrideMimeType() to force the document to be parsed as XML. If the server does not send well-formed XML, responseXML will be null regardless of any content type override.

overrideMimeType()

This method can be used to force a document to be handled as a particular content type. You will generally want to use when you want to use responseXML and the server sends you XML, but does not send the correct Content-Type header.
Note: This method must be called before calling send().
var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.overrideMimeType('text/xml');
req.send(null);

setRequestHeader()

This method can be used to set an HTTP header on the request before you send it.

Note: You must call open() before calling this method.
var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.setRequestHeader("X-Foo", "Bar");
req.send(null);

getResponseHeader()

This method can be used to get an HTTP header from the server response.

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.send(null);
dump("Content-Type: " + req.getResponseHeader("Content-Type") + "\n");

References

  1. XMLHttpRequest - REST and the Rich User Experience
  2. XULPlanet documentation
  3. Microsoft documentation
  4. "Using the XMLHttpRequest Object" (jibbering.com)
{{ wiki.languages( { "en": "en/XMLHttpRequest", "es": "es/XMLHttpRequest", "fr": "fr/XMLHttpRequest", "it": "it/XMLHttpRequest", "ja": "ja/XMLHttpRequest", "pl": "pl/XMLHttpRequest" } ) }}

리비전 소스

<p><code>XMLHttpRequest</code>는 Microsoft가 만든 <a href="ko/JavaScript">JavaScript</a> 개체(object)입니다. 후에 Mozilla도 이것을 받아들였습니다. XMLHttpRequest는 HTTP를 통해서 쉽게 데이터를 받을 수 있게 해줍니다. 이름과는 좀 동떨어지게도 XML 문서 이상의 용도로 쓰일 수 있습니다. Gecko에서 이 개체는 <code><a href="ko/NsIJSXMLHttpRequest">nsIJSXMLHttpRequest</a></code>와 <code><a href="ko/NsIXMLHttpRequest">nsIXMLHttpRequest</a></code> 인터페이스를 구현한 개체입니다. 최신 버전 Gecko에서 이 개체에 변경 사항이 좀 있었습니다. <a href="ko/XMLHttpRequest_changes_for_Gecko1.8">XMLHttpRequest changes for Gecko1.8</a>을 보십시오.
</p>
<h3 name=".EA.B8.B0.EB.B3.B8_.EC.82.AC.EC.9A.A9"> 기본 사용 </h3>
<p><code>XMLHttpRequest</code>의 사용법은 아주 간단합니다. 이 개체의 인스턴스를 만들고, URL을 열고, 요청을 보내면 됩니다. 그 후에는 인스턴스의 결과 문서와 HTTP 상태 코드를 사용할 수 있게됩니다.
</p>
<h4 name=".EC.98.88"> 예 </h4>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false); 
req.send(null);
if(req.status == 200)
  dump(req.responseText);
</pre>
<div class="note"><b>참고:</b> 이 예제는 동기적으로 동작하므로 이 함수를 JavaScript에서 호출하면 UI가 멈춥니다. 실제 제품 코드에서는 이 코드를 사용하지 마십시오.</div>
<h3 name=".EB.B9.84.EB.8F.99.EA.B8.B0_.EC.82.AC.EC.9A.A9"> 비동기 사용 </h3>
<p><code>XMLHttpRequest</code>를 확장 기능에서 사용하려면 반드시 비동기적으로 동작하도록 해야합니다. 비동기적으로 사용할 때, 데이터가 오면 콜백을 받게 됩니다. 이로써 브라우저가 우리 요청을 처리하는 동안에도 평상시처럼 계속 동작하게 됩니다.
</p>
<h4 name=".EC.98.88_2"> 예 </h4>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      dump(req.responseText);
     else
      dump("Error loading page\n");
  }
};
req.send(null); 
</pre>
<h4 name=".ED.94.84.EB.A1.9C.EA.B7.B8.EB.A0.88.EC.8A.A4_.EB.AA.A8.EB.8B.88.ED.84.B0.EB.A7.81">프로그레스 모니터링 </h4>
<p><code>XMLHttpRequest</code>가 지원하는 <code><a href="ko/NsIJSXMLHttpRequest">nsIJSXMLHttpRequest</a></code> 인터페이스는 요청이 처리되는 동안 발생할 수 있는 다양한 이벤트를 들을 수 있습니다. 주기적인 진행 상태 알림, 에러 알림 등등이 이에 포함됩니다.
</p><p>예를 들어, 문서를 받는 동안 사용자에게 진행 상태 정보를 제공하려면 다음과 같은 코드를 사용할 수 있습니다.
</p>
<pre>onProgress: function(e) {
  var percentComplete = (e.position / e.totalSize)*100;
  ...
},

onError: function(e) {
  alert("Error " + e.target.status + " occurred while receiving the document.");
},
..
httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url, true);
httpRequest.onprogress = this.onProgress;
httpRequest.onload = this.onLoad;
httpRequest.onerror = this.onError;
httpRequest.send(null);
</pre>
<p><code>onprogress</code>의 속성인 <code>position</code>과 <code>totalSize</code>는 받은 데이터가 몇 바이트인지, 데이터의 전체 크기가 몇 바이트인지 각각 나타냅니다.
</p><p>모든 이벤트는 그에 대응하는 <code>XMLHttpRequest</code>를 <code>target</code> 속성으로 가지고 있습니다.
</p>
<h3 name=".EB.8B.A4.EB.A5.B8_.EC.86.8D.EC.84.B1.EA.B3.BC_.EB.A9.94.EC.86.8C.EB.93.9C"> 다른 속성과 메소드 </h3>
<p>In addition to the properties and methods shown above, there are other useful properties and methods on the request object.
</p>
<h4 name="responseXML"> responseXML </h4>
<p>If you load an <a href="ko/XML">XML</a> document, the <code>responseXML</code> property will contain the document as an <code>XmlDocument</code> object that you can manipulate using DOM methods.  If the server sends well-formed XML but does not specify an XML Content-Type header, you can use <code><a href="ko/XMLHttpRequest#overrideMimeType.28.29">overrideMimeType()</a></code> to force the document to be parsed as XML. If the server does not send well-formed XML, <code>responseXML</code> will be null regardless of any content type override.
</p>
<h4 name="overrideMimeType.28.29"> overrideMimeType() </h4>
This method can be used to force a document to be handled as a particular content type.  You will generally want to use when you want to use <code>responseXML</code> and the server sends you <a href="ko/XML">XML</a>, but does not send the correct Content-Type header.  <div class="note"><b>Note:</b> This method must be called before calling <code>send()</code>.</div>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.overrideMimeType('text/xml');
req.send(null);
</pre>
<h4 name="setRequestHeader.28.29"> setRequestHeader() </h4>
<p>This method can be used to set an HTTP header on the request before you send it.
</p>
<div class="note"><b>Note:</b> You must call <code>open()</code> before calling this method.</div>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.setRequestHeader("X-Foo", "Bar");
req.send(null);
</pre>
<h4 name="getResponseHeader.28.29"> getResponseHeader() </h4>
<p>This method can be used to get an HTTP header from the server response.
</p>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.send(null);
dump("Content-Type: " + req.getResponseHeader("Content-Type") + "\n");
</pre>
<h3 name="References"> References </h3>
<ol><li> <a class="external" href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a>
</li><li> <a class="external" href="http://www.xulplanet.com/references/objref/XMLHttpRequest.html">XULPlanet documentation</a>
</li><li> <a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a>
</li><li> <a class="external" href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a>
</li></ol>
{{ wiki.languages( { "en": "en/XMLHttpRequest", "es": "es/XMLHttpRequest", "fr": "fr/XMLHttpRequest", "it": "it/XMLHttpRequest", "ja": "ja/XMLHttpRequest", "pl": "pl/XMLHttpRequest" } ) }}
현재 리비전 복원