Introduccion a DOM y AJAX - Javier Oliver Fulguera

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

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


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.


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

Estructura de documentos Elementos

<p>Un párrafo</p>

Element: p

Text: Un párrafo

Javier Oliver Fulguera - @javioiful - www.oliverfulguera.es

Estructura de Documentos Subelementos

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


Estructura de Documentos Atributos


Modelo de Herencia
Principales Interfaces


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  ...


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:


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


Ejemplo
Calcular nº párrafos de un documento


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));


Ejemplo de lista de nodos


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


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);
}


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");
}


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...)


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>

Root

Películas

...

Película

codigo=1

diirector=’Victor Fleming’

titulo=’Lo que el
viento se llevó’

actores=’Clark Gable, Vivien
Leigh, Leslie Howard’


Película

codigo=5

diirector=’Giuseppe
Tornatore’

titulo=’Malena’

actores=’Monica Bellucci,
Giuseppe Sulfaro’

l  Resultado:


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>


l  JavaScript en página HTML


l  Resultado


INTRODUCCIÓN A AJAX


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


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.


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.


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.


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.

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:


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


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.


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.


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.


¡  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.


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.


¡  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".


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.


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.

l  Ejemplo:


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.


l  Lado del cliente:
¡  Escribimos es JavaScript necesario para obtener el objeto XMLHttpRequest


¡  Escribimos la función JavaScript a ejecutar:


¡  Escribimos el html para ejecutar la función::


l  Lado del servidor:
¡  Nuestro procesador trabajará según la variable funcion que reciba por el
método GET


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


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

l  Ejecución:

l  Resultado:


l  Para enviar la petición por el método POST.

Nótense las diferencias con el método GET

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.

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)

procesador
l  En el lado del cliente:


procesador
l  En el lado del servidor:


procesador
l  Ejecución:

l  Resultado:


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>


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.


l  Del lado del cliente:


l  Resultado:


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.


9. Ejemplos
l  Ejemplo5. Cliente

Javier Oliver Fulguera -

9. Ejemplos
l  Ejemplo5. Servidor


9. Ejemplos
l  Ejemplo5. Resultado


9. Ejemplos


9. Ejemplos
¡  (Se adjunta debido a su extensión)


9. Ejemplos


Introduccion a DOM y AJAX - Javier Oliver Fulguera

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Introduccion a DOM y AJAX - Javier Oliver Fulguera

Similar a Introduccion a DOM y AJAX - Javier Oliver Fulguera (20)

Último

Último (20)

Introduccion a DOM y AJAX - Javier Oliver Fulguera