• Author / Uploaded
• Luciano Soro

Citation preview

AJAX Asynchronous JavaScript And XML

AJAX •

El éxito actual de la tecnología 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. Además, 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 comunicación se hace usando XML. Esto no es cierto: si bien se puede usar sólo XML, también se pueden hacer peticiones HTTP que envíen y devuelvan texto o cualquier otro formato que queramos. No obstante, es recomendable usar XML para las comunicaciones y, a ser posible, algún formato estándar, como por ejemplo SOAP (usado en servicios web).

Modo sincrónico y asincrónico Además del formato de datos, existen dos modos de hacer la petición: no bloqueante(asincrónico) y bloqueante(sincrónico). En el primero se hace la petición sin bloquear el código Javascript y la respuesta nos llega a través de una función callback. En el segundo, el código 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 – Función 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 = ""+ajax.responseText+""; } } }

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 aplicación. • El código Javascript se ejecuta en el cliente: va a ser mucho mas difícil 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 móviles: hay que decidir si se quieren soportar los dispositivos móviles (PDAs y teléfonos móviles) y cual va a ser la alternativa a AJAX. • La tecnología AJAX aun no es un estándar (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 aplicación: 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 aplicación debe estar bajo el mismo dominio.