1 AJAX: Asynchronous JavaScript And XML Facultad de Informática Universidad Politécnica de Madrid DISEÑO DE APLICACIONES WEB 14 de Noviembre de 2007 Raquel CEDAZO LEÓN [email protected]@fi.upm.es

2 Copyright © Raquel Cedazo León Copyright © 2006 Raquel CEDAZO LEÓN Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License". http://www.gnu.org/copyleft/fdl.html

3 Copyright © Raquel Cedazo León Índice Introducción Comparación aplicaciones tradicionales y aplicaciones con AJAX Ventajas Inconvenientes Navegadores Tecnologías Objeto XMLHttpRequest Ejemplo en PHP Ejemplo en Java AJAX JSP Tag Library Ejemplo en Java con AJAX Tag Frameworks

4 Copyright © Raquel Cedazo León Introducción AJAX: Javascript y XML asíncronos Año de aparición: 2005 No es una tecnología, es un término que se utiliza para englobar a un grupo de tecnologías Técnica de desarrollo para crear aplicaciones web interactivas Objetivo: crear una aplicación que responde a las acciones del usuario sin refrescar la página contra el servidor Se ejecuta en el cliente Mantiene comunicación asíncrona con el servidor

5 Copyright © Raquel Cedazo León Ejemplos Google Maps ( http://maps.google.com/ ) Google Maps http://maps.google.com/ Google Suggest (http://www.google.com/webhp?complete=1&hl=en) Google Suggesthttp://www.google.com/webhp?complete=1&hl=en Meneame.net (http://meneame.net/sneak.php)http://meneame.net/sneak.php Gmail (http://gmail.google.com)http://gmail.google.com Flickr (http://www.flickr.com)http://www.flickr.com

6 Copyright © Raquel Cedazo León Modelos de aplicaciones web

7 Copyright © Raquel Cedazo León Modelos de interacción

8 Copyright © Raquel Cedazo León Ventajas (1/2) Interactividad El cliente manipula la página actual en sus navegadores con DOM Sin necesidad de recargar toda la página en cada cambio Multitud de tareas: Actualizar o eliminar registros Expandir formularios web Devolver peticiones simples de búsqueda Editar árboles de categorías Generalmente sólo requiere enviar pequeñas peticiones al servidor

9 Copyright © Raquel Cedazo León Ventajas (2/2) El servidor devuelve respuestas relativamente cortas Portabilidad Multiplataforma Ahorro de ancho de banda al usuario y el servidor se carga menos Aspecto más parecido a las aplicaciones de escritorio Se evita el ciclo start-stop-start de las aplicaciones web tradicionales Útiles para trabajar con gran cantidad de datos

10 Copyright © Raquel Cedazo León Inconvenientes (1/2) Usabilidad El comportamiento es diferente a las tradicionales Botón atrás del navegador Formularios Tiempos de respuesta Tener en cuenta el intervalo entre la petición del usuario y la respuesta del servidor Sin el feedback claro al usuario, carga de datos rápida y dirección apropiada de XMLHttpRequest se podrían producir esperas en la interfaz Se recomienda usar feedback visual para informar al usuario de la actividad en segundo plano o precarga de datos

11 Copyright © Raquel Cedazo León Inconvenientes (2/2) Accesibilidad No cumple con las directrices WAI Dificultad de determinar cuándo una zona de la página ha sido actualizada, especialmente usuarios con discapacidades visuales Falta de soporte de JavaScript Requiere tener instalado JavaScript Adaptación a diferentes navegadores y plataformas Falta de soporte de XMLHttpRequest La mayoría de aplicaciones AJAX sólo están preparadas para navegadores gráficos de escritorio Opciones fallback para usuarios en otras plataformas o navegadores. Ejs: Mapa de Suiza (http://map.search.ch/), GmailMapa de Suizahttp://map.search.ch/Gmail

12 Copyright © Raquel Cedazo León Navegadores (1/2) SÍ permiten AJAX: Basados en Gecko: Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galeon, Netscape v7.1 y anteriores Internet Explorer para Windows a partir de v5.0 y los basados en él Con API KHTML a partir de v3.2: Konqueror, Apple Safari, Nokia Opera a partir de v8.0, incluyendo Opera Mobile Browser

13 Copyright © Raquel Cedazo León Navegadores (2/2) ● NO permiten AJAX: ● Opera 7 y anteriores ● Internet Explorer para Windows v4.0 y anteriores ● Internet Explorer para Macintosh, todas las versiones ● Dillo ● Basados en texto: Lynx y Links ● Para incapacitados visuales (braille)

14 Copyright © Raquel Cedazo León Tecnologías (1/2) Se utilizan la mayoría de las tecnologías disponibles para páginas web y algún lenguaje de servidor XHTML (o HTML) y CSS: Presentación basada en estándares XML y XSLT: Intercambiar y manipular los datos. Se podría utilizar otro formato: HTML preformateado, texto plano, JSON y EBML DOM (Document Object Model): Mostrar e interactuar dinámicamente los datos Implementaciones como JavaScript, JScript, VBScript

15 Copyright © Raquel Cedazo León Tecnologías (2/2) Objeto XMLHttpRequest: para intercambiar datos asíncronamente con el servidor. En algunos frameworks y en algunas situaciones concretas, se usa un iframe para realizar dichos intercambios Lenguaje de servidor: Genera la información en XML y la envía al navegador (PHP, Java...)

16 Copyright © Raquel Cedazo León Objeto XMLHttpRequest Es una instancia de un API que nos permite la transferencia de datos en formato XML desde el script del servidor (PHP, Java...) al script del navegador (JavaScript...) Atributos: onreadystatechange- readyState responseText- responseXML status- statusXML Métodos: abort- open getAllResponseHeaders- send getResponseHeader- setRequestHeader

17 Copyright © Raquel Cedazo León Atributo: readyState Devuelve el estado actual del objeto XMLHttpRequest. Cada vez que cambia su valor se lanza la función indicada en onreadystatechange Uso: iEstado = oXMLHttpRequest.readyState; Posibles valores: 0 - Sin inicializar 1 - Abierto (acaba de llamar open) 2 - Enviado 3 - Recibiendo 4 - Listo oXMLHttpRequest: Objeto XMLHttpRequest Se utiliza en todas las comunicaciones asíncronas para ver en qué momento se puede acceder a los atributos, por ejemplo responseXML y responseText sólo son accesibles en los estados 3 y 4

18 Copyright © Raquel Cedazo León Atributo: onreadystatechange Asigna la función que se ejecutará cada vez que readyState cambie de valor Uso: oXMLHttpRequest.onreadystatechange = fFuncion; oXMLHttpRequest: Objeto XMLHttpRequest fFuncion: Función a ejecutar

19 Copyright © Raquel Cedazo León Atributo: responseText Devuelve el texto del documento descargado del servidor en una petición con XMLHttpRequest Uso: sDocumento = oXMLHttpRequest.responseText; sDocumento: Cadena de caracteres con el texto del documento oXMLHttpRequest: Objeto XMLHttpRequest Siempre se intenta utilizar responseXML en vez de responseText y también se usa XML en vez de texto plano readyState debe ser 3 o 4

20 Copyright © Raquel Cedazo León Atributo: responseXML Devuelve una referencia al cuerpo del documento descargado del servidor en una petición con XMLHttpRequest en formato XML Uso: oDocumento = oXMLHttpRequest.responseXML; oDocumento: Referencia al cuerpo del objeto recibido oXMLHttpRequest: Objeto XMLHttpRequest Se utiliza para tratar los datos recibidos del servidor en XML Devolverá null cuando la respuesta no tenga el encabezado text/xml, application/xml o acabe en +xml readyState debe ser 4 Para tratar los datos XML hay que utilizar las propiedades DOM

21 Copyright © Raquel Cedazo León Atributo: status Devuelve el código del estado HTTP de la transmisión devuelto por el servidor web. Se utiliza para comprobar que no ha habido errores en la comunicación con el servidor Uso:iEstado = oXMLHttpRequest.status; iEstado: Entero con el código HTTP de estado readyState debe ser 3 o 4 Si la transmisión es correcta el valor debe ser 200. Sería conveniente comprobarlo antes de acceder a los datos con responseXML o responseText // Comparamos el estado if ( oXMLHttpRequest.status != 200 ) { alert ( 'Ha habido un error en la conexión' ); }

22 Copyright © Raquel Cedazo León Atributo: statusText Devuelve el texto del estado HTTP de la transmisión devuelto por el servidor web Uso: sEstado = oXMLHttpRequest.statusText; sEstado -Cadena de caracteres con el texto del estado HTTP. Normalmente se utiliza status Si la transmisión es correcta devuelve 'OK' readyState debe ser 3 o 4

23 Copyright © Raquel Cedazo León Método: abort Detiene todas las conexiones asíncronas abiertas por el objeto XMLHttpRequest y lo reinicia poniendo a cero su estado Uso: oXMLHttpRequest.abort (); oXMLHttpRequest: Objeto XMLHttpRequest Frecuentemente se utiliza antes de realizar una nueva petición al servidor a través de un objeto que está realizando o recibiendo otra petición anterior

24 Copyright © Raquel Cedazo León Método: getAllResponseHeaders Devuelve en una sola cadena de caracteres los encabezados HTTP que se han recibido del servidor en una conexión Uso: sHeaders = oXMLHttpRequest.getAllResponseHeaders (); sHeaders: Cadena de caracteres con los encabezados La cadena contendrá todos los encabezados enviados por el servidor excepto el de estado (p.e. HTTP/1.1 200 OK) Los encabezados serán devueltos separados por la combinación 'salto de linea' + 'retorno de carro' Para acceder a los encabezados readyState debe ser 3 o 4

25 Copyright © Raquel Cedazo León Método: getResponseHeader Devuelve en una sola cadena de caracteres uno de los encabezados HTTP que se han recibido del servidor en una conexión Uso: sHeaders=oXMLHttpRequest.getResponseHeader(sHeaderName); sHeaders: Cadena de caracteres con los encabezados sHeaderName: Cadena de caracteres con el nombre del encabezado La cadena sHeaders contendrá todos los encabezados con nombre igual a sHeaderName Se envían separados por la combinación 'coma' + 'espacio' readyState debe ser 3 o 4

26 Copyright © Raquel Cedazo León Método: open Prepara una conexión HTTP a través del objeto XMLHttpRequest e inicializa todos sus atributos Uso: oXMLHttpRequest.open ( sMetodo, sURL [, bSincronia [, sUsuario [, sPwd ] ] ] ); sMetodo: String con el método de conexión ( GET o POST ). sURL: URL para la peticion HTTP bSincronia: Booleano opcional en true para usar modo asíncrono y en false para síncrono sUsuario: Cadena de caracteres opcional con el nombre de usuario para la autenticación sPwd: Cadena de caracteres opcional con la contraseña del usuario sUsuario para la autenticación Ejemplo: oXMLHttp.open('get', 'index.htm', true); Establece readyState a 1

27 Copyright © Raquel Cedazo León Método: send Envía la petición con los datos pasados por parámetro como cuerpo de la petición Uso: oXMLHttpRequest.send(oData); oData: Cuerpo de la petición HTTP. Puede ser o una referencia a un DOM o una cadena de caracteres

28 Copyright © Raquel Cedazo León Método: setRequestHeader Añade un encabezado HTTP a la petición HTTP a través del objeto XMLHttpRequest Uso: oXMLHttpRequest.setRequestHeader (sNombre, sValor); sNombre: Nombre del encabezado HTTP (No puede ser Accept-Charset, Accept-Encoding, Content-Length, Expect, Date, Host, Keep-Alive, Referer, TE, Trailer, Transfer-Encoding ni Upgrade. Tampoco podrá contener espacios, puntos o saltos de línea) sValor: Valor del encabezado HTTP (No debe contener saltos de línea) Ejemplo: oXMLHttp.setRequestHeader('User-Agent', 'AJAX'); readyState debe ser 1

29 Copyright © Raquel Cedazo León Creación del objeto XMLHttpRequest (1/2) El objeto está disponible para la mayoría de navegadores modernos Excepto v5 y v6 de Explorer donde hay que utilizar un objeto ActiveX llamado 'Microsoft XMLHTTP' Hay que tener en cuenta el navegador del usuario Si el navegador no soporta AJAX hay que redirigirlo a una versión tradicional (sin AJAX) oXML = AJAXCrearObjeto();

30 Copyright © Raquel Cedazo León Creación del objeto XMLHttpRequest (2/2) function AJAXCrearObjeto(){ var obj; if(window.XMLHttpRequest) { // no es IE obj = new XMLHttpRequest(); } else { // Es IE o no tiene el objeto try { obj = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert('El navegador utilizado no está soportado'); } return obj; }

31 Copyright © Raquel Cedazo León Realizar una petición con AJAX (1/3) El primer paso para establecer la comunicación con el servidor es hacer la petición Dos tipos de peticiones: síncrona o asíncrona El paso de parámetros puede ser por GET o POST // Creamos la variable parametro parametro = 'Datos pasados por GET'; oXML = AJAXCrearObjeto(); // Preparamos la petición con parametros oXML.open('GET','pagina.php?parametro='+escape(parametro)); // Preparamos la recepción oXML.onreadystatechange = leerDatos; // Realizamos la petición oXML.send('');

32 Copyright © Raquel Cedazo León Realizar una petición con AJAX (2/3) // Creamos la variable parametro parametro = 'Datos pasados por POST'; oXML = AJAXCrearObjeto(); // Preparamos la petición con parametros oXML.open('POST','pagina.php'); // Preparamos la recepción oXML.onreadystatechange = leerDatos; // Realizamos la petición oXML.send('parametro=' + escape(parametro));

33 Copyright © Raquel Cedazo León Realizar una petición con AJAX (3/3) Al enviar parámetros conviene utilizar la función escape: cadena = "Hola! amigo"; cadena = escape (cadena); alert (cadena); // Imprimirá: "Hola%21%20amigo"

34 Copyright © Raquel Cedazo León Recibir la petición AJAX Una vez estamos en estado completado, se puede leer el texto recibido usando el atributo responseText o responseXML function leerDatos(){ if (oXML.readyState == 4) { alert (oXML.responseText); }

35 Copyright © Raquel Cedazo León La respuesta AJAX (1/2) XML para intercambiar los datos entre el servidor y el navegador Para que el navegador sea capaz de interpretar estos datos, tendrá que identificarlos como un XML válido Los encabezados

36 Copyright © Raquel Cedazo León La respuesta AJAX (2/2) El contenido Texto del mensaje

37 Copyright © Raquel Cedazo León Tratamiento de la respuesta AJAX Una vez recibida la respuesta en XML hay que saber interpretar los datos utilizando JavaScript. Se utilizará responseXML para parsear el fichero function leerDatos(){ if (oXML.readyState == 4) { var xml = oXML.responseXML.documentElement; for (i = 0; i < xml.getElementsByTagName('mensaje').length; i++){ var item = xml.getElementsByTagName('mensaje')[i]; var txt = item.getElementsByTagName('texto')[0].firstChild.data; alert(txt); }

38 Copyright © Raquel Cedazo León Ejemplo en PHP Consulta a una BD MySql haciendo uso de AJAX + PHP Mostrar en una lista desplegable los nombres de todos los clientes. En el momento de seleccionar el deseado, en la parte inferior, se mostrarán sus datos Archivos: ajax.js: objeto XMLHttpRequest index.php: muestra la lista desplegable de clientes y la capa de resultado lista.php: obtiene de la BD sólo los nombres de los clientes datoscliente.php: obtiene de la BD todos los datos de un cliente conexion.php: configuración de la conexión a la BD clientes.sql: script de creación de la BD

39 Copyright © Raquel Cedazo León Ejemplo en Java Formulario donde se introducen los datos de un usuario: e-mail, nombre y apellidos, se envían al servidor y se muestran en una capa los datos recibidos Archivos: ● libreriaAjax.js: objeto XMLHttpRequest ● ejemploAjax.jsp: formulario donde se piden los datos al usuario ● ProcesarUsuario.java: Servlet que procesa los datos ● respuestaUsuario.jsp: JSP que muestra los datos

40 Copyright © Raquel Cedazo León AJAX JSP Tag Library Es un conjunto de tags JSP que simplifican el uso de AJAX en JSPs AJAX JSP Tag Library Uso: http://ajaxtags.sourceforge.net/usage.htmlhttp://ajaxtags.sourceforge.net/usage.html Requiere un contenedor de Servlets Tags disponibles: Autocompletar basándose en la entrada de un carácter en un formulario Cajas de texto basándose en selecciones hechas en otro campo Popus para resaltar contenido Refrescar campos de formulario Cambiar el estado On/Off de campos de formulario e imágenes

41 Copyright © Raquel Cedazo León Ejemplo en Java con AJAX Tag Formulario donde se introducen los datos de un usuario: e-mail, nombre y apellidos, se envían al servidor y se muestran en una capa los datos recibidos Es necesario incluir los JavaScripts y Tags de dicha librería Archivos: ejemploAjaxTags.jsp: formulario donde se piden los datos al usuario ProcesarUsuario.java: Servlet que procesa los datos respuestaUsuario.jsp: JSP que muestra los datos

42 Copyright © Raquel Cedazo León Frameworks Desarrollar aplicaciones con AJAX de forma sencilla y sin necesidad de conocer la API XMLHttpRequest ZK (http://www.zkoss.org) ZKhttp://www.zkoss.org Google Web Toolkit (http://code.google.com/webtoolkit/) Google Web Toolkithttp://code.google.com/webtoolkit/ El código de la aplicación está escrito en Java El compilador del GWT genera a partir de estas clases Java, el código HTML y JavaScript “entendibles” por el navegador 200+ Frameworks en http://ajaxpatterns.org/http://ajaxpatterns.org/

43 Copyright © Raquel Cedazo León Referencias Repositorio editable sobre AJAX http://ajaxpatterns.org/ http://ajaxpatterns.org/ AJAX JSP Tag Library http://ajaxtags.sourceforge.net/ http://ajaxtags.sourceforge.net/ Definición de AJAX en la Wikipedia http://es.wikipedia.org/wiki/AJAX http://es.wikipedia.org/wiki/AJAX Sourceforge (Hacer búsqueda del término AJAX) http://sourceforge.net/ http://sourceforge.net/ Manual sobre AJAX http://www.programacionweb.net/cursos/curso.php?num=2 http://www.programacionweb.net/cursos/curso.php?num=2