INTRODUCCIÓN A DOM
Javier Oliver Fulguera

Javier Oliver Fulguera - @javioliful – www.oliverfulguera.es
DOM
1.  Introducción
2.  Estructura jerárquica de DOM
3.  Estructura de documentos Elementos
4.  Estructura de Documentos ...
Introducción
l  DOM (Document Object Model) = Interfaz común
para trabajar con objetos de un documento
l  Documentos XML...
Introducción
l  No se especifica cómo tiene que ser la implementación
de ese árbol de nodos.
l  Solo tiene que cumplir u...
Estructura jerárquica de DOM
l  En DOM, un documento XML se representa como un árbol
l  DOM proporciona métodos, clases ...
Estructura de documentos Elementos

<p>Un párrafo</p>

Element: p

Text: Un párrafo

Javier Oliver Fulguera - @javioiful -...
Estructura de Documentos Subelementos

<p>Un párrafo
<b>marcado</b>
</p>

Javier Oliver Fulguera - @javioiful - www.oliver...
Estructura de Documentos Atributos

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
Modelo de Herencia
Principales Interfaces

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
Nodo Documento
l  El nodo documento representa el documento entero
¡  Métodos de búsqueda:
l  documentElement devuelve ...
Nodos del árbol
l  El interfaz Node representa nodos del árbol
¡  Todos los demás heredan de Node

l  Funcionalidad bás...
Nodos del árbol
Campos Genéricos
l  nodeName: DOMString
¡ Nombre del nodo (valor de la etiqueta)
l  nodeValue : DOMStri...
Ejemplo
Calcular nº párrafos de un documento

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
Lista de nodos
l  El interfaz NodeList indica una lista de nodos
l  Los ítems son accedidos mediante el índice
¡  Ej. i...
Ejemplo de lista de nodos

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
Manipulación del árbol
l  appendChild añade un hijo
l  insertBefore inserta un hijo antes que otro
l  cloneNode devuelv...
Ejemplo de Manipulación
l  Clonar primer elemento y ponerlo al final

// Clonar primer elemento y ponerlo al final
functi...
Ejemplo de manipulación de atributos
l  Cambiar fuente a Arial y color a Azul

