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.

Presentación del tema: "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."— Transcripción de la presentación:

1 Asynchronous JavaScript and XML

2  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.

3  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).

4  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.

5  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(); }

6  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.

7  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.

8  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: − http://api.prototypejs.org/ajax/ajax/updater/ http://api.prototypejs.org/ajax/ajax/updater/

9  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.

10  http://www.w3schools.com/ajax/default.asp http://www.w3schools.com/ajax/default.asp  http://es.wikipedia.org/wiki/AJAX http://es.wikipedia.org/wiki/AJAX  http://www.prototypejs.org/ http://www.prototypejs.org/