XHTML DINAMICO AVANZADO AJAX Y DOM AJAX Conceptos

XHTML DINAMICO AVANZADO (AJAX Y DOM)

AJAX • • Conceptos y fundamentos básicos Patrones de Ajax Ejemplos prácticos. Librerías estándares

Bibliografía • Ajax in Practice • Visual Quickstart Guide CSS, DHTML, and Ajax, Fourth Edition • DHTML Utopia. Modern Web Design Using Java. Script & DOM Ajax: Un Nuevo acercamiento a las Aplicaciones Web http: //www. ajaxhispano. com/ajax-nuevo-acercamiento-aplicaciones-web. html El objeto XMLHttp. Request http: //www. programacionweb. net/articulos/articulo/? num=386

AJAX (Asynchronous Java. Script And XML) AJAX no es una tecnología. Es realmente muchas tecnologías, cada una floreciendo por su propio mérito, uniéndose en poderosas nuevas formas. AJAX incorpora: • • • Presentación basada en estándares usando XHTML y CSS; Exhibición e interacción dinámicas usando el Document Object Model; Intercambio y manipulación de datos usando XML y XSLT; Recuperación de datos asincrónica usando XMLHttp. Request; Y Java. Script poniendo todo junto.

Modelo clásico de aplicaciones Web Navegador Interfaz de usuario Datos HTML + CSS Solicitud HTTP Servidor Web Bases de datos Servidor

Modelo clásico de aplicaciones Web Solicitud HTTP Servidor Datos HTML + CSS Bases datos http: //cv 1. cpd. ua. es/Web. Cv/Ctrl. Zona. Personal/Login. Cv. asp

Modelo AJAX de aplicaciones Web Navegador Interfaz de usuario Datos HTML + CSS Javascript Motor AJAX Datos XML Solicitud HTTP Servidor Web / XML Bases de datos Servidor

Modelo AJAX de aplicaciones Web http: //maps. google. es/ Solicitud HTTP Servidor Datos XML Bases datos

¿Dónde utilizar AJAX? • • • Comunicación rápida entre usuarios Interacción a través de formularios Votaciones, encuestas, valoraciones, etc. Filtrado y manipulación de datos o resultados de búsqueda Autocompletado de campos de texto usados comúnmente

¿Dónde no utilizar AJAX? • • • Envíos a través de formularios simples Búsquedas Navegación básica Reemplazar grandes cantidades de texto Manipulación de la interfaz Validación de usuarios

¿Dónde vamos a utilizar AJAX? 1. 2. 3. 4. 5. 6. 7. 8. Traer contenido al pulsar determinados enlaces Mini álbum de fotos Desplegables de edificios-localizaciones Buscador sencillo Sugerir valores para un campo Paginar resultados Navegar por directorios (DHTML) Editar campos no editables y actualizar contenido (DHTML)

Ejemplo modelo clásico de aplicaciones Web Formulario de identificación http: //127. 0. 0. 1/ajax/mod_clas_form 1. html Validación simple de datos http: //127. 0. 0. 1/ajax/mod_clas_valid 1. asp

Ejemplo modelo clásico de aplicaciones Web Formulario de identificación http: //127. 0. 0. 1/ajax/mod_clas_form 2. html

El objeto XMLHttp. Request nos permite la transferencia de datos en formato XML desde los script del navegador ( Java. Script, JScrip, VBScript, etc. ) a los del servidor (PHP, ASP, etc. ) e inversamente.

El objeto XMLHttp. Request El primer en implementar esta API fue Microsoft con un objeto Active. X para su navegador Internet Explorer 5, posteriormente empezó a incorporarse de forma nativa en todos los navegadores empezando por Firefox seguido de Apple, Konqueror, Opera Software, i. Cab y Microsoft Internet Explorer 7. El objeto se declara de forma diferente dependiendo del navegador, pero sus funciones son las mismas.

El objeto XMLHttp. Request Permite que la interacción del usuario con la aplicación suceda asincrónicamente (independientemente de la comunicación con el servidor). Así el usuario nunca estará mirando una ventana en blanco del navegador y un icono de reloj de arena esperando a que el servidor haga algo.

