Desarrollo software i

Aprende haciendo

Desarrollo de Software I

AJAX

® Derechos reservados

www.isil.edu.pe

1

Índice Objetivo Definición Conversación Tradicional Cliente-Servidor Interacción AJAX Cliente-Servidor El Objeto XMLHTTPRequest Implementación

I S I L ® Derechos reservados www.isil.edu.pe

2 0 1 0 2

Objetivo Desarrollar aplicaciones Web que utilicen AJAX para mejor su rendimiento yla experiencia de usuario (Usabilidad).

I S I L ® Derechos reservados www.isil.edu.pe

2 0 1 0 3

Definición • AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript y XML asíncronos, donde XML es un acrónimo de eXtensible Markup Language). • Es una técnica de desarrollo web para crear aplicaciones interactivas. Éstas se ejecutan en el cliente, es decir, en el navegador d l usuario,y mantiene comunicación asíncrona g d del i ti i ió í con el servidor en segundo plano. • De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar recargarla la interactividad, velocidad y usabilidad en la misma.

I S I L ® Derechos reservados www.isil.edu.pe

2 0 1 0 4

Definición AJAX es la combinación de tres tecnologías yaexistentes:
• • XHTML y hojas de estilos en cascada (CSS) para el diseño que acompaña a la información. Document Object Model (DOM) accedido con un lenguaje de scripting por parte del usuario, especialmente implementaciones de ECMAScript como JavaScript, para mostrar e interactuar dinámicamente con la información presentada. p El objeto XMLHttpRequest para intercambiar datos asincrónicamente con elservidor web. XML es el formato usado comúnmente para la transferencia devuelta por el servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado texto plano JSON y hasta EBML preformateado, plano, EBML.

• •

I S I L ® Derechos reservados www.isil.edu.pe

2 0 1 0 5

Conversación tradicional Cliente-Servidor

I S I L ® Derechos reservados www.isil.edu.pe

2 0 10 6

Interacción AJAX Cliente-Servidor

I S I L ® Derechos reservados www.isil.edu.pe

2 0 1 0 7

Interacción AJAX Cliente-Servidor

I S I L ® Derechos reservados www.isil.edu.pe

2 0 1 0 8

Interacción AJAX Cliente-Servidor

I S I L ® Derechos reservados www.isil.edu.pe

2 0 1 0 9

El objeto XMLHTTPRequest

I S I L ® Derechos reservados www.isil.edu.pe

2 0 1 0 10El objeto XMLHTTPRequest

I S I L ® Derechos reservados www.isil.edu.pe

2 0 1 0 11

El objeto XMLHTTPRequest Diferentes reglas para diferentes navegadores.

I S I L ® Derechos reservados www.isil.edu.pe

2 0 1 0 12

El objeto XMLHTTPRequest Diferentes reglas para diferentes navegadores.

I S I L ® Derechos reservados www.isil.edu.pe

2 0 1 0 13

El objeto XMLHTTPRequestDiferentes reglas para diferentes navegadores.
function getXMLHTTPRequest() { g q () var req; try { req = new XMLHttpRequest(); } catch(err1) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch (err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch ( 3) { t h (err3) req = false; } } } return req; }
I S I L ® Derechos reservados www.isil.edu.pe 2 0 1 0 14

El objetoXMLHTTPRequest Propiedades del objeto XMLHTTPRequest
Propiedad onreadystatechange Descripción Determina el gestor de evento que será llamado cuando la propiedad readyState del objeto cambie. Número entero que indica el estado de la petición: 0: No iniciada 1: Cargando 2: Cargado 3: Interactivo 4: Completado Datos devueltos por el servidor como una cadena de texto. Datos devueltos por el servidor como unobjeto XMLDocument que se puede recorrer usando las funciones de JavaScript DOM DOM. Código de estado HTTP devuelto por el servidor. Mensaje de texto enviado por el servidor junto al código (status), para el caso d código 200 contendrá “OK” l de ódi t d á “OK”.
2 0 1 0 www.isil.edu.pe 15

readyState

responseText responseXML status statusText
I S I L ® Derechos reservados

El objeto...