mozilla

Revision 190966 of XMLHttpRequest

  • 리비전 슬러그: XMLHttpRequest
  • 리비전 제목: XMLHttpRequest
  • 리비전 아이디: 190966
  • 제작일시:
  • 만든이: Sebuls
  • 현재 리비전인가요? 아니오
  • 댓글 /* Other Properties and Methods */
태그: 

리비전 내용

XMLHttpRequest is a JavaScript object that was created by Microsoft and adopted by Mozilla. You can use it to easily retrieve data via HTTP. Despite its name, it can be used for more than just XML documents. In Gecko, this object implements the nsIJSXMLHttpRequest and nsIXMLHttpRequest interfaces. Recent versions of Gecko have some changes to this object, see XMLHttpRequest changes for Gecko1.8.

기본 사용

Using XMLHttpRequest is very simple. You create an instance of the object, open a URL, and send the request. The HTTP status code of the result, as well as the result document are available in the request object afterwards.

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false); 
req.send(null);
if(req.status == 200)
  dump(req.responseText);
Note: This example works synchronously, so it will block the user interface if you call this from your JavaScript. You should not use this in practice.

비동기 사용

If you intend to use XMLHttpRequest from an extension, you should let it load asynchronously. In asynchronous usage, you get a callback when the data has been received, which lets the browser continue to work as normal while your request is happening.

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); 

프로그레스 모니터링

The nsIJSXMLHttpRequest interface, which is supported by XMLHttpRequest, provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.

If, for example, you wish to provide progress information to the user while the document is being received, you can use code like this:

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);

The onprogress event's attributes, position and totalSize, indicate the current number of bytes received and the total number of bytes expected, respectively.

All of these events have their target attribute set to the XMLHttpRequest they correspond to.

다른 속성과 메소드

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> is a <a href="ko/JavaScript">JavaScript</a> object that was created by Microsoft and adopted by Mozilla.  You can use it to easily retrieve data via HTTP.  Despite its name, it can be used for more than just XML documents.  In Gecko, this object implements the <code><a href="ko/NsIJSXMLHttpRequest">nsIJSXMLHttpRequest</a></code> and <code><a href="ko/NsIXMLHttpRequest">nsIXMLHttpRequest</a></code> interfaces.  Recent versions of Gecko have some changes to this object, see <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>Using <code>XMLHttpRequest</code> is very simple.  You create an instance of the object, open a URL, and send the request.  The HTTP status code of the result, as well as the result document are available in the request object afterwards.
</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>Note:</b> This example works synchronously, so it will block the user interface if you call this from your JavaScript.  You should not use this in practice.</div>
<h3 name=".EB.B9.84.EB.8F.99.EA.B8.B0_.EC.82.AC.EC.9A.A9"> 비동기 사용 </h3>
<p>If you intend to use <code>XMLHttpRequest</code> from an extension, you should let it load asynchronously.  In asynchronous usage, you get a callback when the data has been received, which lets the browser continue to work as normal while your request is happening.
</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>The <code><a href="ko/NsIJSXMLHttpRequest">nsIJSXMLHttpRequest</a></code> interface, which is supported by <code>XMLHttpRequest</code>, provides the ability to listen to various events that can occur while the request is being processed.  This includes periodic progress notifications, error notifications, and so forth.
</p><p>If, for example, you wish to provide progress information to the user while the document is being received, you can use code like this:
</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>The <code>onprogress</code> event's attributes, <code>position</code> and <code>totalSize</code>, indicate the current number of bytes received and the total number of bytes expected, respectively.
</p><p>All of these events have their <code>target</code> attribute set to the <code>XMLHttpRequest</code> they correspond to.
</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" } ) }}
현재 리비전 복원