Ajax (ASYNCHRONOUS JAVASCRIPT AND XML)

Presentación del tema: "Ajax (ASYNCHRONOUS JAVASCRIPT AND XML)"— Transcripción de la presentación:

1 Ajax (ASYNCHRONOUS JAVASCRIPT AND XML)

2 QUE ES AJAX Se publico por primera vez en el articulo "Ajax: A New Approach to Web Applications“ publicado por Jesse James Garrett el 18 de febrero del 2005 Ajax no es una tecnología en si mismo. En realidad se trata de varias tecnologías independientes que se unen.

3 Tecnologías que forman Ajax
XHTML Y CSS : para crear una presentación estándar. DOM : Para la iteración y manipulación dinámica de la presentación. XML, XSLT y JSON : Para el intercambio y manipulación de información. :XMLHttpRequest Para el intercambio asíncrono de información. JAVASCRIPT : Para unir todas las demás tecnologías.

4 Tecnologías que forman Ajax

5 Cuál es la diferencia cuando usamos AJAX

6 AJAX ¿QUÉ ES Y PARA QUÉ SIRVE?
Es una tecnología que busca evitar las demoras propias de las peticiones y respuestas del servidor mediante la transmisión de datos en segundo plano usando un protocolo específicamente diseñado para la transmisión rápida de pequeños paquetes de datos. Con Ajax, se hace posible realizar peticiones al servidor y obtener respuesta de este en segundo plano (sin necesidad de recargar la página web completa) y usar esos datos para, a través de JavaScript, modificar los contenidos de la página creando efectos dinámicos y rápidos. Ajax no es una tecnología en si mismo. En realidad se trata de varias tecnologías independientes que se unen.

7 AJAX ¿QUÉ ES Y PARA QUÉ SIRVE?
Este es un esquema para comprender mejor la idea que hay detrás del uso de Ajax.

8 VENTAJAS No es necesario recargar y redibujar la página web completa, con lo que todo es más rápido. El usuario no percibe que haya demoras: está trabajando y al ser las comunicaciones en segundo plano no hay interrupciones. Utiliza tecnologías ya existentes. Soportada por la mayoría de los navegadores modernos. Interactividad. El usuario no tiene que esperar hasta que lleguen los datos del servidor. Portabilidad (no requiere plug-in como Flash) Mayor velocidad, esto debido que no hay que retornar toda la página nuevamente.

9 DESVENTAJAS El desarrollo de aplicaciones web se puede volver más complejo. Se pierde el concepto de volver a la página anterior. La indexación para los motores de búsqueda se ve dificultada, con lo cual nuestros sitios web pueden perder visibilidad en los buscadores. Si se guarda en favoritos no necesariamente al visitar nuevamente el sitio se ubique dónde nos encontrábamos al grabarla. Problemas con navegadores antiguos que no implementan esta tecnología.

10 ¿QUÉ ES XML Y QUÉ ES JSON? XML (extensible markup language) es un lenguaje de etiquetas que se usa para almacenar y enviar información. No vamos a estudiar XML, simplemente pondremos un ejemplo para hacernos una idea de qué son datos en formato XML. XML se usa para múltiples aplicaciones. JSON (JavaScript Object Notation) es un formato para el intercambio de datos que se usa para almacenar y enviar información, basado en la notación literal de objetos de JavaScript. No vamos a estudiar JSON, simplemente pondremos un ejemplo para hacernos una idea de qué son datos en formato JSON. JSON se usa como alternativa al XML en AJAX.

11 ¿QUÉ ES XML Y QUÉ ES JSON?

12 Ajax (objeto XMLHttpRequest)
•El objeto XMLHttpRequest Este objeto nos permite enviar y recibir información en formato XML, json, texto.

13 Propiedades del objeto XMLHttpRequest
•onreadystatechange Almacena el nombre de la función que se ejecutará cuando el objeto XMLHttpRequest cambie de estado. •responseText Almacena el string devuelto por el servidor, luego de haber hecho una petición. •responseXML Similar a la anterior (responseText) con la diferencia que el string devuelto por el servidor se encuentra en formato XML.

14 Propiedades del objeto XMLHttpRequest
•readyState Almacena el estado del requerimiento hecho al servidor, pudiendo ser:  •0 No inicializado (el método open no a sido llamado) •1 Cargando (se llamó al método open) •2 Cargado (se llamó al método send y ya tenemos la cabecera de la petición HTTP y el status) •3 Interactivo (la propiedad responseText tiene datos parciales) •4 Completado (la propiedad responseText tiene todos los datos pedidos al servidor)

15 métodos principales del objeto XMLHttpRequest
•open Abre un requerimiento HTTP al servidor. •send Envía el requerimiento al servidor.

16 Ejemplo de Ajax con método post

17 Ejemplo de Ajax con método get

18 Procesando el resultado

19 GRACIAS POR SU ATENCION