Creación del objeto XMLHttp. Request • En los navegadores basados en Mozilla, la referencia a este objeto con código Javascript es window. XMLHttp. Request. • En cambio, en Internet Explorer tenemos que hacer uso de Active. XObject, existiendo varias versiones denominadas Microsoft. XMLHTTP y Msxml 2. XMLHTTP Así que crearemos una función que compruebe mediante un If condicional si existe el primer objeto, y en caso de que sea verdadero, crearemos un nuevo objeto XMLHttp. Request, pero si es falso, crearemos un Active. XObject Microsoft. XMLHTTP, pero si aun así no existe, por último crearemos un Msxml 2. XMLHTTP.

Creación del objeto XMLHttp. Request (Modo 1) var objeto = false; if (window. XMLHttp. Request) { // Si es Mozilla, Safari etc objeto = new XMLHttp. Request (); } else if (window. Active. XObject) { // pero si es IE try { objeto = new Active. XObject ("Msxml 2. XMLHTTP"); } catch (e) { // en caso que sea una versión antigua try { objeto = new Active. XObject ("Microsoft. XMLHTTP"); } catch (e) { } } }

Creación del objeto XMLHttp. Request (Modo 2) var objeto = false; try { objeto = new Active. XObject("Msxml 2. XMLHTTP"); } catch (e 1) { try { objeto = new Active. XObject("Microsoft. XMLHTTP"); } catch (e 2) { objeto = null; } } if (! objeto ) { if (typeof XMLHttp. Request != "undefined") { objeto = new XMLHttp. Request(); } }

Uso del objeto XMLHttp. Request Cuando ya tenemos el objeto creado, disponemos de diversos métodos y propiedades para comprobar el estado de los datos. Propiedades: • onreadystatechange • ready. State • response. Text • response. XML • status. Text Métodos • abort() • get. All. Response. Headers() • getresponse. Header(string header) • open(string url, string asynch) • send(string) • set. Request. Header(string header, string value)

onreadystatechange (atributo) El atributo onreadystatechange asigna la función que se ejecutará cada vez que ready. State cambie de valor. Utilización o. XMLHttp. Request. onreadystatechange = f. Funcion; – o. XMLHttp. Request - Objeto XMLHttp. Request – f. Funcion - Función a ejecutar Frecuentemente utilizamos onreadystatechange para definir una función para leer los datos recibidos del servidor, en este caso en su interior comprobaríamos que ready. State tenga valor 4 y entonces leeremos el valor de response. XML, response. Text. . .

onreadystatechange (atributo) <script language="Java. Script" type="text/javascript"> /*<![CDATA[*/ // Creamos la función function f. Funcion () { // Alertamos el estado de la petición alert ( o. XMLHttp. Request. ready. State ); } // Definimos la función handler del evento o. XMLHttp. Request. onreadystatechange = f. Funcion; /*]]>*/ </script>

ready. State (atributo) El atributo ready. State devuelve el estado actual del objeto XMLHttp. Request, cada vez que cambia el valor de ready. State se lanza la función indicada en onreadystatechange Utilización i. Estado = o. XMLHttp. Request. ready. State; i. Estado - Estado actual del objeto 0 - Sin inicializar, siempre será: 1 - Abierto (acaba de llamar open) 2 – Enviado 3 – Recibiendo 4 - A punto La propiedad ready. State se utiliza en todas las comunicaciones asíncronas para comprobar que podemos acceder ya a atributos como response. XML y response. Text, sólo accesibles en los estados 3 y 4.

ready. State (atributo) <script language="Java. Script" type="text/javascript"> /*<![CDATA[*/ // Creamos la función function f. Funcion () { // Si el estado es “a punto“ if ( o. XMLHttp. Request. ready. State == 4) { // Mostramos el texto que llega alert ( o. XMLHttp. Request. response. Text ); } } // Definimos la función handler del evento o. XMLHttp. Request. onreadystatechange = f. Funcion; /*]]>*/ </script>

response. Text (atributo) El atributo response. Text devuelve el texto del documento descargado del servidor en una petición con XMLHttp. Request. Utilización s. Documento = o. XMLHttp. Request. response. Text; – s. Documento - Cadena de caracteres con el texto del documento. La propiedad response. Text se utiliza para tratar los datos recibidos desde el servidor que no tienen formato XML, podremos acceder a los datos siempre y cuando el estado de la conexión devuelto con ready. Statechange sea igual a 3 (recibiendo) o 4 (a punto). Siempre que podamos intentaremos usar response. XML en lugar de response. Text y XML para la los datos en lugar de texto plano.

response. Text (atributo) <script language="Java. Script" type="text/javascript"> /*<![CDATA[*/ // Creamos la función function f. Funcion () { // Si el estado es “a punto“ if ( o. XMLHttp. Request. ready. State == 4) { // Mostramos el texto que llega alert ( o. XMLHttp. Request. response. Text ); } // Definimos la función handler del evento o. XMLHttp. Request. onreadystatechange = f. Funcion; /*]]>*/ </script> }

open (método) El método open prepara una conexión HTTP a través del objeto XMLHttp. Request ( con un método y una URL especificados ) y inicializa todos los atributos del objeto. Utilización o. XMLHttp. Request. open ( s. Metodo, s. URL [, b. Sincronia [, s. Usuario [, s. Pwd ] ] ] ); – s. Metodo - String con el método de conexión ( GET o POST ). – s. URL - URL para la peticion HTTP – b. Sincronia - Booleano opcional en true para usar modo asíncrono y en false para síncrono. – s. Usuario - Cadena de caracteres opcional con el nombre de usuario para la autenticación – s. Pwd - Cadena de caracteres opcional con la contraseña del usuario s. Usuariopara la autenticación Al llamar a open el atributo ready. State a 1, resetea las cabeceras (headers) de envío y los devuelve atributos response. Text, response. XML, status y status. Text a sus valores

open (método) No se permiten las llamadas a dominios, puertos o protocolos diferentes al de la página que llama la función Para realizar la conexión deberemos usar send después de open

open (método) <script language="Java. Script" type="text/javascript"> /*<![CDATA[*/ // creamos el objeto o. XMLHttp = new c. XMLHttp. Request(); // pedimos la página en modo síncrono o. XMLHttp. open('get', 'index. htm', false); // enviamos los datos o. XMLHttp. send(); /*]]>*/ </script>

send (método) El método send envía la petición con los datos pasados por parámetro como cuerpo de la petición a través del objeto XMLHttp. Request. Utilización o. XMLHttp. Request. send ( m. Data ); – o. Data - Cuerpo de la petición HTTP. El parametro o. Data puede ser una referencia al DOM de un documento o una cadena de caracteres.

send (método) <script language="Java. Script" type="text/javascript"> /*<![CDATA[*/ // creamos el objeto o. XMLHttp = new c. XMLHttp. Request(); // pedimos la página en modo síncrono o. XMLHttp. open('get', 'index. htm', false); // enviamos los datos o. XMLHttp. send(); /*]]>*/ </script>

1º Ejemplo. Selección de contenido Vamos a crear una página con 3 enlaces que al pulsar sobre cada uno de ellos nos descargue el contendido de 3 páginas doc 1. html, doc 2. html y doc 3. html que se encuentran ubicados en la carpeta docs. Por último los mostramos con un alert. Los pasos a seguir serían los siguientes: 1. Crear el objeto 2. Establecer la comunicación con el servidor usando AJAX 3. Hacer la petición 4. El servidor nos preparará y devolverá una información 5. Si todo es correcto mostrar la información devuelve * Primer contacto con AJAX * Analizar los resultados con Fire. Debug http: //127. 0. 0. 1/ajax/ej 1/index. html

Paso de parámetros (GET) En la petición AJAX podemos pasar parámetros tanto por POST como por GET a nuestro servidor. Para pasar parámetros por GET ( por URL ) , usaremos una URL con parámetros en la función open independientemente de usar el método GET o POST, por ejemplo: o. XMLHttp. open('GET', 'pagina. php? parametro=' + escape(parametro));

set. Request. Header (método) El método set. Request. Header añade un encabezado HTTP a la petición HTTP a través del objeto XMLHttp. Request. Utilización o. XMLHttp. Request. set. Request. Header ( s. Nombre, s. Valor); – s. Nombre - Nombre del encabezado HTTP. – s. Valor - Valor del encabezado HTTP. El parametro s. Nombre no podrá 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. El parametro s. Valor no podrá contener saltos de línea. Solo podemos utilizar set. Request. Header cuando el valor de ready. State sea 1.

Paso de parámetros (POST) Para pasarlos por POST, deberemos usar el método POST en la función open, configurar el tipo de información que enviamos y por último pasamos los parámetros desde la función send, veamos un ejemplo: o. XMLHttp. open('POST', 'pagina. php'); try { o. XMLHttp. set. Request. Header("Content-Type", "application/x-www-form-urlencoded") } catch (e) { } o. XMLHttp. send( 'parametro=' + escape(parametro));

2º Ejemplo. Paso de parámetros Vamos a pasar 3 parámetros a un ASP que simplemente devuelve las variables que han llegado por método GET o POST Los parámetros son nombre=“HTML dinámico avanzado (Ajax y DOM)“, fechainicio="16/10/2007“ y fechafin="24/10/2007" Los pasos a seguir serían los siguientes: 1. Crear el objeto 2. Establecer la comunicación con el servidor usando AJAX. 1. Si es con el método GET adjuntar los parámetros a la dirección 3. Hacer la petición 1. Si es el método POST, especifica qué tipo de datos llegarán al servidor 4. El servidor nos preparará y devolverá una información 5. Si todo es correcto mostrar la información devuelve * Traspaso de datos http: //127. 0. 0. 1/ajax/ej 2/index. html

status (atributo) El atributo status. Text devuelve el código del estado HTTP de la transmisión devuelto por el servidor web. Utilización i. Estado = o. XMLHttp. Request. status; i. Estado - Entero con el código HTTP de estado. La propiedad status e utiliza para comprobar que no ha habido problemas en la comunicación con el servidor, podremos acceder a los datos siempre y cuando el estado de la conexión devuelto con ready. Statechange sea igual a 3 (recibiendo) o 4 (a punto). El código de estado HTTP para una transmisión correcta es el 200, será conveniente comprobar este dato antes de acceder a los datos con response. XML o response. Text.

status (atributo) 100 101 200 201 202 203 204 205 206 300 301 302 303 304 305 307 400 401 402 403 404 Continua Cambio de protocolo OK Creado Aceptado Información no oficial Sin Contenido para reset Contenido parcial Múlpiples posibilidades Mudado permanentemente Encontrado Vea otros No modificado Utilice un proxy Redirección temporal Solicitud incorrecta No autorizado Pago requerido Prohibido No encontrado 405 406 407 408 409 410 411 412 413 414 415 416 417 500 501 502 503 504 505 Método no permitido No aceptable Proxy requerido Tiempo de espera agotado Conflicto No mapas disponible Requiere longitud Falló precondición Entidad de solicitud demasiado larga URI de solicitud demasiado largo Tipo de medio no soportado Rango solicitado no disponible Falló expectativa Error interno No implementado Pasarela incorrecta Servicio no disponible Tiempo de espera de la pasarela agotado Versión de HTTP no soportada

3º Ejemplo. Llamar a una página que no existe Vamos a llamar a una página noexiste. asp y vamos a ver que nos envía el objeto. ¿Qué ocurrirá si llamamos a o. XMLHttp. response. Text ? Los pasos a seguir serían los siguientes: 1. Crear el objeto 2. Establecer la comunicación con el servidor usando AJAX. 3. Hacer la petición 4. El servidor nos preparará y devolverá una información 1. Si el código es 404 mostrar un mensaje de que no existe la página 2. Si el código es de error (<>200) entonces mostramos el código 3. Si todo es correcto entonces mostrar la respuesta * Control de errores http: //127. 0. 0. 1/ajax/ej 3/index. html

4º Ejemplo. Devolver datos de Access Disponemos de una base de datos Access, usuarios. mdb, que contiene una tabla Alumnos. Crear una página HTML con un enlace y un textarea, que al pulsar haga una llamada a un ASP que consulte todos los alumnos, devuelva los datos y los inserte en el campo textarea el listado de todos los alumnos. * Consulta en una base de datos * Traspaso de diferentes campos en una llamada http: //127. 0. 0. 1/ajax/ej 4/index. html

5º Ejemplo. Servicios y acciones Disponemos de una base de datos Access, edificios. mdb, que contiene dos tablas Edificio y Unidad. Crear una página HTML con dos desplegables, uno para los edificios y otro para las unidades de ese edificio. Al pulsar un edificio, se hace una llamada que consulta en un APS * Concepto de Servicios * Devolver código Javascript * Uso de tipos de eventos http: //127. 0. 0. 1/ajax/ej 5/index. html

6º Ejemplo. Mejorando el ejemplo anterior El objetivo del ejercicio es mejorar el 5º ejercicio. 1. Consulta de los edificios desde la base de datos 1. Conversión del fichero de HTML a ASP 2. Organizar código 1. Clase c. XMLHttp. Request. js 2. acciones. js 3. Gestión en array de todos los objetos c. XMLHttp. Request 4. Pasar un parámetro a la función que gestiona lo que llega de la petición AJAX 5. Liberar todos los objetos * Concepto de bloqueos * Reutilización de código http: //127. 0. 0. 1/ajax/ej 6/index. asp