<$BlogRSDUrl$>

24 febrero 2006

Tutorial AJAX - Lección 3 - El Objeto XMLHttpRequest 

Ya hemos visto cosas que se pueden hacer con JavaScript, CSS y DOM (sólo unas pocas) pero aún no hemos visto nada de AJAX.
Recordemos el proposito de AJAX: Obtener datos (XML) desde el servidor sin tener que recargar toda la página (Asíncrono mediante JavaScript). Hoy vamos a aprender cómo hacerlo.

Antes de nada os pido una cosa: no os asustéis. El código va a ser un poco espeso, quizá, pero es el código. En próximas lecciones veremos como usar alguna librería para hacernos la vida mucho, mucho mas fácil.

También deciros que debido a las restricciones de blogger los scrits los he alojado en el nuevo hosting de google, así que os abrire unas ventanas nuevas en los ejemplo. Permitidlas o mejor, usad firefox (teneis el link de descarga en la columna de la izquierda) y abridlos en una pestaña nuevo con el botón central del ratón.

Entremos en harina:

Primero vamos a definir el comportamiento que esperamos. Va a ser deliberadamente simple para que se capte la idea.
vamos a tener una página con dos elementos: un botón y una capa con dimensiones establecidas y con borde, para que se vea quedará algo como ésto:


Lo que vamos a intentar es que nos salga en esa capa la página de google (un cachito).
Veamos el código:
<input onclick="leccion3_get_google()" value="Botón" type="button">
<div id="leccion3_capa1" style="width:300px;height:150px;border:black 1px solid;"></div>

Todo el meollo de la cuestión va a ir en la función leccion3_get_google() que irá definida en un fichero externo o en la cabecera del documento.
Os pego todo el código que está muy bien comentado:
// Aquí vamos a guardar nuestro objeto XMLHttpRequest. Lo declaramos global porque lo vamos a usar en más de una función como veréis.
var xmlhttp;

function leccion3_get_google()
{
// Hay que decir que el tratamiento del objeto XMLHttpRequest es distinto según que navegador usemos
// Por ello, primero lo intentamos crear para navegadors M$ y luego si no se ha creado lo crearemos para los demas navegadores
try {

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (E) {

xmlhttp = false;

}

}
// Ahora compruebo si se ha creado para M$, si no lo creo
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {

try {

xmlhttp = new XMLHttpRequest();

} catch (e) {

xmlhttp = false;

}

}
// Creo que está bastante claro, lo único que puede confundiros es la gestión de las excepciones pero tambien es bastante clara. Si alguno no entiende que levante la mano ;)
// Ahora va la madre del cordero:

xmlhttp.open("GET", "http://www.google.com" , true);

// Lo explico un poco: La función open es la que abre la comunicación con el servidor.
// Tiene los siguientes parámetros:
// Tipo: Puede ser GET,POST o HEAD. Los dos primeros son obvios, el tercero nos devolverá solo la cabecera de un documento y nos puede servir, por ejemplo, para saber si se ha modificado desde una fecha
// url: Está bastante claro.
// asincrona: Es un valor boleano que indica si la ejecución del script se detiene hasta que lleguen datos o continua sin esperar
//
// Hemos hecho el envío de forma asincrona (no nos paramos a esperar respuesta) y ¿ahora qué?
// Ahora signamos una función para cuando recivamos datos:

xmlhttp.onreadystatechange = hayrespuesta;

// Y enviamos la petición. Como no queremos enviar datos (de momento) enviamos null. De lo contrario podrían ir incluidos datos de un formulario.

xmlhttp.send(null);
}

// Y ahora implementamos la función que se ejecuta cuando recivamos datos:

function hayrespuesta()
{
// Sabemos que algo ha cambiado en el objeto xmlhttprequest (onreadystatechange), pero nos tenemos que asegurar de que la petición ha tenido éxito (código 4)
if (xmlhttp.readyState == 4) {
// obtenemos el resultado del servidor
resultado = xmlhttp.responseText;
// y lo ponemos en la capa
document.getElementById("leccion3_capa1").innerHTML = resultado;
} else {
// por si quisiesemos ejecutar algo mientras se está cargando el resultado
}
}

No se ve muy bien, así que mejor veis el ejemplo y miráis el código fuente que está comentado.

0 Comentarios
Enlaces a este envio:

Links to this post:

Crear un enlace

Comentarios: Publicar un comentario
Nedstat Basic - Estadisticas gratis