path: root/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html

---
title: Using XMLHttpRequest
slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest
translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
---
<p>{{APIRef("XMLHttpRequest")}}</p>

<p><span class="seoSummary">En esta guía le echaremos un vistazo a cómo usar {{domxref("XMLHttpRequest")}} para enviar solicitudes <a href="/en-US/docs/Web/HTTP">HTTP</a> con el objetivo de intercambiar datos entre el sitio web y el servidor.</span> Se incluyen ejemplos, tanto para los casos de uso comunes de <code>XMLHttpRequest</code>, como para los más inusuales.</p>

<p>Para enviar una solicitud HTTP, cree un objeto <code>XMLHttpRequest</code>, abra una URL y envíe la solicitud. Una vez que la transacción haya sido completada, el objeto contendrá información útil tal como el cuerpo de la respuesta y el estado <a href="/en-US/docs/Web/HTTP/Status">HTTP</a> del resultado.</p>

<pre class="brush: js">function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();</pre>

<h2 id="Solicitudes_Síncronas_y_Asíncronas">Solicitudes Síncronas y Asíncronas</h2>

<p><code>XMLHttpRequest</code> soporta tanto comunicaciones síncronas como asíncronas.</p>

<div class="note"><strong>Nota:</strong> No deberias usar <code>XMLHttpRequests</code> síncronas porque, dada la naturaleza inherentemente asíncrona del intercambio de datos en las redes, hay multiples formas en que la memoria y eventos se puedan perder usando solicitudes síncronas.</div>

<p>En versiones de Firefox anteriores a Firefox 3, (solicitudes) <code>XMLHttpRequest</code> síncronas bloqueaban la interfaz de usuario.  Con tal de permitirle al usuario terminar solicitudes congeladas, Firefox 3 ya no lo hace.</p>

<h3 id="Ejemplo_Solicitud_síncrona">Ejemplo: Solicitud síncrona</h3>

<p>Este ejemplo demuestra como hacer una solicitud síncrona.</p>

<pre class="script deki-transform">var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false);
req.send(null);
if (req.status == 200)
  dump(req.responseText);</pre>

<p>En la línea 1 se instancia un objeto <code>XMLHttpRequest</code>.  Después en la línea 2 se abre una nueva solicitud, especificando que una solicitud <code>GET</code> se utilizará para extraer la pagina de inicio de Mozilla.org, y que la operación no debe ser asíncrona.</p>

<p>En la línea 3 se envía la solicitud.  El parámetro <code>null</code> indica que la solicitud <code>GET</code> no necesita contenido en el cuerpo.</p>

<p>En la línea 4 se verifica el código de estatus después de que la transacción se completa.  Si el resultado es 200 -- El código HTTP para resultado "OK"-- el contenido de texto del documento se escribe en la consola.</p>

<h3 id="Ejemplo_Solicitudes_síncronas_no-HTTP">Ejemplo: Solicitudes síncronas no-HTTP</h3>

<p>A pesar de su nombre, <code>XMLHttpRequest</code> se puede usar para hacer solicitudes que no sean de HTTP.  Este ejemplo muestra como usarlo para extraer un archivo del sistemas de archivos local.</p>

<pre class="script">var req = new XMLHttpRequest();
req.open('GET', '<a class="linkification-ext" title="Linkification: file:///home/user/file.json">file:///home/user/file.json</a>', false);
req.send(null);
if(req.status == 0)
  dump(req.responseText);</pre>

<p>La clave aqui es notar que el estado del resultado se compara con 0 en lugar de 200.  Esto es porque los esquemas <code>file</code> y <code>ftp</code> no usan los codigos de resultado de HTTP.</p>

<h3 id="Ejemplo_Solicitudes_asíncronas">Ejemplo: Solicitudes asíncronas</h3>

<p>Si usas <code>XMLHttpRequest</code> desde una extensión, deberias usarla asíncronamente.  En este caso, recibiras una llamada de regreso cuando se hallan recibido los datos, lo cual permite al navegador continuar trabajando con normalidad mientras se maneja tu solicitud.</p>

<pre class="script">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>

<p>La linea 2 especifica <code>true</code> en su tercer parametro indicando que la solicitud debe manejarse asíncronamente.</p>