function ponArial() {
var raiz=document.do...
DHTML
l  DHTML podría definirse como Javascript + DOM + CSS
1. 
2. 
3. 
l 

JavaScript contiene código de control (ejemp...
Ejemplo de XML y JAVA
l  pelis.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<Peliculas>
<Pelicula codigo='1' titulo='...
Ejemplo de XML y JAVA
Root

Películas

...

Película

codigo=1

diirector=’Victor Fleming’

titulo=’Lo que el
viento se ll...
Ejemplo de XML y JAVA

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
Ejemplo de XML y JAVA

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
Ejemplo de XML y JAVA
l  Resultado:

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
Ejemplo de XML y JavaScript
<?xml version="1.0" encoding="ISO-8859-1"?>
<Root>
<descarga id="1">
<titulo>Libros Java</titu...
Ejemplo de XML y JavaScript
l  JavaScript en página HTML

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
Ejemplo de XML y JavaScript
l  Resultado

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
INTRODUCCIÓN A AJAX
Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es

Javier Oliver Fulguera - @javioliful – ww...
INTRODUCCION A AJAX
l  1. Introducción
l  2. Anatomía de una interacción Ajax.
l  3. El objeto XMLHttpRequest
l  4. El...
1. Introducción
l  Usando Javascript una página Html puede de forma asíncrona realizar
llamadas al servidor desde el que ...
1. Introducción
l  Para este fin surge el término AJAX (Asynchronous JavaScript Technology
and XML) como tecnología que d...
1. Introducción
l  Ajax requiere un cambio arquitectural respecto a los modelos Html.
Tradicionalmente una página desde l...
1. Introducción
l  Algunos casos de interacción de Ajax pueden ser:
1. Validación en tiempo real de datos de un
formulari...
2. Anatomía de una interacción Ajax.
l  Una aplicación web contiene una página Html estática o bien generada vía una
Jsp....
2. Anatomía de una interacción Ajax.
l  La secuencia que se sigue consiste en:
1.  Ocurre un evento del cliente
2.  Un ob...
3. El objeto XMLHttpRequest
l  El objeto XMLHttpRequest es un objeto nativo del browser que es
indispensable crearlo caso...
3. El objeto XMLHttpRequest
l Creando el objeto XMLHttpRequest.
l Muchos navegadores requieren una forma diferente de in...
3. El objeto XMLHttpRequest
l  Para obtener un objeto en javascript nos bastará con poner
ajax=getObjetoHTTP() .
l  Méto...
3. El objeto XMLHttpRequest
¡  open(método, URL, asíncrona, usuario, password) : Abre una conexión con
esa URL mediante e...
3. El objeto XMLHttpRequest
l  A continuación las propiedades del objeto.
¡  onreadystatechange : Contiene el nombre de ...
3. El objeto XMLHttpRequest
¡  responseXML : Datos devueltos por el servidor en forma de
documento XML que puede ser reco...
4. El proceso Cliente-Servidor
l  Cuando nuestro cliente se comunica con el servidor, éste no recibirá
variables para su ...
4. El proceso Cliente-Servidor

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
4. El proceso Cliente-Servidor
l  Si ponemos http://localhost:8080/AjaxProyect/AjaxServlet?mensaje=1 el archivo
soltará:
...
4. El proceso Cliente-Servidor
l  Ejemplo:

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
5. Nuestro primer ejemplo con AJAX
l  Como primer ejemplo no haremos el típico HOLA MUNDO enviaremos una
petición a nuest...
5. Nuestro primer ejemplo con AJAX
l  Lado del cliente:
¡  Escribimos es JavaScript necesario para obtener el objeto XML...
5. Nuestro primer ejemplo con AJAX
l  Lado del cliente:
¡  Escribimos la función JavaScript a ejecutar:

Javier Oliver F...
5. Nuestro primer ejemplo con AJAX
l  Lado del cliente:
¡  Escribimos el html para ejecutar la función::

Javier Oliver ...
5. Nuestro primer ejemplo con AJAX
l  Lado del servidor:
¡  Nuestro procesador trabajará según la variable funcion que r...
5. Nuestro primer ejemplo con AJAX
l  Ejecutar ejemplo1:
l  Analizando la función primer_tope():
¡  Fuera de lo que es ...
5. Nuestro primer ejemplo con AJAX
5.  _objetus.onreadystatechange=function() {
Invocamos la propiedad onreadystatechange,...
5. Nuestro primer ejemplo con AJAX
l  Ejecución:

l  Resultado:

Javier Oliver Fulguera - @javioiful - www.oliverfulguer...
5. Nuestro primer ejemplo con AJAX
l  Para enviar la petición por el método POST.

Nótense las diferencias con el método ...
7. Recibiendo los resultados del
procesador
l  Hay dos maneras en las que se puede recibir la informacion
devuelta por el...
7. Recibiendo los resultados del
procesador
2.  responseXML: Con esta propiedad el procesador nos devuelve los
datos como ...
7. Recibiendo los resultados del
procesador
l  En el lado del cliente:

Javier Oliver Fulguera - @javioiful - www.oliverf...
7. Recibiendo los resultados del
procesador
l  En el lado del servidor:

Javier Oliver Fulguera - @javioiful - www.oliver...
7. Recibiendo los resultados del
procesador
l  Ejecución:

l  Resultado:

Javier Oliver Fulguera - @javioiful - www.oliv...
8. Re-renderizando elementos
l  Hasta ahora hemos manejado los datos que nos llegaban del procesador
viendolos con un ale...
8. Re-renderizando elementos
l  Entonces vamos a cambiar nuestro window.alert(respuesta) por
document.getElementById(targ...
8. Re-renderizando elementos
l  Del lado del cliente:

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
8. Re-renderizando elementos
l  Resultado:

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
9. Ejemplos
l  Ejemplo5 (Añadir Filas a Tabla)
¡  Añade un fila a una tabla con los datos del servidor
con Dom

l  Ejem...
9. Ejemplos
l  Ejemplo5. Cliente

Javier Oliver Fulguera -
9. Ejemplos
l  Ejemplo5. Servidor

Javier Oliver Fulguera -
9. Ejemplos
l  Ejemplo5. Resultado

Javier Oliver Fulguera -
9. Ejemplos
l  Ejemplo6. Cliente

Javier Oliver Fulguera -
9. Ejemplos
l  Ejemplo6. Servidor

Javier Oliver Fulguera -
9. Ejemplos
l  Ejemplo6. Resultado

Javier Oliver Fulguera -
9. Ejemplos
l  Ejemplo7. Cliente

Javier Oliver Fulguera -
9. Ejemplos
l  Ejemplo7. Servidor

Javier Oliver Fulguera -
9. Ejemplos
l  Ejemplo7. Resultado

Javier Oliver Fulguera -
9. Ejemplos
l  Ejemplo8. Cliente
¡  (Se adjunta debido a su extensión)

Javier Oliver Fulguera -
9. Ejemplos
l  Ejemplo8. Servidor

Javier Oliver Fulguera -
9. Ejemplos
l  Ejemplo8. Resultado

Javier Oliver Fulguera -
Upcoming SlideShare
Loading in...5
×

Introduccion a DOM y AJAX - Javier Oliver Fulguera

466

Published on

Manual que utilicé para impartir el curso de Aplicaciones Web J2EE - Módulo de dedicado a DOM y AJAX.

---------------DOM------------
Introducción
Estructura jerárquica de DOM
Estructura de documentos Elementos
Estructura de Documentos Subelementos
Estructura de Documentos Atributos
Modelo de Herencia Principales Interfaces
Nodo Documento
Nodos del árbol
Nodos del árbol Campos Genéricos
Ejemplo
Calcular nº párrafos de un documento
Lista de nodos
Manipulación del árbol
Ejemplo de Manipulación
Ejemplo de manipulación de atributos
Conclusiones: DHTML
Ejemplo de parseo XML con Java
Ejemplo de parseo XML com JavaScript

--------------AJAX----------------
. Introducción
2. Anatomía de una interacción Ajax.
3. El objeto XMLHttpRequest
4. El proceso Cliente-Servidor
5. Nuestro primer ejemplo con AJAX
6. Sintaxis básica para los métodos GET/POST
7. Recibiendo los resultados del procesador
8. Re-renderizando elementos
9. Ejemplos



Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
466
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduccion a DOM y AJAX - Javier Oliver Fulguera

  1. 1. INTRODUCCIÓN A DOM Javier Oliver Fulguera Javier Oliver Fulguera - @javioliful – www.oliverfulguera.es
  2. 2. DOM 1.  Introducción 2.  Estructura jerárquica de DOM 3.  Estructura de documentos Elementos 4.  Estructura de Documentos Subelementos 5.  Estructura de Documentos Atributos 6.  Modelo de Herencia Principales Interfaces 7.  Nodo Documento 8.  Nodos del árbol 9.  Nodos del árbol Campos Genéricos 10. Ejemplo 1.  Calcular nº párrafos de un documento 2.  Lista de nodos 11. Manipulación del árbol 1.  Ejemplo de Manipulación 2.  Ejemplo de manipulación de atributos 12. Conclusiones: DHTML 13.  Ejemplo de parseo XML con Java 14.  Ejemplo de parseo XML com JavaScript Javier Oliver Fulguera - @javioliful – www.oliverfulguera.es
  3. 3. Introducción l  DOM (Document Object Model) = Interfaz común para trabajar con objetos de un documento l  Documentos XML son tratados como un árbol de nodos l  Cada elemento es un “nodo” l  Los elementos hijos y el texto contenido dentro de un elemento son subnodos l  W3C DOM Site: http://www.w3.org/DOM/ l  DOM Java Language Binding: http://www.w3.org/TR/DOM-Level-2-Core/javabinding.html Javier Oliver Fulguera - @javioliful – www.oliverfulguera.es
  4. 4. Introducción l  No se especifica cómo tiene que ser la implementación de ese árbol de nodos. l  Solo tiene que cumplir una interfaz l  Implementaciones en Java, ECMAScript, C, C++, Python, etc. Javier Oliver Fulguera - @javioliful – www.oliverfulguera.es
  5. 5. Estructura jerárquica de DOM l  En DOM, un documento XML se representa como un árbol l  DOM proporciona métodos, clases e interfaces para acceder y manipular el árbol <html> <head> <title>Ejemplo</title> </head> <body> <h1>Cabecera</h1> <p>Un párrafo</p> </body> </html> Javier Oliver Fulguera
  6. 6. Estructura de documentos Elementos <p>Un párrafo</p> Element: p Text: Un párrafo Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  7. 7. Estructura de Documentos Subelementos <p>Un párrafo <b>marcado</b> </p> Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  8. 8. Estructura de Documentos Atributos Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  9. 9. Modelo de Herencia Principales Interfaces Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  10. 10. Nodo Documento l  El nodo documento representa el documento entero ¡  Métodos de búsqueda: l  documentElement devuelve el elemento raíz l  getElementByID devuelve el elemento a partir de un ID l  getElementsByTagName devuelve los elementos a partir de una etiqueta dada ¡  Métodos factoría (para crear nodos) l  createElement l  createAttribute l  createComment l  ... Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  11. 11. Nodos del árbol l  El interfaz Node representa nodos del árbol ¡  Todos los demás heredan de Node l  Funcionalidad básica de manipulación del árbol ¡  Recorrido: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  12. 12. Nodos del árbol Campos Genéricos l  nodeName: DOMString ¡ Nombre del nodo (valor de la etiqueta) l  nodeValue : DOMString ¡ Valor del nodo (si es un elemento, nulo, si es un atributo, valor) l  attributes: NamedNodeMap ¡ Lista de atributos del nodo l  Los valores dependen del tipo de nodo Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  13. 13. Ejemplo Calcular nº párrafos de un documento Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  14. 14. Lista de nodos l  El interfaz NodeList indica una lista de nodos l  Los ítems son accedidos mediante el índice ¡  Ej. item(0), item(1), etc. ¡  length indica el número de ítems l  Ejemplo de recorrido: for (int i=0; i < listaNodos.length; i++) procesa(item(i)); Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  15. 15. Ejemplo de lista de nodos Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  16. 16. Manipulación del árbol l  appendChild añade un hijo l  insertBefore inserta un hijo antes que otro l  cloneNode devuelve duplicado de nodo actual ¡ Argumento booleano (true = subelementos) l  removeChild elimina un hijo l  replaceChild substituye un hijo por otro l  hasAttributes indica si tiene atributos l  hasChildNodes indica si tiene hijos Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  17. 17. Ejemplo de Manipulación l  Clonar primer elemento y ponerlo al final // Clonar primer elemento y ponerlo al final function clona() { var raiz=document.documentElement; var cuerpo=raiz.getElementsByTagName("body")[0]; var texto=cuerpo.firstChild; var textoNuevo=texto.cloneNode(true); cuerpo.appendChild(textoNuevo); } Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  18. 18. Ejemplo de manipulación de atributos l  Cambiar fuente a Arial y color a Azul function ponArial() { var raiz=document.documentElement; var cuerpo=raiz.getElementsByTagName("body").item(0); var parrafo2=cuerpo.getElementsByTagName("p").item(1); var fuente=parrafo2.getElementsByTagName("font").item(0); fuente.setAttribute("face","arial"); fuente.setAttribute("color","blue"); } Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  19. 19. DHTML l  DHTML podría definirse como Javascript + DOM + CSS 1.  2.  3.  l  JavaScript contiene código de control (ejemplo: temporizadores) DOM ofrece interfaz para acceder al documento CSS ofrece hojas de estilos (incluidas capas) Ejemplos ¡  ¡  ¡  ¡  ¡  Controlar visibilidad de elementos Mover elementos en una página Modificar imágenes al avanzar con el cursor Controlar interacción con el usuario (formularios) Algunos efectos visuales atractivos (o no...) Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  20. 20. Ejemplo de XML y JAVA l  pelis.xml <?xml version="1.0" encoding="iso-8859-1"?> <Peliculas> <Pelicula codigo='1' titulo='Lo que el viento se llevó' director='Victor Fleming' actores='Clark Gable, Vivien Leigh, Leslie Howard'/> <Pelicula codigo='2' titulo='Los Otros' director='Alejandro Amenabar' actores='Nicole Kidman'/> <Pelicula codigo="5" titulo="Malena" director="Giuseppe Tornatore" actores="Monica Bellucci, Giuseppe Sulfaro"/> </Peliculas> Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  21. 21. Ejemplo de XML y JAVA Root Películas ... Película codigo=1 diirector=’Victor Fleming’ titulo=’Lo que el viento se llevó’ actores=’Clark Gable, Vivien Leigh, Leslie Howard’ Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es Película codigo=5 diirector=’Giuseppe Tornatore’ titulo=’Malena’ actores=’Monica Bellucci, Giuseppe Sulfaro’
  22. 22. Ejemplo de XML y JAVA Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  23. 23. Ejemplo de XML y JAVA Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  24. 24. Ejemplo de XML y JAVA l  Resultado: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  25. 25. Ejemplo de XML y JavaScript <?xml version="1.0" encoding="ISO-8859-1"?> <Root> <descarga id="1"> <titulo>Libros Java</titulo> <ruta>http://slob.org</ruta> <hits>2546</hits> </descarga> <descarga id="2"> <titulo>Libros C Sharp</titulo> <ruta>http://sharp.net</ruta> <hits>1654</hits> </descarga> </Root> Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  26. 26. Ejemplo de XML y JavaScript l  JavaScript en página HTML Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  27. 27. Ejemplo de XML y JavaScript l  Resultado Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  28. 28. INTRODUCCIÓN A AJAX Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es Javier Oliver Fulguera - @javioliful – www.oliverfulguera.es
  29. 29. INTRODUCCION A AJAX l  1. Introducción l  2. Anatomía de una interacción Ajax. l  3. El objeto XMLHttpRequest l  4. El proceso Cliente-Servidor l  5. Nuestro primer ejemplo con AJAX l  6. Sintaxis básica para los métodos GET/POST l  7. Recibiendo los resultados del procesador l  8. Re-renderizando elementos l  9. Ejemplos Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  30. 30. 1. Introducción l  Usando Javascript una página Html puede de forma asíncrona realizar llamadas al servidor desde el que se ha descargado y cargar contenidos formateados bien como XML o como texto. Con esta información Javascript puede enriquecer las páginas pudiendo realizar actualizaciones online, recarga dinámica de forma sencilla, etc. l  El término asíncrono va a hacer referencia a la posibilidad de poder realizar llamadas no bloqueantes desde el navegador, lo que nos permite interaccionar de forma efectiva sin tener que hacer envíos y recepciones de la página actual. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  31. 31. 1. Introducción l  Para este fin surge el término AJAX (Asynchronous JavaScript Technology and XML) como tecnología que describe este modelo de interacción. l  Ajax no es nuevo. Pero lo que ha cambiado y ha potenciado estas técnicas es la inclusión del objeto XMLHttpRequest en los motores de javascript de los browsers con un comportamiento estandarizado. l  Lo que hace diferente a los clientes Ajax es que los clientes contienen lógica de control específica embebida dentro de su tecnología Javascript. l  La interacción de Ajax va a permitir una clara separación entre la lógica de presentación y los datos. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  32. 32. 1. Introducción l  Ajax requiere un cambio arquitectural respecto a los modelos Html. Tradicionalmente una página desde la perspectiva del servidor está especializada en la generación del Html para cada cliente que realiza una llamada al servidor. Cuando se requiere interacción los clientes refrescan y re-renderizan una página Html completa para cada request. l  El modelo de Ajax difiere, ya que realiza una carga de un Html que hace de contenedor. l  Dicho contendor integra contenidos que están expuestos en el servidor como documentos XML, y para ello se basa en eventos del cliente. Es decir, que un evento del cliente va a provocar una re-renderización parcial del Html, pero no del documento completo. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  33. 33. 1. Introducción l  Algunos casos de interacción de Ajax pueden ser: 1. Validación en tiempo real de datos de un formulario. 2. Auto completado de datos de un formulario. 3. Carga bajo demanda. 4. Controles y efectos sofisticados para la interfaz de usuario. 5. Refresco de datos y envío a servidor. 6. Submit parciales. 7. Mashups. 8. Modelo de aplicación basado en una página. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  34. 34. 2. Anatomía de una interacción Ajax. l  Una aplicación web contiene una página Html estática o bien generada vía una Jsp. Dicha página contiene un formulario que requiere una validación de sus datos sin refrescar la página y sin hacer un submit. Supongamos que tenemos un servlet llamado ValidateServlet que provee la validación lógica. La figura describe en detalle la interacción que se produce entre la página y el servidor: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  35. 35. 2. Anatomía de una interacción Ajax. l  La secuencia que se sigue consiste en: 1.  Ocurre un evento del cliente 2.  Un objeto XMLHttpRequest se crea y configura 3.  La petición se procesa por el ValidateServlet 4.  El ValidateServlet devuelve un XML que contiene el resultado 5.  El objeto XMLHttpRequest llama a la función de callback y procesa el resultado 6.  El HTML Dom se actualizado Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  36. 36. 3. El objeto XMLHttpRequest l  El objeto XMLHttpRequest es un objeto nativo del browser que es indispensable crearlo caso contrario ni se podrá comenzar las aplicaciones. Vamos a partir del objeto desde la creación y veremos sus métodos y propiedades. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  37. 37. 3. El objeto XMLHttpRequest l Creando el objeto XMLHttpRequest. l Muchos navegadores requieren una forma diferente de invocar al objeto XMLHttpRequest. Vamos a mostrar un método estándar de hacerlo. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  38. 38. 3. El objeto XMLHttpRequest l  Para obtener un objeto en javascript nos bastará con poner ajax=getObjetoHTTP() . l  Métodos l  A continuación los métodos del objeto. ¡  abort(): Detiene la petición en curso. ¡  getAllResponseHeaders() : Devuelve todas las cabeceras de la respuesta (etiquetas y valores) como una cadena. ¡  getResponseHeader(etiqueta) : Devuelve el valor de la etiqueta en las cabeceras de la respuesta. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  39. 39. 3. El objeto XMLHttpRequest ¡  open(método, URL, asíncrona, usuario, password) : Abre una conexión con esa URL mediante el método (GET,POST,HEAD o DELETE), tiene 5 parámetros de entrada, las 2 primeras (método, URL) son obligatorios: l  método: El método que se usará para la conexión (GET,POST,HEAD o DELETE). URL: La URL que se llamará para el proceso. l  Las 3 restantes (asíncrona, usuario, password) son opcionales: l  asíncrona: Valor booleano, true indica que el proceso se ejecutará sin parar la aplicacion en curso (Background) false indica que se detendrá el proceso hasta que se termine el proceso de manera correcta. ¡  send(contenido) : Envía el contenido al servidor. ¡  setRequestHeader(etiqueta,valor) : Establece el valor de una etiqueta de las cabeceras de petición. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  40. 40. 3. El objeto XMLHttpRequest l  A continuación las propiedades del objeto. ¡  onreadystatechange : Contiene el nombre de la función que se ejecuta cada vez que el estado de la conexión cambie. ¡  readyState : Estado de la conexión. Código à Estado 1 à Cargando 2 à Cargado, pero sin su contenido incorporado a los objetos correspondientes 3 à Incorporando a los objetos correspondientes 4 à Carga completada ¡  responseText : Datos devueltos por el servidor en formato cadena. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  41. 41. 3. El objeto XMLHttpRequest ¡  responseXML : Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc). ¡  status : Código enviado por el servidor. Código à Valor 200 à Completado con éxito 404 àNo se encontró URL 414 à Los valores pasados por GET superan los 512 bytes ¡  statusText : Mensaje de texto enviado por el servidor junto al código (status), para el caso de código 200 contendrá "OK". Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  42. 42. 4. El proceso Cliente-Servidor l  Cuando nuestro cliente se comunica con el servidor, éste no recibirá variables para su uso o modificación, sino que lo que el cliente recibe del servidor es aquello que el servidor suelta; es decir nosotros tenemos que codificar la página llamada para que nos devuelva aquello que necesitaremos (XML, etc.) l  Veamos un ejemplo: ¡  Tenemos un AjaxServlet.java que recibirá variables por el método GET. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  43. 43. 4. El proceso Cliente-Servidor Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  44. 44. 4. El proceso Cliente-Servidor l  Si ponemos http://localhost:8080/AjaxProyect/AjaxServlet?mensaje=1 el archivo soltará: ¡  Enviaste el valor 1 l  Si ponemos http://localhost:8080/AjaxProyect/AjaxServlet?mensaje=2 el archivo soltará: ¡  Enviaste el valor 2 l  Si ponemos http://localhost:8080/AjaxProyect/AjaxServlet?mensaje=5345 el archivo soltará: ¡  No enviaste ningun valor ACEPTABLE l  Si no le damos variables http://localhost:8080/AjaxProyect/AjaxServlet el archivo soltará: ¡  No se ha enviado valor alguno de petición. l  Por tanto lo que debemos hacer es que nuestros archivos Clientes entiendan la línea y la manera de procesar la información que nuestro servidor va a tener. Un aspecto a tener en cuenta es que al realizar la petición se pueden crear variables de sesión, cookies, consultas SQL, con lo que disponemos de muchas opciones para montar las soluciones que necesitamos. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  45. 45. 4. El proceso Cliente-Servidor l  Ejemplo: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  46. 46. 5. Nuestro primer ejemplo con AJAX l  Como primer ejemplo no haremos el típico HOLA MUNDO enviaremos una petición a nuestro procesador que nos arrojará nuestro IP, PATH y date() usando el método GET. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  47. 47. 5. Nuestro primer ejemplo con AJAX l  Lado del cliente: ¡  Escribimos es JavaScript necesario para obtener el objeto XMLHttpRequest Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  48. 48. 5. Nuestro primer ejemplo con AJAX l  Lado del cliente: ¡  Escribimos la función JavaScript a ejecutar: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  49. 49. 5. Nuestro primer ejemplo con AJAX l  Lado del cliente: ¡  Escribimos el html para ejecutar la función:: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  50. 50. 5. Nuestro primer ejemplo con AJAX l  Lado del servidor: ¡  Nuestro procesador trabajará según la variable funcion que reciba por el método GET Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  51. 51. 5. Nuestro primer ejemplo con AJAX l  Ejecutar ejemplo1: l  Analizando la función primer_tope(): ¡  Fuera de lo que es la funcion getObjetoHTTP() analizaremos nuestra función que se encargó del envío y recepcion de datos. 1.  _objetus= getObjetoHTTP() Llamamos al objeto XMLHttpRequest 2.  _values_send="funcion=pt" Cargamos todas las variables que se van a enviar 3.  _URL_=“AjaxServletInfo?" La URL donde nos comunicaremos (Nótese el ? al final del archivo) 4.  _objetus.open("GET",_URL_+"&"+_values_send,true); La parte más importante, aquí abrimos la URL con los valores cargados o sea AjaxServletInfo?funcion=pt Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  52. 52. 5. Nuestro primer ejemplo con AJAX 5.  _objetus.onreadystatechange=function() { Invocamos la propiedad onreadystatechange, entonces cuando el objeto llegue a este punto se llamará a una funcion que gestionará el resto del proceso. 6.  if (_objetus.readyState==4) { Llamamos ahora a la propiedad readyState que nos indicará en que estado se encuentra el proceso, entonces cuando el estado sea 4 (Terminado) hacemos LO QUE SE NOS OCURRA. 7.  if(_objetus.status==200) { Si el estado del proceso arroja un status 200 significa que a terminado con éxito. 8.  window.alert(_objetus.responseText); En este caso llamamos a la propiedad responseText que tiene lo que el procesador soltó y lo mostramos mediante un alert. 9.  } } } _objetus.send(null); } Y por último enviamos null porque hemos enviado todas las variables que nos interesaban automáticamente al abrir AjaxServletInfo?funcion=pt. _objetus.send(null) : Es obligatorio, si no se envia algo el proceso no funciona Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  53. 53. 5. Nuestro primer ejemplo con AJAX l  Ejecución: l  Resultado: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  54. 54. 5. Nuestro primer ejemplo con AJAX l  Para enviar la petición por el método POST. Nótense las diferencias con el método GET Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  55. 55. 7. Recibiendo los resultados del procesador l  Hay dos maneras en las que se puede recibir la informacion devuelta por el procesador, las propiedades: responseText y responseXML 1.  responseText: Con esta propiedad se reciben los datos de la siguiente manera: Cuando el estado del proceso esté en el nivel 4 vari=objetus.responseText l  Entonces aqui la variable vari contendrá el resultado del procesador. Ejemplo: window.alert(vari) l  Esto es lo que usamos en nuestro primer ejemplo, aqui cuando el proceso llega a nivel 4 creamos un alert con los datos que nos a enviado el procesador. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  56. 56. 7. Recibiendo los resultados del procesador 2.  responseXML: Con esta propiedad el procesador nos devuelve los datos como XML y debemos recorrerlo mediante las funciones del DOM (getEementsByTagName, etc). vari=objetus.responseXML l  Guardamos el documento devuelto en la variable vari para luego recorrerla,en el caso para nuestro ejemplo el documento XML del procesador tendrá la siguente estructura: <serv> <ip>ip</ip> <path>path </path> <date>date</date> </serv> var _ip = vari.getElementsByTagName('ip').item(0).firstChild.data; var _path= vari.getElementsByTagName(‘path').item(0).firstChild.data; var _date = vari.getElementsByTagName('date').item(0).firstChild.data; window.alert(_ip+"n"+_path+"n"+_date) Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  57. 57. 7. Recibiendo los resultados del procesador l  En el lado del cliente: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  58. 58. 7. Recibiendo los resultados del procesador l  En el lado del servidor: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  59. 59. 7. Recibiendo los resultados del procesador l  Ejecución: l  Resultado: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  60. 60. 8. Re-renderizando elementos l  Hasta ahora hemos manejado los datos que nos llegaban del procesador viendolos con un alert (window.alert(respuesta)) pues bien ahora vamos a "embeder" los resultados en nuestras páginas, tenemos 2 maneras de llamar al elemento donde se pondrá el nuevo contenido: l  document.getElementById("elementID") : Llamaremos al elemento por el ID <div id="nombreid" ></div> Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  61. 61. 8. Re-renderizando elementos l  Entonces vamos a cambiar nuestro window.alert(respuesta) por document.getElementById(target) aplicandole la propiedad innerHTML, quedandonos: target="nombreid"; document.getElementById(target).innerHTML = _objetus.responseText; l  document.getElementsByTagName("tagName") : ¡  Llamaremos al elemento por su tag name. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  62. 62. 8. Re-renderizando elementos l  Del lado del cliente: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  63. 63. 8. Re-renderizando elementos l  Resultado: Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  64. 64. 9. Ejemplos l  Ejemplo5 (Añadir Filas a Tabla) ¡  Añade un fila a una tabla con los datos del servidor con Dom l  Ejemplo6 (Mostrar lista en XML) ¡  Muestra una lista de objetos parseados en XML con DOM l  Ejemplo7 (Evento onkeyup) ¡  Escribe datos del servidor al pulsar una tecla sobre una caja de texto l  Ejemplo8 (AutoCompletar) ¡  Autocompleta una caja de texto con una lista de valores de una tabla de la base de datos. Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es
  65. 65. 9. Ejemplos l  Ejemplo5. Cliente Javier Oliver Fulguera -
  66. 66. 9. Ejemplos l  Ejemplo5. Servidor Javier Oliver Fulguera -
  67. 67. 9. Ejemplos l  Ejemplo5. Resultado Javier Oliver Fulguera -
  68. 68. 9. Ejemplos l  Ejemplo6. Cliente Javier Oliver Fulguera -
  69. 69. 9. Ejemplos l  Ejemplo6. Servidor Javier Oliver Fulguera -
  70. 70. 9. Ejemplos l  Ejemplo6. Resultado Javier Oliver Fulguera -
  71. 71. 9. Ejemplos l  Ejemplo7. Cliente Javier Oliver Fulguera -
  72. 72. 9. Ejemplos l  Ejemplo7. Servidor Javier Oliver Fulguera -
  73. 73. 9. Ejemplos l  Ejemplo7. Resultado Javier Oliver Fulguera -
  74. 74. 9. Ejemplos l  Ejemplo8. Cliente ¡  (Se adjunta debido a su extensión) Javier Oliver Fulguera -
  75. 75. 9. Ejemplos l  Ejemplo8. Servidor Javier Oliver Fulguera -
  76. 76. 9. Ejemplos l  Ejemplo8. Resultado Javier Oliver Fulguera -

×