AJAX - XMLHttpRequest
Martes, 8 de Mayo de 2007XMLHttpRequest, es un API que puede invocarse desde JavaScript, y otros lenguajes de script incluidos en un navegador web, que se usa para transferir y manipular datos XML hacia y desde el navegador web, estableciéndose un canal de conexión independiente entre el lado del cliente de la página web y el servidor.
Los datos devueltos por la llamada a XMLHttpRequest serán, por lo general, obtenidos desde bases de datos en el servidor. La llamada puede devolver datos en XML o en cualquier otro formato textual como JSON o incluso texto plano.
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.
<script language="javascript" type="text/javascript">
var peticion = false;
try {
peticion = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
peticion = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
peticion = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
peticion = false;
}
}
}
if (!peticion)
alert("ERROR AL INICIALIZAR!");
</script>
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript">
var peticion = false;
try {
peticion = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
peticion = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
peticion = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
peticion = false;
}
}
}
if (!peticion)
alert("ERROR AL INICIALIZAR!");
function Cabecera() {
peticion.open("HEAD", "lanzadera.html",true);
peticion.onreadystatechange=function() {
if (peticion.readyState==4) {
alert(peticion.getAllResponseHeaders())
}
}
peticion.send(null)
}
</script>
</head>
<body>
<a href="javascript:Cabecera()">
Mostrar cabeceras </a>
</body>
</html>
Loading ...