Siguiendo con el post anterior sobre AJAX y una vez estudiado el objeto XMLHttpRequest vamos a definir algunas funciones que nos serán útiles para realizar cargas de datos en cualquier navegador.
Lo primero que necesitaremos siempre es obteneruna referencia a un objeto XMLHttpRequest. No se obtiene de la misma manera en Internet Explorer que en los demás navegadores, por lo que debemos tener en cuenta esas diferencias. En IE se obtiene a partir de un objeto ActiveX. En Firefox, Opera, Safari y compañía es una clase integrada del modelo de objetos del navegador. Sabiendo esto es fácil hacer una función genérica para obtener una referencia a un objeto XMLHttpRequest que funcione en todos los navegadores:
function getHttpRequest()
{
var httpReq;
//Si es Mozilla, Opera, etc…
if (window.XMLHttpRequest)
{
httpReq = new XMLHttpRequest();
}
else //Internet Explorer lo expone como control Active X
{
httpReq = new ActiveXObject(«Microsoft.XMLHTTP»);
}
}
Ahora que tenemos el objeto tenemos que usarlo para obtener una URL. Debemos usar sus métodos y propiedades (vistos en el anterior post) para conseguirlo:
http = getHttpRequest()
http.onreadystatechange = finCarga;
http.open(«GET», «http://www.miserv.com/misdatos.aspx», true)
http.send(null);
Es decir, obtenemos una referencia al objeto como hemos visto, establecemos la función a llamar cuando cambie el estado de la petición que vamos a hacer (más sobre esto luego). Indicamos que vamos a llamar (por GET) a una URL (segundo parámetro) de modo asíncrono (true en el tercer parámetro). Esto hará que se devuelva el control inmediatamente tras hacer la llamada.
Por fin debemos hacer la llamada (open no la hace sólo la prepara), usando para ello el método send. Se le pasa un nulo porque no enviamos ninguna información extra (es una petición GET).
Bien, una vez hecha la llamada, sólo nos queda definir la función que actuará cuando tengamos los datos (finCarga en nuestro ejemplo). Veámosla:
function finCarga()
{
if (http.readyState == 4) //4: completado
{
if (http.status == 200) //200: OK
{
res = http.responseXML;
Procesarespuesta();
}
else //Se produjo un error
{
alert(«No se pudo recuperar la información: » + http.statusText);
}
}
}
Como vemos se comprueba que el estado es el definitivo (terminado), que se ha obtenido correctamente la página (código de estado 200), y se guarda en una variable (global) el XML obtenido (podría haber sido el texto obtenido con responseText). La función ProcesaRespuesta() se encargará de, a partir del XML realizar el trabajo que corresponda.
Para trabajar con el XML usaremos el DOM. No voy a entrar en detalle en este tema ya que cualquiera que haya trabajado con HTML dinámico sabe usarlo más o menos. De todos modos puedes consultar la referencia del DOM para JavaScript que tiene el W3C o si lo prefieres la de Firefox/Mozilla. Generalmente nos va a ser suficiente con usar dos o tres métodos del DOM. Los más importantes sin duda son getElementsByTagName y getElementByID que sirven para localizar elementos en el XML del mismo modo que se hace para hacerlo en HTML común.
EJEMPLO PRÁCTICO:
Para rematar este tema (me hubiera gustado pararme más pero estos días no he tenido tiempo) os dejo un archivo ZIP con un ejemplo sencillo pero completo.
Se trata de un par de listas desplegables. La primera de ellas contiene una serie de elementos (empresas, blogs, revistas, libros…) que el usuario puede elegir. La segunda lista se rellena dinámicamente en segundo plano a partir de la selección hecha en la primera. Lo he colocado en mi servidor para que puedas probarlo directamente on-line pulsando sobre la siguiente figura:
Pulsa sobre la imagen para probarlo
Nota: Sí, antes de que me lo preguntes: el navegador de la imagen es Internet Explorer 7 en castellano) 😉
Para rellenar la segunda lista se llama por detrás, usando AJAX, a una página ASP que en función del parámetro facilitado devuelve la lista apropiada. El ASP lo tienes en el archivo ZIP de descarga. No se conecta a una base de datos ni nada similar para simplificar (en la realidad seguramente sería así) pero te servirá para hacerte una idea.
CONCLUSIÓN:
Una vez sentadas las bases de AJAX «a pelo», y estudiado un ejemplo práctico completo (que te puedes descargar) me tomaré unos días de vacaciones del Blog 🙂
Dentro de unos días y para rematar con esta serie comentaré algunas cuestiones peliagudas referentes al uso de AJAX, y veremos problemas típicos y sus soluciones en este tipo de aplicaciones. A partir de ahora es cosa tuya cómo lo apliques.
Si alguien quiere que me deje un comentario aquí y podemos tratar también el tema de los Script Callbacks de ASP .NET 2.0, que están íntimamente relacionados con técnicas AJAX pero hacen que sea más fácil que todo esto.