Ajax

Introducción a AJAX

Iván Molina Molina
molixmoli@gmail.com

1

¿Qué es AJAX?
Acrónimo de Asynchronous JavaScript And XML
Definición
No es ninguna tecnología, ni lenguaje de programación Es una técnica de desarrollo web que combina varias tecnologías Consiguiendo una navegación más ágil y rápida, más dinámica.

2

Historia
•Desarrollo de Microsoft de Remote Scripting (hace 10años) •IFrame (Microsoft Internet Explorer 3, 1996)
Carga asíncrona de páginas

•Layers (Netscape 4, 1997) •Microsoft's Remote Scripting (o MSRS, 1998)
Empleo de Applet Java Internet Explorer 4 y Netscape 4 Outlook Web Access

•Definición del término AJAX(Febrero 2005)
Jesse James Garrett: “A New Approach to Web Applications”

3

Tecnologías empleadas
•XHTML (o HTML) y CSS
Presentaciónde datos

•Document Object Model (DOM)
Mostrar e interactuar dinámicamente con la información

•XML y XSLT
Intercambiar y manipular datos con el servidor web

•XMLHttpRequest
Recuperación y envío de datos de modo asíncrono

•JavaScript
Nexo de unión
4

Web 2.0
•Actualmente la mayoría de las actividades del usuario se desarrollan en la web (Correo, Chats, compartir información…)Web 1.0
• • • • • • Páginas personales Email/Grupo de noticias Mp3 Terraserver Británica Online Ofoto • • • •

Web 1.5
Wikis Foros de discusión Napster MapQuest • • • • • •

Web 2.0
Blogging RSS-Sindicación iTunes Google Maps Wikipedia Flickr

5

Web 2.0
•Se está produciendo una evolución de las aplicaciones tradicionales hacia aplicaciones web enfocadas al usuario final, tambiénconocidas •RIA (Rich Internet Application): •Interfaces intuitivos •Sistemas sencillos e intuitivos •Comunicación de cambios al usuario

6

Web 2.0
•Tecnologías o desarrollos en las que se sustentan las RIA: •Applet •Macromedia Flash •Java Web Start •DHTML •DHTML con Iframe •AJAX

7

XMLHttpRequest
• API que se encuentra implementado en el navegador y que proporciona los métodos ypropiedades necesarios para la comunicación con el servidor mediante HTTP • Originalmente desarrollado por Microsoft como un objeto ActiveX, disponible desde Internet Explorer 5 • Utilizada por JavaScript, Jscript, VBScript u otros lenguajes de scripting de navegadores web • Emplea un canal de conexión independiente

8

Características de XMLHttpRequest

• • • • •

Comunicación GET/POSTDocumentos pueden ser texto plano/xml Trabaja en background Número limitado de peticiones Permite especificar un manejador para el control de cambios de estado • Manejador notifica el estado de la petición:
• • • • Inicializada Iniciada En proceso de retornar la información Operación completada

9

Tipo de Respuesta • Documento XML • Texto
• • • • Procesado en el cliente Mostrado directamenteEvaluado en JavaScript mediante ‘eval()’ JSON, “JavaScript Object Notation”:
Es un formato ligero para el intercambio de datos Es un subconjunto de la notación literal de objetos de Javascript pero no requiere el uso de Javascript

• JavaScript

10

EJEMPLO JSON
Definición de barra de menús usando JSON y XML:

11

Métodos de XMLHttpRequest
• • • • • • open("method", "URL",syn/asyn): Asigna la URL de destino,
el método y otros parámetros opcionales de una petición pendiente

send(content): Envía la petición, opcionalmente se puede enviar
una cadena de texto o un objeto DOM

abort(): Detiene la petición actual getAllResponseHeaders(): Devuelve todas las cabeceras de la
respuesta como pares de etiqueta y valores en una cadena

getResponseHeader("headerLabel"):Devuelve el valor de
una cabecera determinada

setRequestHeader("label", "value"): Asigna un valor al par
label/value para la cabecera enviada.
12

Propiedades de XMLHttpRequest
• onreadystatechange: El manejador del evento llamado en cada cambio de estado del objeto readyState: Indica el estado del objeto o la petición • • • • • • 0 = sin inicializar 1 =cargando 2 = fin de la carga 3 =...