Descargar la presentación
La descarga está en progreso. Por favor, espere
Publicada porNúria Pollino Modificado hace 9 años
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/
Presentaciones similares
© 2024 SlidePlayer.es Inc.
All rights reserved.