Bajo el título de Dynamic HTML and XML: The XMLHttpRequest Object el sitio Apple Developer Connection publicó en febrero de este mismo año un artículo en el que introduce y muestra el uso del objeto XMLHttpRequest, el corazón de Ajax.

Como es un buen comienzo para introducirse en Ajax aquí va la traducción.

HTML y XML dinámico: El objeto XMLHttoRequest

El uso de XML y de los servicios web se está extendiendo cada vez más, por lo que probablemente hayas encontrado conveniente unir HTML directamente con XML para realizar actualizaciones sin recargar la página. Gracias al objeto XMLHttpRequest, una gran parte de los navegadores pueden recuperar y enviar datos en XML directamente, en background. Para transformar el XML recibido y renderizarlo en la página HTML se usará el Modelo de Objetos de Documento del lado del cliente (DOM) para leer el árbol de nodos del documento XML y componer la página que el usuario verá.

Historia y compatilibidad

Microsoft fue el primero en implementar el objeto XMLHttpRequest en Internet Explorer 5 como un objeto ActiveX. Posteriormente los ingenieros de Mozilla implementaron una versión nativa compatible para Mozilla 1.0 (y Netscape 7). Apple ha hecho lo mismo para Safari 1.2. [Opera ya lo soporta desde la versión 8.0]

Una funcionalidad similar está cubierta en una recomendación del W3C estándar, Document Object Model (DOM) Level 3 Load and Save Specification. Mientras el apoyo al objeto XMLHttpRequest siga creciendo llegará a ser un estándar de facto que probablemente será apoyado aún después de que la especificación del W3C comience a ser implementada en los navegadores.

Creando el objeto

La creación de una instancia del objeto XMLHttpRequest requiere que se realice diferencias dependiendo del navegador en el que el objeto es generado. Para Safari y Mozilla, una simple llamada al constructor hace todo el trabajo:

var req = new XMLHttpRequest();

En el caso de IE, hay que pasar el nombre del objeto al constructor de ActiveX.

var req = new ActiveXObject("Microsoft.XMLHTTP");

La referencia devuelta por ambos constructores es a un objeto abstracto que trabaja completamente fuera de la vista del usuario. Sus métodos controlan todas las operaciones, mientras sus propiedades guardan, entre otras cosas, datos devueltos por el servidor.

Métodos

El objeto XMLhttprequest comparte en todas las plataformas en las que trabaja una concisa, pero poderosa, lista de métodos y propiedades. La tabla 1 muestra los métodos soportados por Safari 1.2, Mozilla, y Windows IE 5 o superior.

Tabla 1. Métodos comunes del objeto XMLHttpRequest
Método >> Descripción
abort() >> Detiene la petición actual
getAllResponseHeaders() >> Devuelve todas las cabeceras de la respuesta como pares de etiqueta y valores en una cadena
getResponseHeader("headerLabel") >> Devuelve el valor de una cabecera determinada
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) >> Asigna la URL de destino, el método y otros parámetros opcionales de una petición pendiente
send(content) >> Envía la petición, opcionalmente se puede enviar una cadena de texto o un objeto DOM
setRequestHeader("label", "value") >> Asigna un valor al par label/value para la cabecera enviada.

De los métodos mostrados en la tabla 1, open() y send() son los que más se usarán. El primero, send(), establece el escenario para una petición. Los dos parámetros requeridos son el método HTTP que se utilizará en la petición y la URL para la conexión. Para el parámetro method, se usará GET en las peticiones de recuperación de datos; y POST sobre las operaciones que envían datos al servidor, sobre todo si la longitud de los datos salientes es potencialmente mayor que 512 bytes. La URL puede ser completa o relativa (ver cuestiones sobre seguridad más abajo).

Un tercer parámetro, opcional, es un valor Booleano que controla si la transacción debería ser manejada asincrónicamente. El valor por defecto (true) indica que deberá ser así, lo que significa que el procesamiento del script será realizado inmediatamente después de invocar al método send(), sin esperar una respuesta. Si se pone el valor a false, el script esperará a que la petición sea enviada y a que reciba una respuesta del servidor. Mientras esperar una respuesta antes de continuar con el procesamiento podría parecer una buena idea, se corre el riesgo de que el script se cuelgue si existe un problema con la red o el servidor. Es más seguro enviar los datos asincrónicamente y diseñar la aplicación alrededor del evento onreadystatechange.