<p>Line 3 crea un objeto función para manejar eventos y lo asigna al atributo de la solicitud <code>onreadystatechange</code>.  Este manejador observa el <code>readyState</code> de la solicitud verificando si la transacción se ha completado en la linea 4, si así es, y el estatus HTTP es 200, imprime el contenido recibido.  Si ocurrió un error, se muestra un mensaje de error.</p>

<p>La linea 11 de hecho inicia la solicitud.  La función onreadystatechange es llamada siempre que el estado de una solicitud cambia.</p>

<h2 id="Analizando_y_Manipulando_el_Texto_de_Respuesta_HTML">Analizando y Manipulando el Texto de Respuesta HTML</h2>

<p>Si usas <code>XMLHttpRequest para obtener el contenido de una página</code> HTML remota, el <code>responseText </code>(texto de la respuesta) sera una cadena que contenga una "sopa" de etiquetas HTML, lo que puede ser dificil de analizar y manipular. Existen tres maneras principales de analizar estas cadenas HTML</p>

<ol>
 <li><a href="/en/Code_snippets/HTML_to_DOM#Safely_parsing_simple_HTML.c2.a0to_DOM" title="https://developer.mozilla.org/en/Code_snippets/HTML_to_DOM#Safely_parsing_simple_HTML.c2.a0to_DOM">Analizar con nsIScriptableUnescapeHTML </a>repidamente convertira la cadena HTML en DOM, al mismo tiempo que tira javascript y otros elementos avanzados, incluyendo la etiqueta <code>&lt;head&gt;</code> de la página.</li>
 <li><a href="/es/Referencia_de_JavaScript_1.5/Objetos_globales/RegExp" title="es/Referencia de JavaScript 1.5/Objetos globales/RegExp">RegExp </a>se puede usar si de antemano conoces el HTML que vendra en el <code>responseText</code>. Quizas quieras remover los saltos de linea, si usas RegExp para escanear considerandolos. Sin embargo, este metodo es un "ultimo recurso" ya que si el HTML cambia ligeramente, posiblemente fallara.</li>
 <li><a href="/en/Code_snippets/HTML_to_DOM#Using_a_hidden_iframe_element_to_parse_HTML_to_a_window%27s_DOM" title="https://developer.mozilla.org/en/Code_snippets/HTML_to_DOM#Using_a_hidden_iframe_element_to_parse_HTML_to_a_window's_DOM">Usar un hidden chrome o un content-level iframe</a> para cargar toda la pagina también se puede hacer para manipularla luego como DOM, sin embargo existen <a href="/En/Displaying_web_content_in_an_extension_without_security_issues" title="En/Displaying_web_content_in_an_extension_without_security_issues">riesgos de seguridad al dar a código remoto este nivel de acceso privilegiado</a>, que puede causar <a class="link-https" href="https://addons.mozilla.org/en-US/developers/docs/policies/reviews" title="https://addons.mozilla.org/en-US/developers/docs/policies/reviews">problemas </a>en la revisión de tu addon. Por ejemplo, si una pagina ejecuta el comando común "<code>document.location = redirecttothispage.html</code>" para cargar, esto se interpretara como cambiar la locación del navegador (<code>document.location</code> en una extensión) en contraposición a la locación de una página web (<code>content.document.location</code> en una extensión), y en consecuecia destruir todos los componentes del navegador. Alternativamente, y de algun modo mas seguro, una cadena <code>responseText adquirida mediante</code> <code>XMLHttpRequest se puede analizar con</code> RegExp para remover problemas de javascript, luego cargada en un iframe oculto previamente  establecido:</li>
</ol>

<pre>document.getElementById('hiddenXULiframe').contentWindow.document.body.innerHTML = req.responseText
</pre>

<h2 id="Using_FormData_objects">Using FormData objects</h2>

<p>{{ gecko_minversion_header("2") }}</p>

<p>The <a href="/en/XMLHttpRequest/FormData" title="en/XMLHttpRequest/FormData"><code>FormData</code></a> object lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. It's primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data".</p>

<h3 id="Creating_a_FormData_object_from_scratch">Creating a FormData object from scratch</h3>

<p>You can build a <code>FormData</code> object yourself, instantiating it then appending fields to it by calling its <a href="/en/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>append()</code></a> method, like this:</p>

<pre class="deki-transform">var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456);
formData.append("afile", fileInputElement.files[0]);

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://foo.com/submitform.php");
xhr.send(formData);
</pre>

<p>This example builds a <code>FormData</code> object containing values for fields named "username" and "accountnum", then uses the <code>XMLHttpRequest</code> method <a href="/en/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> to send the form's data.</p>

