AJAX Asynchronous JavaScript And XML

AJAX
El xito actual de la tecnologa AJAX se debe a que los navegadores mas importantes han estandarizado un objeto Javascript, llamado XMLHttpRequest, que permite hacer peticiones al servidor desde la pagina actual sin recargarla. Adems, la respuesta puede ser tratada desde Javascript, bien sea como texto, bien sea como un objeto DOM (XML)

Formas de uso del control XMLHttpRequest

Tanto el termino AJAX como el nombre del objeto Javascript que se usa sugieren que toda la comunicacin se hace usando XML. Esto no es cierto: si bien se puede usar slo XML, tambin se pueden hacer peticiones HTTP que enven y devuelvan texto o cualquier otro formato que queramos. No obstante, es recomendable usar XML para las comunicaciones y, a ser posible, algn formato estndar, como por ejemplo SOAP (usado en servicios web).

Modo sincrnico y asincrnico

Adems del formato de datos, existen dos modos de hacer la peticin: no bloqueante(asincrnico) y bloqueante(sincrnico). En el primero se hace la peticin sin bloquear el cdigo Javascript y la respuesta nos llega a travs de una funcin callback. En el segundo, el cdigo Javascript se para hasta que llega la respuesta. Como el modo bloqueante puede dejar colgado el navegador, no se suele usar. De hecho, en nuestro ejemplo, solo veremos el modo no bloqueante.

Ejemplo Ajax mediante GET

function recuperaResidencia() { // Creamos el control XMLHttpRequest segun el navegador en el que estemos if( window.XMLHttpRequest ) ajax = new XMLHttpRequest(); // No Internet Explorer else ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer // Almacenamos en el control al funcion que se invocara cuando la peticion // cambie de estado ajax.onreadystatechange = funcionCallback;

// Enviamos la peticion ajax.open( "GET", "pagina2.jsp?persona="+document.all.entrada.value, true ); ajax.send( "" );

}

Ejemplo AJAX Funcin CallBack

var ajax; function funcionCallback() { // Comprobamos si la peticion se ha completado (estado 4) if( ajax.readyState == 4 ) { // Comprobamos si la respuesta ha sido correcta (resultado HTTP 200) if( ajax.status == 200 ) { // Escribimos el resultado en la pagina HTML mediante DHTML document.all.salida.innerHTML = "<b>"+ajax.responseText+"</b>"; } } }

Consideraciones al usar AJAX

Si nos decidimos por usar AJAX tenemos que tener en cuenta que: Los navegadores distintos se comportan de maneras distintas: hay que probar mas la aplicacin. El cdigo Javascript se ejecuta en el cliente: va a ser mucho mas difcil diagnosticar y resolver los problemas cuando solo ocurran en determinados clientes. Hay clientes que pueden tener el Javascript inactivo: hay que decidir que se hace con ellos. El objeto XMLHttpRequest no esta disponible aun en dispositivos mviles: hay que decidir si se quieren soportar los dispositivos mviles (PDAs y telfonos mviles) y cual va a ser la alternativa a AJAX. La tecnologa AJAX aun no es un estndar (aunque el W3C esta en ello): si no se van a usar navegadores de amplio uso, como Internet Explorer o Mozilla Firefox, hay que asegurarse de que AJAX funciona y de que funciona como queremos. Los usuarios con discapacidades no van a poder usar nuestra aplicacin: en general, el DHTML no es compatible con las herramientas de accesibilidad existentes. No podemos conectarnos con un objeto XMLHttpRequest a un dominio distinto del cual ha creado el objeto: toda la aplicacin debe estar bajo el mismo dominio.