La siguiente función genérica incluye la creación del objeto teniendo en cuenta los diferentes navegadores, la asignación del manejador del evento y el envío de una petición GET. El argumento de la función es una cadena que contiene la URL a la que se enviará la petición. La función asume que una variable global, req, guardará la referencia del objeto XMLHttpRequest. El uso de una variable global permite que la respuesta sea manejada libremente por otras funciones. También se asume la existencia de una función processReqChange() que manejará los cambios de estado del objeto.

Nota: Es importante que los datos devueltos por el servidor sean enviados con la cabecera Content-Type indicando text/xml. Los datos que son enviados como text/plain o text/html son también aceptados, sin embargo sólo estarán disponibles a través de la propiedad responseText.

Propiedades

Una vez que la petición ha sido enviada, los scripts pueden acceder a varias propiedades del objeto. En la tabla 2 se muestran aquellas comunes en todas las implementaciones. Son de sólo lectura.

Tabla 2. Propiedades comunes del objeto XMLHttpRequest

Propiedad >> Descripción
onreadystatechange >> El manejador del evento llamado en cada cambio de estado del objeto
readyState >> Entero que indica el estado del objeto:
0 = sin inicializar
1 = cargando
2 = fin de la carga
3 = actualizando la información recibida
4 = Operación completada
responseText >> Cadena de texto con los datos devueltos por el servidor
responseXML >> Objeto DOM devuelto por el servidor
status >> Código numérico devuelto por el servidor, ejemplos: 404 si la página no se encuenta, "Not Found"; 200 si todo ha ido bien, "OK".
statusText >> Mensaje que acompaña al código de estado.

La propiedad readyState se usará dentro de la función que maneje los eventos tras un cambio de estado del objeto. Mientras su creación y procesamiento el objeto puede sufrir cambios de estado intermedios, por lo que las operaciones no habrán finalizado hasta que readyState haya tomado el valor 4.

Aún así es necesario confirmar que la transacción se ha completado satisfactoriamente antes de trabajar con los resultados, leyendo la propiedad status o statusText para determinar el éxito o fracaso de la operación. Los valores de éxito son 200 y "OK" respectivamente.

Para acceder a los datos devueltos por el servidor se emplean las propiedades responseText o responseXML. La primera proporciona una cadena de texto con los datos, mientras, la segunda, proporciona un documento XML. Este documento puede ser examinado y analizado usando los métodos y propiedades del Modelo de Objetos del Documento (DOM) del W3C.

El listado siguiente muestra una función de tratante de acontecimiento esquelética onreadystatechange que que permite el tratamiento de la respuesta contente sólo si todas las condiciones tienen razón.

El siguiente texto muestra el esqueleto de una función que maneja el evento onreadystatechange y permite procesar la respuesta sólo si la petición ha sido exitosa.

El código mostrado es sólo un ejemplo, se puede añadir a la función loadXMLDoc() un fragmento que guarde el momento en el que se invocó al método send(), y luego modificar la función processReqChange para calcular el tiempo transcurrido con cada disparo del evento. Si el tiempo excede un límite aceptable, entonces se invocaría al método req.abort() para cancelar la operación de envío, y alertar al usuario sobre el error o fallo.

Cuestiones sobre seguridad

Cuando el objeto XMLHttpRequest funciona en un navegador, se adopta la misma política de seguridad típica de JavaScript.
Mozilla requiere envolver el objeto dentro de los privilegios de seguridad UniversalBrowserRead. IE, por otra parte, simplemente muestra una alarma al usuario de que una actividad potencialmente insegura puede continuar y ofrece una posibilidad para cancelar.
El dominio de la URL de destino de la petición debe ser el mismo que el de la página que se visita. Esto quiere decir, que los scripts no pueden traer datos de otras fuentes. Todo debe venir del mismo dominio. Bajo estas circunstancias, no hay que preocuparse de las alarmas de seguridad.
Ejemplo

Su última actualización fue el 24-06-2005