<h3 id="Retrieving_a_FormData_object_from_an_HTML_form">Retrieving a FormData object from an HTML form</h3>

<p>To construct a <code>FormData</code> object that contains the data from an existing {{ HTMLElement("form") }}, specify that form element when creating the <code>FormData</code> object:</p>

<pre>newFormData = new FormData(someFormElement);
</pre>

<p>For example:</p>

<pre class="deki-transform">var formElement = document.getElementById("myFormElement");
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitform.php");
xhr.send(new FormData(formElement));
</pre>

<p>You can also add data to the <code>FormData</code> object between retrieving it from a form and sending it, like this:</p>

<pre class="deki-transform">var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);
xhr.send(formData);
</pre>

<p>This lets you augment the form's data before sending it along, to include additional information that's not necessarily user editable on the form.</p>

<h3 id="Sending_files_using_a_FormData_object">Sending files using a FormData object</h3>

<p>You can also send files using <code>FormData</code>. Simply include an {{ HTMLElement("input") }} element of type "file":</p>

<pre class="deki-transform">&lt;form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo"&gt;
  &lt;label&gt;Your email address:&lt;/label&gt;
  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64"&gt;&lt;br /&gt;
  &lt;label&gt;Custom file ID:&lt;/label&gt;
  &lt;input type="text" name="fileid" size="12" maxlength="32"&gt;&lt;br /&gt;
  &lt;label&gt;File to stash:&lt;/label&gt;
  &lt;input type="file" name="file" required&gt;
&lt;/form&gt;
&lt;div id="output"&gt;&lt;/div&gt;
&lt;a href="javascript:sendForm()"&gt;Stash the file!&lt;/a&gt;
</pre>

<p>Then you can send it using code like the following:</p>

<pre class="deki-transform">function sendForm() {
  var output = document.getElementById("output");
  var data = new FormData(document.getElementById("fileinfo"));

  data.append("CustomField", "This is some extra data");

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "stash.pl", false)
  xhr.send(data);
  if (xhr.status == 200) {
    output.innerHTML += "Uploaded!&lt;br /&gt;";
  } else {
    output.innerHTML += "Error " + xhr.status + " occurred uploading your file.&lt;br /&gt;";
  }
}
</pre>

<p>Note that this example is directing the output to a Perl CGI script running on the server, and handles HTTP errors, although not prettily.</p>

<h2 id="Handling_binary_data">Handling binary data</h2>

<p>Although <code>XMLHttpRequest</code> is most commonly used to send and receive textual data, it can be used to send and receive binary content.</p>

<h3 id="Receiving_binary_data">Receiving binary data</h3>

<p>The <code>load_binary_resource()</code> function shown below loads binary data from the specified URL, returning it to the caller.</p>

<pre class="script">function load_binary_resource(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url, false);
  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType('text/plain; charset=x-user-defined');
  req.send(null);
  if (req.status != 200) return '';
  return req.responseText;
}
</pre>

<p>The magic happens in line 5, which overrides the MIME type, forcing Firefox to treat it as plain text, using a user-defined character set.  This tells Firefox not to parse it, and to let the bytes pass through unprocessed.</p>

<pre class="script">var filestream = load_binary_resource(url);
var abyte = filestream.charCodeAt(x) &amp; 0xff; // throw away high-order byte (f7)</pre>

<p>The example above fetches the byte at offset <code>x</code> within the loaded binary data.  The valid range for <code>x</code> is from 0 to <code>filestream.length-1</code>.</p>

<p>See <a class="external" href="http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html">downloading binary streams with XMLHttpRequest</a> for a detailed explanation. See also <a href="/en/Code_snippets/Downloading_Files" title="en/Code_snippets/Downloading_Files">downloading files</a>.</p>

<h3 id="Receiving_binary_data_using_JavaScript_typed_arrays">Receiving binary data using JavaScript typed arrays</h3>

<p>{{ gecko_minversion_header("2.0") }}</p>

<p>Gecko 2.0 {{ geckoRelease("2.0") }} adds a Gecko-specific <code>mozResponseArrayBuffer</code> property to the XMLHttpRequest object, which contains a <a href="/en/JavaScript_typed_arrays" title="en/JavaScript typed arrays">JavaScript typed array</a> representing the raw binary contents of the response from the server. This lets you read the binary data without taking any special steps.</p>

