AJAX (III)
Objeto XMLHttpRequest
Definición
Este objeto es fundamental para la programación con ajax. Podríamos decir que ajax consiste
sobre todo en aprovechar, mediante varios lenguajes de programación, todas las posibilidades que
tiene este objeto.
La wikipedia define este objeto como "una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores Web",
es decir el objeto nos permite la transferecia de datos desde la página al servidor y viceversa.
Por tanto nos sirve tanto para incorporar datos en la página que tengamos en otros archivos
del servidor, como para mandar datos de la página al servidor, y todo esto de forma asíncrona.
La diferencia entre utilizar XMLHttpRequest o simplemente utilizar PHP es que XMLHttpRequest permite
mandar los datos en segundo plano, sin tener que parar el flujo de la página mientras se envian o reciben los
datos.
XMLHttpRequest es creado por Microsoft y aparece por primera vez como un objeto ActiveX
(Microsoft.XMLHTTP), en Internet Explorer 5. posteriormente se incorpora al resto de navegadores como
XMLHttpRequest. Internet Explorer también usa esta forma a partir de la version 7.
El objeto XMLHttpRequest está incorporado de forma nativa a la mayoría de navegadores, por lo que
en javascript depende directamente del objeto window.
En la página anterior vimos un ejemplo de cómo usar este objeto para obtener información de un archivo
de texto del servidor. Sin embargo quedaron bastantes cosas por explicar. Vamos a ver a continuación las
propiedades, métodos y eventos de este objeto.
Propiedades de XMLHttpRequest
- readyState : Esta propiedad devuelve un número que indica el estado de la carga del documento.
según sea el estado de la carga nos devolverá los siguientes números: 0.- Sin inicializar, 1.- inicializado,
2.- Cabeceras recibidas, 3.- Cargando 4.- Completado.
- responseBody : Devuelve la respuesta como un array de bytes.
- responseText : Devuelve la respuesta como una cadena de texto.
- responseXML : Devuelve la respuesta como un archivo XML que puede ser examinado
mediante los métodos y propiedades del DOM.
- status : Devuelve el código de estado de la URL solicitada. Los valores más comunes son los
siguientes: 200.- Acceso correcto a la página; 404.- Solicitud incorrecta, no se puede encontrar la página.
500.- Error interno que no permite ver la página. La lista completa de valores para el código de estado
la puedes consultar en
Wikipedia--Códigos de estado HTTP.
- statusText : Al igual que el anterior devuelve el código de estado de la URL solicitada, pero no con un número
sino con una cadena de texto (en inglés), "OK", "Not Found", "Internal Server Error", etc.
métodos de XMLHttpRequest
- abort() : Detiene la petición actual.
- getAllResponseHeaders() : Devuelve una cadena de texto con todas las cabeceras de la
respuesta del servidor. Para usarlo el valor del estado de carga (readyState) debe ser 3 ó 4.
- getResponseHeader(nombreCabecera) : Devuelve en una cadena de texto la cabecera de la
respuesta del servidor indicada en el parámetro. Para usarlo el valor del estado de carga
(readyState) debe ser 3 ó 4.
- open("método","url",["sincronia","usuario","contraseña"]) : Este método es el
que indica cual y cómo es la petición que debe hacerse al servidor, para ello dispone de hasta
cinco parámetros. Sólo los dos primeros son obligatorios. Estos son:
- "método" : Es la forma en la que se transmiten los datos. Esta puede tener los valores
"GET" o "POST". El método "GET" permite al navegador guardar los datos tal como los recibe, mientras que
"POST" permite modificar los datos o descargarlos más adelante. Lo escribiremos entre comillas.
- "url" : es la ruta en la que está el archivo con el que intercambiamos datos. Debemos ponerla
entre comillas como una cadena de texto o pasarlo por una variable. El archivo de datos y la página de respuesta
deben estar dentro del mismo servidor.
- "sincronia" : Indica mediante un valor booleano si la transmisión de datos se realiza de forma
asincrona (true) o sincrona (false). Por definición en ajax debemos usar la forma asincrona (true), que es el
valor por defecto.
- "usuario" : Opcionalmente podemos poner un nombre de usuario para la autentificación.
- "contraseña" : Opcionalmente podemos poner también una contraseña para la autentificación.
- send("datos") : Envia la petición al servidor. En el parámetro enviaremos los datos al
servidor cuando usemos el metodo de transmisión "POST". El método send() debe ir después
del metodo open(). Si no se enviá ningún dato con "POST" se recomienda usar el valor null.
como parámetro. Con "GET" no se deben enviar parámetros.
- setRequestHeader( etiqueta, valor) : Añade una nueva cabecera a la página. Esta consta de
una etiqueta y un valor. La etiqueta no puede contener espacios, puntos o saltos de línea, ni ser alguna de
las palabras clave para otras etiquetas. El valor no puede contener saltos de línea. Este método sólo puede
usarse cuando el valor de readyState sea 0 ó 1.
Eventos en XMLHttpRequest
Los eventos son elementos que indican qué debe hacer la página al producirse un cambio en la
petición de XMLHttpRequest. El evento indica el cambio que se produce. Lo que debe hacer la
página se lo indicamos mediante una función que se asocia al evento.
Para asociar la función al evento podemos escribir el nombre de dicha función como
el valor del mismo, o crear una función anónima dependiente del evento. por ejemplo:
doc.onabort=funcionCancelado
donde funcionCancelado es una función que indica los cambios que se harán cuando se produzca el evento.
O podemos usar también una función anónima:
doc.onabort=function() { .. }
creamos directamente la función que indica lo que debe hacer la página al producirse el evento.
Los eventos de XMLHttpRequest son:
- onreadystatechange : Se produce cada vez que hay un cambio en el estado de carga del documento.
de ahí que se use para saber cuándo se ha cargado el documento completamente, entre otras cosas.
- onabort : se produce cuando se interrumpe la carga del documento, normalmente mediante el
método abort().
- onload : se produce cuando el documento se ha cargado completamente.
- onloadstart : se produce cuando comienza la carga del documento.
- onprogress : se produce mientras el documento se está cargando.
En la siguiente página veremos cómo crear un archivo javascript
para iniciar el objeto XMLHttpRequest
Archivo estándar