Revision 2226 of Using XMLHttpRequest

  • Revision slug: DOM/XMLHttpRequest/Using_XMLHttpRequest
  • Revision title: Using XMLHttpRequest
  • Revision id: 2226
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 2 words removed

Revision Content

XMLHttpRequest makes sending HTTP requests very easy.  You simply create an instance of the object, open a URL, and send the request.  The HTTP status of the result, as well as the result's contents, are available in the request object when the transation is completed.

Synchronous and asynchronous requests

XMLHttpRequest supports both synchronous and asynchronous communications.

Example: Synchronous request

This example demonstrates how to make a simple synchronous request.

Note: As a general rule, you should avoid using synchronous XMLHttpRequests because they block the application's user interface.
var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false); 
req.send(null);
if(req.status == 200)
  dump(req.responseText);

Line 1 instantiates the XMLHttpRequest object.  Line 2 then opens a new request, specifying that a GET request will be used to fetch the Mozilla.org home page, and that the operation should not be asynchronous.

Line 3 sends the request.  The null parameter indicates that no body content is needed for the GET request.

Line 4 checks the status code after the transaction is completed.  If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.

Example: Non-HTTP synchronous request

Despite its name, XMLHttpRequest can be used for non-HTTP requests.  This example shows how to use it to fetch a file from the local file system.

var req = new XMLHttpRequest();
req.open('GET', 'file:///home/user/file.json', false); 
req.send(null);
if(req.status == 0)
  dump(req.responseText);

The key thing to note here is that the result status is being compared to 0 for success instead of 200.  This is because the file and ftp schemes do not use HTTP result codes.

Revision Source

<p><code>XMLHttpRequest</code> makes sending HTTP requests very easy.  You simply create an instance of the object, open a URL, and send the request.  The HTTP status of the result, as well as the result's contents, are available in the request object when the transation is completed.</p>
<h2>Synchronous and asynchronous requests</h2>
<p><code>XMLHttpRequest</code> supports both synchronous and asynchronous communications.</p>
<h3>Example: Synchronous request</h3>
<p>This example demonstrates how to make a simple synchronous request.</p>
<div class="note"><strong>Note:</strong> As a general rule, you should avoid using synchronous <code>XMLHttpRequests</code> because they block the application's user interface.</div>
<pre class="brush: js">var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false); 
req.send(null);
if(req.status == 200)
  dump(req.responseText);</pre>
<p>Line 1 instantiates the <code>XMLHttpRequest</code> object.  Line 2 then opens a new request, specifying that a <code>GET</code> request will be used to fetch the Mozilla.org home page, and that the operation should not be asynchronous.</p>
<p>Line 3 sends the request.  The <code>null</code> parameter indicates that no body content is needed for the <code>GET</code> request.</p>
<p>Line 4 checks the status code after the transaction is completed.  If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.</p>
<h3>Example: Non-HTTP synchronous request</h3>
<p>Despite its name, <code>XMLHttpRequest</code> can be used for non-HTTP requests.  This example shows how to use it to fetch a file from the local file system.</p>
<pre class="brush: js">var req = new XMLHttpRequest();
req.open('GET', 'file:///home/user/file.json', false); 
req.send(null);
if(req.status == 0)
  dump(req.responseText);</pre>
<p>The key thing to note here is that the result status is being compared to 0 for success instead of 200.  This is because the <code>file</code> and <code>ftp</code> schemes do not use HTTP result codes.</p>
Revert to this revision