<pre class="deki-transform">var xhr = new XMLHttpRequest();
xhr.open("GET", "binary_file", false);
xhr.send(null);

buffer = xhr.mozResponseArrayBuffer;
if (buffer) {
  var byteArray = new UInt8Array(buffer);
  for (var i=0; i&lt;byteArray.byteLength; i++) {
    // do something with each byte in the array
  }
}
</pre>

<p>This example reads a binary file and interprets it as 8-bit unsigned integers.</p>

<h3 id="Sending_binary_data">Sending binary data</h3>

<p>This example transmits binary content asynchronously, using the <code>POST</code> method.</p>

<pre class="script">var req = new XMLHttpRequest();
req.open("POST", url, true);
// set headers and mime-type appropriately
req.setRequestHeader("Content-Length", 741);
req.sendAsBinary(aBody);</pre>

<p>Line 4 sets the Content-Length header to 741, indicating that the data is 741 bytes long.  Obviously you need to change this value based on the actual size of the data being sent.</p>

<p>Line 5 uses the <code>sendAsBinary()</code> method to initiate the request.</p>

<p>You can also send binary content by passing an instance of the {{ interface("nsIFileInputStream") }} to <a class="internal" href="/en/XMLHttpRequest#send()" title="/En/XMLHttpRequest#send()"><code>send()</code></a>.  In that case, you don't have to set the Content-Length header yourself, as the information is fetched from the stream automatically:</p>

<pre class="script">// Make a stream from a file.
var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                       .createInstance(Components.interfaces.nsIFileInputStream);
stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance

// Try to determine the MIME type of the file
var mimeType = "text/plain";
try {
  var mimeService = Components.classes["@mozilla.org/mime;1"]
          .getService(Components.interfaces.nsIMIMEService);
  mimeType = mimeService.getTypeFromFile(file); // file is an nsIFile instance
}
catch(e) { /* eat it; just use text/plain */ }

// Send
var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
req.open('PUT', url, false); /* synchronous! */
req.setRequestHeader('Content-Type', mimeType);
req.send(stream);
</pre>

<h2 id="Monitoring_progress">Monitoring progress</h2>

<p><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>

<h3 id="In_Firefox_3.5_and_later">In Firefox 3.5 and later</h3>

<p>Firefox 3.5 adds support for DOM progress event monitoring of <code>XMLHttpRequest</code> transfers; this follows the Web API <a class="external" href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">specification for progress events</a>.</p>

<pre class="script">var req = new XMLHttpRequest();

req.addEventListener("progress", updateProgress, false);
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);

req.open();

...

// progress on transfers from the server to the client (downloads)
function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

function transferComplete(evt) {
  alert("The transfer is complete.");
}

