La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

XHTML DINAMICO AVANZADO (AJAX Y DOM). AJAX Conceptos y fundamentos básicos Patrones de Ajax Ejemplos prácticos. Librerías estándares.

Presentaciones similares


Presentación del tema: "XHTML DINAMICO AVANZADO (AJAX Y DOM). AJAX Conceptos y fundamentos básicos Patrones de Ajax Ejemplos prácticos. Librerías estándares."— Transcripción de la presentación:

1 XHTML DINAMICO AVANZADO (AJAX Y DOM)

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

3 Bibliografía Ajax in Practice Visual Quickstart Guide CSS, DHTML, and Ajax, Fourth Edition DHTML Utopia. Modern Web Design Using JavaScript & DOM Ajax: Un Nuevo acercamiento a las Aplicaciones Web El objeto XMLHttpRequest

4 AJAX (Asynchronous JavaScript 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 XMLHttpRequest; Y JavaScript poniendo todo junto.

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

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

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

8 Modelo AJAX de aplicaciones Web Servidor Solicitud HTTP Datos XML Bases datos

9 ¿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

10 ¿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

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

12 Ejemplo modelo clásico de aplicaciones Web Formulario de identificación Validación simple de datos

13 Ejemplo modelo clásico de aplicaciones Web Formulario de identificación

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

15 El objeto XMLHttpRequest El primer en implementar esta API fue Microsoft con un objeto ActiveX 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, iCab y Microsoft Internet Explorer 7. El objeto se declara de forma diferente dependiendo del navegador, pero sus funciones son las mismas.

16 El objeto XMLHttpRequest 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.

17 Creación del objeto XMLHttpRequest En los navegadores basados en Mozilla, la referencia a este objeto con código Javascript es window.XMLHttpRequest. En cambio, en Internet Explorer tenemos que hacer uso de ActiveXObject, existiendo varias versiones denominadas Microsoft.XMLHTTP y Msxml2.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 XMLHttpRequest, pero si es falso, crearemos un ActiveXObject Microsoft.XMLHTTP, pero si aun así no existe, por último crearemos un Msxml2.XMLHTTP.

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

19 Creación del objeto XMLHttpRequest (Modo 2) var objeto = false; try { objeto = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { objeto = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { objeto = null; } if (! objeto ) { if (typeof XMLHttpRequest != "undefined") { objeto = new XMLHttpRequest(); }

20 Uso del objeto XMLHttpRequest Cuando ya tenemos el objeto creado, disponemos de diversos métodos y propiedades para comprobar el estado de los datos. Propiedades: onreadystatechange readyState responseText responseXML status statusText Métodos abort() getAllResponseHeaders() getresponseHeader(string header) open(string url,string asynch) send(string) setRequestHeader(string header, string value)

21 onreadystatechange (atributo) El atributo onreadystatechange asigna la función que se ejecutará cada vez que readyState cambie de valor.readyState Utilización oXMLHttpRequest.onreadystatechange = fFuncion; –oXMLHttpRequest - Objeto XMLHttpRequest –fFuncion - 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 readyState tenga valor 4 y entonces leeremos el valor de responseXML, responseText...responseXMLresponseText

22 onreadystatechange (atributo) /**/

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

24 readyState (atributo) /**/

25 responseText (atributo) El atributo responseText devuelve el texto del documento descargado del servidor en una petición con XMLHttpRequest. Utilización sDocumento = oXMLHttpRequest.responseText; –sDocumento - Cadena de caracteres con el texto del documento. La propiedad responseText 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 readyStatechange sea igual a 3 (recibiendo) o 4 (a punto). readyStatechange Siempre que podamos intentaremos usar responseXML en lugar de responseText y XML para la los datos en lugar de texto plano.responseXML

26 responseText (atributo) /**/

27 open (método) El método open prepara una conexión HTTP a través del objeto XMLHttpRequest ( con un método y una URL especificados ) y inicializa todos los atributos del objeto.conexión HTTPobjeto XMLHttpRequest Utilización 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 sUsuariopara la autenticación Al llamar a open el atributo readyState a 1, resetea las cabeceras (headers) de envío y los devuelve atributos responseText, responseXML, status y statusText a sus valoresreadyStateresponseTextresponseXMLstatus statusText

28 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

29 open (método) /**/

30 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 XMLHttpRequest.objeto XMLHttpRequest Utilización oXMLHttpRequest.send ( mData ); –oData - Cuerpo de la petición HTTP. El parametro oData puede ser una referencia al DOM de un documento o una cadena de caracteres.

31 send (método) /**/

32 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 doc1.html, doc2.html y doc3.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 FireDebug

33 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:pasar parámetros por GET oXMLHttp.open('GET', 'pagina.php?parametro=' + escape(parametro));

34 setRequestHeader (método) El método setRequestHeader añade un encabezado HTTP a la petición HTTP a través del objeto XMLHttpRequest. HTTPobjeto XMLHttpRequest Utilización oXMLHttpRequest.setRequestHeader ( sNombre, sValor); –sNombre - Nombre del encabezado HTTP. –sValor - Valor del encabezado HTTP. El parametro sNombre 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 sValor no podrá contener saltos de línea. Solo podemos utilizar setRequestHeader cuando el valor de readyState sea 1. readyState

35 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: oXMLHttp.open('POST','pagina.php'); try { oXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") } catch (e) { } oXMLHttp.send( 'parametro=' + escape(parametro));

Presentaciones similares


Anuncios Google