Objeto XMLHttpRequest

El objeto XMLHttpRequest proporciona métodos para comunicarse con el servidor después de que se carga la página.

¿Qué es el objeto XMLHttpRequest?

El objeto XMLHttpRequest esEl sueño de los desarrolladores, porque puedes:

  • Actualizar la página sin recargarla
  • Solicitar datos del servidor después de que se haya cargado la página
  • Recibir datos del servidor después de que se haya cargado la página
  • Enviar datos al servidor en segundo plano

Todos los navegadores modernos admiten el objeto XMLHttpRequest.

Ejemplo:Al ingresar texto, se realiza comunicación XML HTTP con el servidor.

Crear objeto XMLHttpRequest

Con una sola línea de código JavaScript, podemos crear un objeto XMLHttpRequest.

En todos los navegadores modernos (incluidos IE 7):

xmlhttp=new XMLHttpRequest()

En Internet Explorer 5 y 6:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Ejemplo

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// código para todos los nuevos navegadores}
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// código para IE5 y IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Tu navegador no admite XMLHTTP.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "cargado"}
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...nuestro código aquí...
    }
  else
    {
    alert("Problema al recuperar datos XML");
    }
  }
}
</script>

TIY

Comentarios:onreadystatechange es un gestor de eventos. Su valor (state_Change) es el nombre de una función que se desencadena cuando el estado del objeto XMLHttpRequest cambia. El estado varía de 0 (inicializado) a 4 (completo). Solo cuando el estado es 4, ejecutamos el código.

¿Por qué usar Async=true ?

Nuestro ejemplo utiliza "true" como tercer parámetro en open().

Este parámetro especifica si la solicitud se procesa de manera asincrónica.

True indica que el script continuará ejecutándose después del método send(), sin esperar una respuesta del servidor.

El evento onreadystatechange complicó el código. Sin embargo, es la forma más segura de evitar que el código se detenga sin obtener una respuesta del servidor.

Al establecer este parámetro en "false", se puede omitir el código adicional de onreadystatechange. Si no importa si se ejecuta el resto del código en caso de que la solicitud falle, se puede usar este parámetro.

TIY

Más ejemplos

Cargar un archivo textfile en un elemento div utilizando XML HTTP

Realizar una solicitud HEAD utilizando XML HTTP

Realizar una solicitud HEAD específica utilizando XML HTTP

Listar datos de un archivo XML utilizando XML HTTP

XML / ASP

También puede abrir el documento XML y enviarlo a una página ASP en el servidor, analizar esta solicitud y luego devolver los resultados.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  //{ código para IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  //{ código para IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Tu navegador no admite XMLHTTP.");
  }
</script>
</body>
</html>

Página ASP, escrita en VBScript:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for each x in xmldoc.documentElement.childNodes
   if x.NodeName = "to" then name=x.text
next
response.write(name)
%>

Devuelve los resultados al cliente utilizando la propiedad response.write.

TIY

¿Es el objeto XMLHttpRequest una norma del W3C?

Ninguna norma recomendada por el W3C establece el objeto XMLHttpRequest.

Sin embargo, la especificación "Cargar y Guardar" del nivel 3 del W3C DOM incluye algunas funcionalidades similares, pero aún no se han implementado en ningún navegador.

Ver

Manual de referencia del DOM XML - Objeto XMLHttpRequest