function transferFailed(evt) {
  alert("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  alert("The transfer has been canceled by the user.");
}
</pre>

<p>Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using <code>XMLHttpRequest</code>.  See {{ interface("nsIDOMProgressEvent") }} and {{ interface("nsIXMLHttpRequestEventTarget") }} for details on these events.</p>

<div class="note">Note: You need to add the event listeners before calling <code>open()</code> on the request.  Otherwise the progress events will not fire.</div>

<p>The progress event handler, specified by the <code>updateProgress()</code> function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's <code>total</code> and <code>loaded</code> fields.  However, if the <code>lengthComputable</code> field is false, the total length is not known and will be zero.</p>

<p>Progress events exist for both download and upload transfers. The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</p>

<pre class="script">var req = new XMLHttpRequest();

req.upload.addEventListener("progress", updateProgress, false);
req.upload.addEventListener("load", transferComplete, false);
req.upload.addEventListener("error", transferFailed, false);
req.upload.addEventListener("abort", transferCanceled, false);

req.open();</pre>

<div class="note"><strong>Note:</strong> Progress events are not available for the <code>file:</code> protocol.</div>

<h3 id="In_Firefox_3_and_earlier">In Firefox 3 and earlier</h3>

<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 class="script">function onProgress(e) {
  var percentComplete = (e.position / e.totalSize)*100;
  // ...
}

function onError(e) {
  alert("Error " + e.target.status + " occurred while receiving the document.");
}

function onLoad(e) {
  // ...
}
// ...
var req = new XMLHttpRequest();
req.onprogress = onProgress; // or req.addEventListener("progress", onProgress, false);
req.open("GET", url, true);
req.onload = onLoad; // or req.addEventListener("load", onLoad, false);
req.onerror = onError; // or req.addEventListener("error", onError, false);
req.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>

<div class="note"><strong>Note:</strong> <a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a> properly ensures that the values of the <code>target</code>, <code>currentTarget</code>, and <code>this</code> fields of the event object are set to reference the correct objects when calling event handlers for XML documents represented by <code>XMLDocument</code>. See {{ Bug(198595) }} for details.</div>

<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2>

<div class="geckoVersionNote">
<p>Este artículo cubre características introducidas en Firefox 3.5.</p>
</div>

<p>Firefox 3.5 supports cross-site requests by implementing the web applications working group's <a class="internal" href="/En/HTTP_access_control" title="en/HTTP access control">Access Control for Cross-Site Requests</a> standard.  As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work.  Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p>

<h2 id="Bypassing_the_cache">Bypassing the cache</h2>

<p>Normally, <code>XMLHttpRequest</code> tries to retrieve content from the cache, if it's available.  To bypass this, do the following:</p>

<pre class="script">var req = new XMLHttpRequest();
req.open('GET', url, false);
<strong>req.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;</strong>
req.send(null);</pre>

<div class="note"><strong>Note:</strong> This approach will only work in Gecko-based software, as the <code>channel</code> attribute is Gecko-specific.</div>

<p>An alternate, cross-browser compatible approach is to append a timestamp to the URL, being sure to include a "?" or "&amp;" as appropriate.  For example:</p>

<pre>http://foo.com/bar.html</pre>

<p>becomes</p>

<pre>http://foo.com/bar.html?12345</pre>

<p>and</p>

<pre>http://foo.com/bar.html?foobar=baz</pre>

<p>becomes</p>

<pre>http://foo.com/bar.html?foobar=baz&amp;12345</pre>

<p>Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p>

<p>You can automatically adjust URLs using the following code:</p>

<pre class="script">var req = new XMLHttpRequest();
req.open("GET", url += (url.match(/\?/) == null ? "?" : "&amp;") + (new Date()).getTime(), false);
req.send(null); </pre>

<h2 id="Security">Security</h2>

<p>{{ fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy..XMLHttpRequest.open</code> to <code>allAccess</code> to give specific sites cross-site access.  This is no longer supported.") }}</p>

<h2 id="Downloading_JSON_and_JavaScript_from_extensions">Downloading JSON and JavaScript from extensions</h2>

<p>For security reasons, extensions should never use <code><a href="/en/JavaScript/Reference/Global_Objects/eval" title="en/Core_JavaScript_1.5_Reference/Global_Functions/eval">eval()</a></code> to parse JSON or JavaScript code downloaded from the web.  See <a href="/en/Downloading_JSON_and_JavaScript_in_extensions" title="en/Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a> for details.</p>

<h2 id="Using_XMLHttpRequest_from_JavaScript_modules_XPCOM_components">Using XMLHttpRequest from JavaScript modules / XPCOM components</h2>

<p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> constructor. The constructor is not defined inside components and the code results in an error. You'll need to create and use it using a different syntax.</p>

<p>Instead of this:</p>

<pre class="script">var req = new XMLHttpRequest();
req.onprogress = onProgress;
req.onload = onLoad;
req.onerror = onError;
req.open("GET", url, true);
req.send(null);
</pre>

<p>Do this:</p>

<pre class="script">var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
req.onprogress = onProgress;
req.onload = onLoad;
req.onerror = onError;
req.open("GET", url, true);
req.send(null);
</pre>

<p>For C++ code you would need to <code>QueryInterface</code> the component to an <code>nsIEventTarget</code> in order to add event listeners, but chances are in C++ using a channel directly would be better.</p>

<h2 id="See_also">See also</h2>

<ol>
 <li><a href="/en/AJAX/Getting_Started" title="en/AJAX/Getting_Started">MDC AJAX introduction</a></li>
 <li><a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">HTTP access control</a></li>
 <li><a class="internal" href="/En/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="En/How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li>
 <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://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
 <li><a class="external" href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li>
 <li><a class="external" href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
 <li><a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Working Draft</a></li>
 <li><a class="external" href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li>
 <li><a class="external" href="http://www.bluishcoder.co.nz/2009/06/05/reading-ogg-files-with-javascript.html" title="http://www.bluishcoder.co.nz/2009/06/05/reading-ogg-files-with-javascript.html">Reading Ogg files with JavaScript (Chris Double)</a></li>
</ol>