Asynchronous JavaScript and XML

 No es una nueva forma de programar, es una forma de utilizar los estándares disponibles.  Es el arte de intercambiar información con el servidor y actualizar parte de nuestro sitio Web sin “recargar” toda la página.

 Permite a nuestros sitios Web realizar peticiones q funcionan en segundo plano para actualizar ciertas regiones del sitio, es decir, funciona de manera asíncrona.  Esto implica aumentar la interactividad, velocidad y usabilidad en las aplicaciones.  Está basado en estándares abiertos como JavaScript y el Document Object Model (DOM).

 Es una combinación de cuatro tecnologías ya existentes: − XHTML (o HTML) y hojas de estilos en cascada (CSS). − Document Object Model (DOM) accedido con JavaScript por parte del usuario para mostrar e interactuar la información presentada. − El objeto XMLHttpRequest para intercambiar asíncronamente con el servidor web. − XML es el formato de intercambio de datos usado generalmente aunque también suele usarse HTML, texto plano y JSON.

 A continuación se ofrece una función para realizar una petición Ajax sin utilizar la librería Prototype, de la manera “tradicional. function loadXMLDoc(){ if (window.XMLHttpRequest){// para IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else{// para IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("miDiv").innerHTML=xmlhttp.responseText; } xmlhttp.open("GET","ajax.html",true); xmlhttp.send(); }

 Prototype nos ofrece varias opciones disponibles para realizar peticiones Ajax: Updater, Request, PeriodicalUpdater, etc.  Cada una de estás funciones “predefinidas” son útiles en diferentes escenarios comunes del desarrollo de aplicaciones Web.

 A continuación, describiremos el funcionamiento de una de las opciones disponibles en la librería Prototype para realizar un pedido Ajax: Ajax.Updater.  Este componente sirve para ser utilizado cuando lo único que queremos hacer es “actualizar” cierta parte de un sitio Web.

 A continuación se ofrece una función que cumple el mismo objetivo uqe la presentada más arriba, y sin embargo ocupa solamente una línea (utilizando la librería Prototype). function loadXMLDoc(){ new Ajax.Updater('miDiv', 'ajax.html') }  El primer parámetro indica el elemento a ser actualizado y el segundo indica de que URL se debe tomar la información para actualizar el elemento.  La anterior es la expresión más sencilla del pedido Ajax, sin embargo se pueden indicar más parámetros para la misma  Referencia completa en: −

 Se adjunta a esta clase un archivo demo.zip que contiene 4 archivos que funcionan como ejemplos. Para correr el ejemplo deben colocarlo dentro de la carpeta pública de su servidor Web.  index_tradicional.html − Archivo que realiza una petición Ajax de la manera tradicional.  index_prototype.html − Archivo que realiza una petición Ajax empleando la librería Prototype.  ajax.html − Archivo contra el que se realiza la petición Ajax.  prototype.js − Librería Prototype.

  