Como ya se ha comentado en algún tutorial anterior, AJAX usa el objeto XMLHttpRequest para hacer peticiones asíncronas sin que el navegador tenga que enviar la página al servidor. El objeto se ha implementado en los navegadores más utilizados (Internet Explorer, Firefox, etc.), así que basta con crear una instancia de este objeto para poder realizar peticiones HTTP al servidor.
Estos son algunos de los métodos y propiedades que se pueden utilizar con este objeto:
MÉTODOS
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.
PROPIEDADES
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 encuentra,200 si todo ha ido bien, etc.
statusText: Mensaje que acompaña al código de estado.
Para empezar con un ejemplo, lo primero que necesitamos es crear una nueva variable y asignarle una instancia del objeto XMLHttpRequest.
Los pasos seguidos son:
1. Crear una nueva variable llamada peticion y asignarle el valor false. Usamos false para significar que el objeto XMLHttpRequest todavía no está creado.
2. Intentamos crear el objeto XMLHttpRequest.
3. Si esto falla (catch (trymicrosoft))
4. Intentamos crear un objeto compatible para los navegadores modernos de (Msxml2.XMLHTTP).
5. Si la cosa sigue fallando (catch (othermicrosoft)), intentamos crear un objeto compatible con los navegadores antiguos de Microsoft (Microsoft.XMLHTTP).
6. Si todo esto falla (catch (failed)), nos aseguramos de que la variable peticion está a false.
7. Comprobamos si la variable peticion esta a false y si es así sacamos un mensaje de alert con el problema (alert("ERROR AL INICIALIZAR!"))
Si probamos el código veremos que no pasa nada: señal de que todo ha ido bien.
Una vez que se ha creado una instancia podemos empezar a trabajar con XMLHttpRequest. Por ejemplo, vamos a realizar una función para ver el funcionamiento del método getAllResponseHeaders().
function Cabecera() {
peticion.open("HEAD", "index.php",true);
peticion.onreadystatechange=function() {
if (peticion.readyState==4) {
alert(peticion.getAllResponseHeaders())
}
}
peticion.send(null)
}
1.- Creamos una funcion cabecera en la que lo primero que hacemos es abrir la instancia peticion que previamente habíamos creado (peticion.open("HEAD", "index.php",true)).
- HEAD especifica el método HTTP usado para abrir la conexión. Puede ser GET, POST, o HEAD únicamente.
- index.php especifica la url. Se puede especificar la url de un modo relativo o absoluto pero debido a un modelo de seguridad del objeto XMLHttpRequest, éste solo puede hacer peticiones sobre el mismo dominio donde se está ejecutando.
- true determina que la operación es asíncrona (lo más habitual). Si es true asignamos un callback a la propiedad onreadystatechange para determinar cuando la operación se ha completado.
2.- Si la operación se ha completado (peticion.readyState==4), lanzamos un alert con las cabeceras (peticion.getAllResponseHeaders())
3.- No enviamos nada al servidor peticion.send(null)
Un ejemplo completo que nos mostrase las cabeceras mediante XMLHttpRequest sería:
Codigo:
Mostrar cabeceras
Salida:
Mostrar cabeceras




