, como veremos en breve. getElementsByTagName() Otro modo de recoger elementos es usando getElementByTagName(). Este método toma el tipo de etiqueta (tag) como parámetro y devuelve una colección (o array) de todos los elementos con ese tipo en el documento. Por ejemplo, si quisieras recoger todas las imágenes del documento, podrías hacer esto: x = document.getElementsByTagName("IMG");

X es ahora una colección de referencias a los elementos del documento. Para acceder a un elemento particular en la colección, digamos la primera imagen, podríamos referirnos a ella por su número ordinal o posición dentro de la colección. x = document.getElementsByTagName("IMG"); firstImage = x.item(0) ;

getElementsByTagName() recoge todos los elementos coincidentes tanto si tienen un atributo ID como si no, lo cual es extremadamente útil para etiquetas a las que normalmente no se asignan ID, como

y . getElementById() y getElementsByTagName() son modos muy potentes de atravesar el árbol DOM hacia las ramas más lejanas. En vez de usar document.algo.algoMás para alcanzar un elemento, puedes dirigirte directamente a él, o a elementos de su mismo tipo, con estos dos métodos.

71

Parte 2: Magia Elemental getElementById() y getElementsByTagName() se utilizan para recuperar elementos. Pero los elementos tienen su propio conjunto de métodos que facilitan la manipulación de elementos sin necesidad de realizar scripts. Considera la siguiente etiqueta de imagen para nuestros próximos ejemplos:

Para recuperar este elemento en Java-Script, usaríamos: x = document.getElementById("myImg")

Ahora observa lo que los métodos DOM x tienen disponible para ello: getAttribute() getAttribute() devuelve el valor del atributo que tú le pases. Para obtener el valor SRC de esta etiqueta via Java-Script, podríamos hacer esto: myValue = x.getAttribute("src")

myValue podría entonces contener la cadena "jabberwocky.gif." setAttribute() setAttribute() te permite asignar el valor del atributo que tú le pases. Utiliza dos argumentos: el nombre del atributo y el valor que se le asigna. Para cambiar el valor ALIGN de esta etiqueta de izquierda por el de derecha, podemos hacer esto: x.setAttribute("align","right")

removeAttribute() removeAttribute() simplemente quita el atributo que le pases. Para quitar el atributo ALIGN de esta etiqueta: x.removeAttribute("align")

getElementsByTagName() Hey, espera. ¿No hemos visto esto antes? Lo has pillado. Lo vimos originalmente en el objeto documento, pero cada elemento también dispone de este método. La diferencia es que el método del documento devuelve todas las etiquetas que coincidan para 72

todo el documento, mientras que el método del elemento devuelve las etiquetas coincidentes sólo para ese nodo. Veamos un ejemplo:

Esta es la celda Uno

Esta es la celda Dos

Esta es la celda Tres

Esta es la celda Cuatro

Esta es la celda Cinco

Esta es la celda Seis

Tenemos dos tablas, tableOne y tableTwo respectivamente. Podemos usar getElementsByTagName() con el documento para recuperar todos los elementos de celda de tabla en esta página, de esta forma: x = document.getElementsByTagName("TD")

Lo cuál nos devolverá x como una colección de las seis etiquetas . Pero quizás preferiríamos extraer sólo las etiquetas de tableTwo. Para hacer esto, podemos usar primero getElementById() para recuperar el elemento tabla, y entonces usar getElementsByTagName() para recuperar sólo aquellas celdas de este elemento tabla: x = document.getElementById("tableTwo") tableCells = x.getElementsByTagName("TD")

tableCells se convierte ahora en una colección de sólo tres etiquetas contenidas en tableTwo.

Parte 3: Gran Papá document Echemos un ojo hacia atrás al Gran Nodo Padre de Todas Las Cosas - el documento. Ya sabemos que el documento tiene métodos para recoger cualquier elemento a placer. Pero, ¿qué mas puede hacer? Muchas, muchísimas cosas. El documento puede crear nuevos nodos al vuelo, destruirlos, moverlos alrededor de la página, lo que sea. Es perversamente divertido. Y lo hace sin usar document.write() o constructores de nuevos objetos (No te asustes, esos métodos siguen ahí). Echemos un ojo a los métodos de Script de DOM que permiten que esto ocurra. 73

createElement() createElement() permite crear nuevas etiquetas. ¡Si! ¡Puedes crear estructuras HTML completas de la nada. ¡Sorprende e impresiona a tus amigos! ¡Vamos a hacer uno ahora mismo! miImagen = document.createElement("IMG");

¡Ta-da! ¡Simple como un cubo! ¡Acabamos de crear una nueva etiqueta ! Podemos hacer esto para crear qualquier etiqueta válida que queramos. Pero espera. ¿donde se ha creado la imagen? Aún no está en el documento. ¿Por qué? Por que para cada nuevo elemento que quieras que sea mostrado, debes decirle al documento dónde añadirlo dentro del árbol del mismo documento. Esto es algo importante que debes de entender cuando uses creaeteElement(). No estás insertando HTML como podrías hacerlo con document.write(). A cambio, estás creando un nuevo elemento crudo, esperando a ser definido e insertado como un hijo del nodo document. Está flotando en el Limbo, esperando a que alguien le de forma y figura. En el ejemplo anterior, nuestra etiqueta recien nacida no tenía ni ID ni SRC ni un lugar en el documento aún. Así que definámoslo: miImagen.setAttribute("id","imagenUno"); miImagen.setAttribute("src","jabberwocky.gif");

Ahora todo lo que necesitamos es añadirlo al cuerpo del documento. Para ello, usaremos el método para nodos DOM appendChild(): docBody = document.getElementsByTagName("body").item(0); docBody.appendChild(miImagen);

Fíjate ahora cómo hemos recogido la etiqueta del documento y la hemos usado en vez de añadirlo directamente al documento. El motivo de esto es que es el nodo dentro del documento en el que todo se muestra. appendChild() es un método que funciona en cualquier nodo. En el próximo ejemplo, construiremos una tabla de 3x3 de dentro a fuera, primero crearemos el cuerpo, filas y columnas, y las añadiremos a la tabla principal. Finalmente añadiremos la tabla completa al cuerpo del documento. docBody = document.getElementsByTagName("body").item(0); myTable = document.createElement("TABLE"); myTable.id = "TableOne"; myTableBody = document.createElement("TBODY"); for (i = 0; i < 3; i++){

74

row = document.createElement("TR"); for (j = 0; j < 3; j++){ cell = document.createElement("TD"); row.appendChild(cell); } myTableBody.appendChild(row); } myTable.appendChild(myTableBody); docBody.appendChild(myTable);

Puedes ver por qué tiene sentido construir códigos HTML complejos comenzando primero por los nodos y luego ensamblarlas en estructuras mayores. createTextNode() Hmm. Nuestra tabla está un poco, bien, vacía. Añadamos algo de texto con el método DOM createTextNode(). createTextNode() simplemente crea un nodo genérico que no es otra cosa que una cadena de texto. Puedes añadirlo a otros nodos para darlos contenidos dinámicos. Añadamos algo de código a nuestro bucle crea-celdas. for (j = 0; j < 3; j++){ cell = document.createElement("TD"); textVal = "Cell" + i + "_" + j; textNode = document.createTextNode(textVal); cell.appendChild(textNode); row.appendChild(cell); }

Ahora nuestras celdas tienen algo de texto. ¿Y qué pasa con atributos como BGCOLOR o VALIGN? Podemos asignarlos mediante el método DOM setAttribute(): for (j = 0; j < 3; j++){ cell = document.createElement("TD"); cell.setAttribute("WIDTH","50"); cell.setAttribute("HEIGHT","50"); textVal = "Cell" + i + "_" + j; textNode = document.createTextNode(textVal); cell.appendChild(textNode); row.appendChild(cell); }

Vamos a acabar. Aquí está el código completo para nuestra funión generadora de tablas. function construyeTabla(){ docBody = document.getElementsByTagName("body").item(0); myTable = document.createElement("TABLE"); myTable.id ="TableOne"; myTable.border = 1; myTableBody = document.createElement("TBODY"); for (i = 0; i < 3; i++){ row = document.createElement("TR"); for (j = 0; j < 3; j++){ cell = document.createElement("TD"); cell.setAttribute("WIDTH","50");

75

cell.setAttribute("HEIGHT","50"); textVal = "Cell" + i + "_" + j; textNode = document.createTextNode(textVal); cell.appendChild(textNode); row.appendChild(cell);

} myTableBody.appendChild(row);

} myTable.appendChild(myTableBody); docBody.appendChild(myTable); } window.onload = construyeTabla;

Llamamos a la funcion construyeTabla() en el evento window.onload dado que tenemos que estar seguros de que el elemento existe antes de añadirle una tabla. Prueba a copiar el código y pegarlo entre etiquetas <SCRIPT> en el head de un documento HTML en blanco, y abrelo con IE 5.0 o Netscape 6.0 para ver el efecto completo.

Parte 4: Siguiendo A Tus Nodos ¿Hemos llegado hasta aquí? Bien, aún queda mucho más. El DOM provee de un conjunto de métodos y propiedades que todos los nodos pueden usar. Muchos de ellos tienen que ver con manipulación de nodos hijos o padres. Echemos un ojo: (ACTUALIZADO 11.17.00: La versión final de Netscape 6 contiene un bug que puede colgar al navegador cuando se usen los métodos removeChild o replaceChild, así que proceded con precaución. Ojo al parche -nunca mejor dicho- de la próxima actualización.) Métodos para Nodos appendChild(hijo) Ya lo has visto en acción, de hecho. Permite añadir un nuevo nodo a otro existente. replaceChild(nuevo,viejo) Permite eliminar un nodo y reemplazarlo por otro. Nuevo es el ID del nuevo nodo, y viejo es el ID del nodo que quieres reemplazar. nuevaFila = document.createElement("TR"); cuerpoTabla = document.getElementById("miTabla"); viejaFila = document.getElementByTagName("TR").item(0); cuerpoTabla.replaceChild(nuevaFila,viejaFila);

removeChild(hijo) eliminará el nodo hijo del documento. Hijo es el nombre del nodo que quieres eliminar. El siguiente ejemplo elimina una fila de un elemento Table.

76

cuerpoTabla = document.getElementById("miTabla"); hijoUno = document.getElementByTagName("TR").item(0); tableBody.removeChild(hijoUno)

Piensa que al eliminar un elemento eliminas además sus hijos. insertBefore(nuevo,referencia) te permite insertar un nuevo nodo justo antes que otro. Nuevo es el nuevo nodo que quieres insertar. Referencia es el nombre del nodo antes del cual quieres insertarlo. nuevaFila = document.createElement("TR"); cuerpoTabla = document.getElementById("miTabla"); todasLasFilas = tableBody.getElementByTagName("TR"); ultimaFila = allRows.item(allRows.length-1); tableBody.insertBefore(nuevaFila,ultimaFila);

hasChildNodes() devuelve un valor Booleano true si el nodo tiene hijos. Fíjate en que appendChild(), replaceChild(), removeChild() e insertBefore() sólo aceptan referencias a elementos, no los ID de esos elementos, como argumentos. Por ejemplo, si quisieramos eliminar una etiqueta con el ID "miEtiqueta" la siguiente sintaxis sería incorrecta: removeChild("miEtiqueta");

La correcta sería: removeChild(document.getElementById("miEtiqueta"));

Propiedades de los Nodos En adición a esos métodos, los nodos tienen las siguientes propiedades: nodeName devuelve simplemente el nombre de la etiqueta HTML como una cadena de caracteres. No es lo mismo que el atributo NAME de la etiqueta, si no una cadena que representa el tipo de etiqueta. Por ejemplo, el nodeName de una celda de una tabla devolverá "TD". Esto es útil para saber si una etiqueta es de un tipo particular: x = document.getElementById("miElemento"); if (x.nodeName == "IMG") alert("miElemento es una etiqueta IMG");

nodeType devuelve un entero que representa el tipo de nodo de un elemento (NO el tipo de etiqeta) Las que con toda certeza usarás con más frecuencia serán elementos (1), atributo (2) y texto (3). Esto es útil para saber si un nodo es de un tipo determinado. x = document.getElementById("miElemento"); if (x.nodeType == 1) {alert("miElemento es un nodo de tipo elemento");}

77

else if (x.nodeType == 2) {alert("miElemento es un nodo de tipo atributo");} else if (x.nodeType == 3) {alert("miElemento es un nodo de tipo texto");}

nodeValue refleja el valor de un nodo dado. Esto se usa comunmente para obtener y cambiar el contenido o valor de un nodo. Para recoger el valor del quinto nodo en nuestro elemento: a = document.getElementById("miElemento"); b = a.childNodes.item(4).nodeValue;

Para los nodos de atributo, nodeValue devuelve el valor del atributo. Para nodos de tipo texto, nodeValue devuelve el texto como una cadena. parentNode es una referencia al nodo padre del nodo en cuestión. Es útil cuando no estás seguro de donde estás o de cual es el nodo padre de otro nodo: x = document.getElementById("miElemento"); xParent = x.parentNode;

childNodes es una colección de los nodos hijos de un nodo en particular. Puedes usar esto para saber el número de hijos que tiene un nodo, o acceder a caulquiera de sus hijos mediante el índice de esa colección. Por ejemplo, para conocer el número de hijos que tiene un nodo, podrías hacer esto: a = document.getElementById("miElemento"); b = a.childNodes.length;

Para acceder al tercer nodo hijo del elemento: a = document.getElementById("miElemento"); b = a.childNodes.item(2);

firstChild y lastChild apuntan directamente al primer y último nodo de la colección childNodes. Es, sencilamente, una manera de acceder a ellos. a = document.getElementById("miElemento"); PrimerNodoDea = a.firstChild; UltimoNodoDea = a.lastChild;

Parte 5: Sumario Uaaaaaaj. Hay un montón de material para recordar. Las siguientes tablas recogen los distintos métodos DOM y propiedades que hemos cubierto. Métodos del Documento: getElementById(id)

Devuelve una referencia al elemento llamado. 78

Devuelve una colección de todos los getElementsByTagName(nombre) elementos coincidentes en el documento. Crea un nuevo elemento del tipo createElement(nombre) nombrado. createTextNode(texto) Crea un nuevo nodo de puro texto. Métodos de los Elementos: Devuelve el valor del atributo pasado como parámetro. setAttribute(id,valor) Asigna un nuevo valor al atributo. Elimina el atributo pasado como removeAttribute(id) parámetro junto con su valor. Devuelve una colección de todos los getElementsByTagName(nombre) elementos coincidentes en el nodo. getAttribute(id)

Métodos de los Nodos: Añade un nuevo nodo hijo al nodo. Elimina un nodo hijo del removeChild(hijo) nodo . Reemplaza un nodo hijo antiguo replaceChild(nuevoHijo,viejoHijo) por otro nuevo. Inserta un nodo antes del insertBefore(nuevoHijo,referencia) anterior en la jerarquía. Devuelve un true booleano si hasChildNodes() el nodo tiene nodos hijo. appendChild(hijo)

Propiedades de los Nodos: nodeName nodeType nodeValue parentNode

Contiene el nombre del nodo como una cadena de texto. Contiene el tipo de nodo como un entero. Contiene el valor de un nodo en formato útil. La referencia del nodo padre de este nodo. Una colección que contiene referencias a los nodos childNodes hijos de este nodo en cuestion. La referencia al primer nodo hijo en la colección firstChild childNodes. La referancia al último nodo hijo en la coleción lastChild childNodes. Conclusión Como probablemente estés viendo, la funcionalidad del W3C DOM hace posible tener documentos extremadamente dinámicos. Cuando el resto de los navegadores se adecúen al standard, nuestras vidas como desarrolladores serán mucho más sencillas. 79

Podremos abandonar nuestros scripts de detección de navegadores, y ser libres de programar codigo auténticamente multi navegador sin dolores de cabeza. Es posible. Actualmente, depende de ti (¿qué significa esto, en cualquier caso?) seguir aprendiendo las especificaciones DOM-1 y CSS-1. Hemos cubierto la mayor parte del material importante aquí, pero hay mucho más de lo que ofrece el DOM. Emplea algo más de tiempo en el sitio del W3C, familiarízate con las especificaciones y estarás listo para hacerlas pasar por el aro. Feliz scripting! Aprende Más - Comenta este tutorial. - Encuentra algo más sobre Netscape 6 en developer.netscape.com - Aprende acerca del DOM, CSS y soporte standard en http://www.w3c.org/ - Unete a la causa del Web Standards Project http://www.webstandards.org/

80

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%> <sql:setDataSource driver="org.gjt.mm.mysql.Driver" url="jdbc:mysql://localhost/dietas" var="dietas" user="root" password="arsa0607"/> <sql:query var="cursor" dataSource="${pageScope.dietas}" sql="select * from dietas"> <style type="text/css"> select{ position:absolute; left:120px; } .comidas{ overflow: auto; } <script language="javascript"> var ccantidad=0; var ccalorias=0; var idalimento="" var comida="comida"; var cuentalinea=0; function cambiaComida(lacomida) { comida=lacomida;

81

} function eventoCantidad(event) { if(window.event.keyCode==13) { //alert(idalimento); oo=document.getElementById(idalimento); var cadena="p"+idalimento; // alert(oo.value+ccalorias+"...."+cadena); oo2=document.getElementById(cadena); //alert("id "+oo2.id); var calculo=oo.value * ccalorias; totallinea=document.createTextNode(calculo+""); oo2.appendChild(totallinea); } } function creaPlato(alimento) { // alert("alimneto" +alimento.text); var cc= "tabla"+comida; tablade=document.getElementById(cc);//'tabladesayuno'); var ccc=comida+"cuerpotabla" cuerpota=document.getElementById(ccc);//'cuerpotabla'); linea= document.createElement("TR"); nplato= document.createElement("P"); nplato.style.fontSize=10; nplato.style.color="green"; nombrenuevoplato=document.createTextNode(alimento.text); cuentalinea++; idalimento=alimento.text+cuentalinea; nplato.appendChild(nombrenuevoplato); columna1= document.createElement("TD"); columna1.appendChild(nplato); linea.appendChild(columna1) cplato= document.createElement("P"); cplato.style.fontSize=10; cplato.style.color="green"; caloriasnuevoplato=document.createTextNode(alimento.value); ccalorias=alimento.value; cplato.appendChild(caloriasnuevoplato); columna2= document.createElement("TD"); columna2.appendChild(cplato); linea.appendChild(columna2) cantidad= document.createElement("INPUT"); cantidad.type="text" cantidad.id=alimento.text+cuentalinea; columna3= document.createElement("TD"); columna3.appendChild(cantidad); linea.appendChild(columna3); columna4= document.createElement("TD"); parrafototal= document.createElement("P"); parrafototal.id="p"+alimento.text+cuentalinea;

82

columna4.appendChild(parrafototal); linea.appendChild(columna4); cuerpota.appendChild(linea); tablade.appendChild(cuerpota); oo=document.getElementById(alimento.text+cuentalinea); oo.onkeypress = eventoCantidad; }

Peso Ideal

* from

* from

* from

* from



85



86

A

A J

X

Con el siguiente ejercicio completamos todas las técnicas que se utilizan en la tecnología AJAX, también conocida como la nueva Web 2.0. Estas técnicas XML y el objeto XMLHttpRequest nos va a permitir obtener los datos que queramos visualizar en la página web dese un fichero XML que o bien se encuentre en el cliente , descargando el mismo desde la web o solicitando la información en formato XML desde un servlet de java. El objeto XMLHttpRequest nos permitirá solicitar la información XML justo en el momento en el que lo deseemos y así modificar la página (utilizando DOM) en el justo momento. De forma que no tendremos que emplear formularios que llamen a servlet o jsp que generen toda la página de nuevo si no que nos traeremos del servidor ( o desde un fichero xml ) la información que necesitemos en ese momento. Ejemplo:

Haremos el ejercicio de tres formas: 87

La primera desde una página html utilizamos un ojeto XMLHttpRequest para solicitar los datos de un servlet que devuelve la información generando código XML. Una vez recibido el código, con los datos xml, utilizamos DOM para accder al mismo y visualizarlo dentro de un TextArea.

La segunda desde una página html utilizamos un ojeto XMLHttpRequest para

solicitar los datos de un lee información de una base de datos genera un fichero XML y lee del mismo la información. La información que lee se la devuelve al cliente. Una vez recibido el código, con los datos xml, utilizamos DOM para accder al mismo y visualizarlo dentro de un TextArea.

La tercera utiliza la posibilidad que tiene javascript para cargar en memoria el

contenido de un fichero xml por medio de la instrucción : <xml id="writersXML" src="tiendaropa.xml">. A continuación llamamos a una función por medio de la cual utilizando el DOM leemos el contenido del objeto que hemos creado con la información xml : var imagenes= new Array(); var precios= new Array(); var tallas= new Array(); var colores= new Array(); function cargaXML() { var myXml; myXml=document.all("writersXML").XMLDocument;

escribirImagen=myXml.getElementsByTagName("imagen"); escribirPrecio=myXml.getElementsByTagName("precio"); escribirTallas=myXml.getElementsByTagName("tallas"); escribirColores=myXml.getElementsByTagName("colores") …. …. } Si no implementamos esta solución estudia el fichero ofertas.htm. de la aplicación carrito.

88

La primera

FICHERO leeXML.HTML Desde este fichero se llama a los distintos servlet que realizan la tarea de leer el codigo xml. Tabién se encarga de visualizar los datos. <script type="text/javascript"> function cargar() { idField=document.getElementById('idField'); //var url = "http://localhost:8080/alquiler/trabajarconXstream"; var url = "http://localhost:8080/alquiler/LeerCliente"; //var url = "http://localhost:8080/alquiler/devuelveXml.jsp"; if (window.XMLHttpRequest) { alert("window.XMLHttpRequest"); req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); alert("Microsoft.XMLHTTP"); } alert("url..............: "+url) req.open("POST", url, true); req.onreadystatechange = callback; req.send(null); } function callback() { //alert("callback") alert("req.readyState"+req.readyState); if (req.readyState == 4) { if (req.status == 200) { // update the HTML DOM based on whether or not message is valid parseMessage(); } } } function parseMessage() { var message = req.responseXML.getElementsByTagName("message")[0]; alert("Mensaje recibido "+message); alert("Mensaje recibido "+ req.responseXML) var todo=""; for(j=0;j<req.responseXML.getElementsByTagName("libro").length;j++) { var message = req.responseXML.getElementsByTagName("libro")[j]; for(i=0;i<message.childNodes.length;i++) 89

{ alert("Elemento :"+message.childNodes[i].tagName +"..."+message.childNodes[i].firstChild.nodeValue) todo=todo+message.childNodes[i].tagName +"..."+message.childNodes[i].firstChild.nodeValue+"\n"; } } alert(todo); // setMessage(message.childNodes[0].nodeValue); setMessage(todo); } function setMessage(message) { alert(" setMessage" +message) ccaja=document.getElementById('caja'); ccaja.value=message; /* var p=message.indexOf("-"); if(p==-1){ var cajaNombre = document.getElementById("Nombre"); cajaNombre.value= message ; } else { var nombreApellidos=message.substr(0,p); var pago=message.substr(p+1,message.length); var cajaNombre = document.getElementById("Nombre"); cajaNombre.value= nombreApellidos ; var cajaPago = document.getElementById("cpago"); cajaPago.value= pago ; }*/ }

/* var request=null; //alert("Carga xml"); if(window.XMLHttpRequest){ alert("Soporto XMLHttpRequest"); } else if(window.ActiveXObject) { alert("Soporto ActiveXObject"); request=new ActiveXObject("Microsoft.XMLHTTP"); if(! request){ alert("NO microsoft.XMLHTTP"); 90

} else { request=new ActiveXObject("Msxml2.XMLHTTP"); alert("SI microsoft.XMLHTTP");} } var url = "LeerCliente"; request.open("POST", url, true); request.onreadystatechange = callback; request.send(null); function callback() { alert("callback") //alert("req.readyState"+req.readyState); if (request.readyState == 4) { if (request.status == 200) { // update the HTML DOM based on whether or not message is valid parseMessage(); } } } function parseMessage() { // alert("parseMessage") var message = request.responseXML.getElementsByTagName("message")[0]; alert("Mensage :"+ message +" recibido"); //setMessage(message.childNodes[0].nodeValue); } }*/

<script type="text/javascript"> /* var url = "LeerCliente?nif=" + escape(idField.value); if (window.XMLHttpRequest) { //alert("window.XMLHttpRequest"); req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); // alert("Microsoft.XMLHTTP"); } //alert("url..............: "+url) req.open("GET", url, true); 91

req.onreadystatechange = callback; req.send(null); } function callback() { //alert("callback") //alert("req.readyState"+req.readyState); if (req.readyState == 4) { if (req.status == 200) { // update the HTML DOM based on whether or not message is valid parseMessage(); } } } function parseMessage() { // alert("parseMessage") var message = req.responseXML.getElementsByTagName("message")[0]; setMessage(message.childNodes[0].nodeValue); } function setMessage(message) { // alert(" setMessage" +message) var p=message.indexOf("-"); if(p==-1){ var cajaNombre = document.getElementById("Nombre"); cajaNombre.value= message ; } else { var nombreApellidos=message.substr(0,p); var pago=message.substr(p+1,message.length); var cajaNombre = document.getElementById("Nombre"); cajaNombre.value= nombreApellidos ; var cajaPago = document.getElementById("cpago"); cajaPago.value= pago ; } } */ FICHERO LeerCliente.java Servlet que genera código XML que envía a la página leeXml.html package alquiler; import javax.servlet.*; import javax.servlet.http.*; 92

import javax.servlet.http.HttpSession; import java.io.*; import java.util.*; import java.sql.*; public class LeerCliente extends HttpServlet { static final private String CONTENT_TYPE = "text/html"; public void init(ServletConfig config) throws ServletException { } //Procesar una petición HTTP Get public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("Estroy eb el Servlet.." + request.getMethod() +".."+request.getPathInfo()); String dato="Loly"; dato=""; dato=dato+""; // dato=dato+""; dato=dato+""; dato=dato+""; dato=dato+""; dato=dato+" Introducion a XML XSL"; dato=dato+"<editorial>Anaya"; dato=dato+""; dato=dato+""; dato=dato+"Programacion en Widnows 2000"; dato=dato+"<editorial>Paraninfo"; dato=dato+""; dato=dato+""; System.out.println("DATO: "+dato); dato="<message>"+dato+""; response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write(dato);

93

} //Procesar una petición HTTP Post public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } //Limpiar recursos public void destroy() { } } Para que fucnione en tomcar necesitamos implementar el siguiente codigo en el fichero web.wml <web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/webapp_2_4.xsd" version="2.4"> alquiler <servlet> <servlet-name>LeerCliente <servlet-class>alquiler.LeerCliente <servlet-mapping> <servlet-name>LeerCliente /LeerCliente <servlet> <servlet-name>lc <servlet-class>alquiler.lc <servlet-mapping> <servlet-name>lc /lc <servlet> <servlet-name>trabajarconXstream <servlet-class>alquiler.trabajarconXstream <servlet-mapping> <servlet-name>trabajarconXstream /trabajarconXstream

94

La segunda Aquí solamente necesitamos el servlet trabajarconXstream.java que leera la información desde una base de datos , la copiará en un fichero xml , lo leera y devolver al información a leeXml.html para que la visualice. Fichero trabajarconXstream.java package alquiler; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.http.HttpSession; import java.io.*; import java.util.*; import java.sql.*; import com.thoughtworks.xstream.XStream; import org.gjt.mm.mysql.*; import javax.sql.rowset.WebRowSet; import java.awt.HeadlessException; import com.sun.rowset.WebRowSetImpl; public class trabajarconXstream extends HttpServlet { static final private String CONTENT_TYPE = "text/html"; WebRowSet wr ; private java.sql.Connection cn; private java.sql.ResultSetMetaData estructura; boolean nuevo_registro; private String isql=""; // Objetos para trabajar con WerRowSet String UsuarioBaseDeDatos="root"; String PasswordBaseDeDatos="alpiap"; String DriverBaseDeDatos = "org.gjt.mm.mysql.Driver"; String OrdenBaseDeDatos = "select * from clientes"; FileWriter fGrabacion; FileReader fLectura; int [] keyCols ={1};

String urlBd = "jdbc:mysql://localhost/datos"; WebRowSet receiver; public void init(ServletConfig config) throws ServletException {

try { 95

Class.forName(DriverBaseDeDatos); Connection con = DriverManager.getConnection(urlBd, UsuarioBaseDeDatos, PasswordBaseDeDatos); // Create a WebRowSet and set properties. WebRowSet sender = new WebRowSetImpl(); sender.setUrl(urlBd); sender.setUsername(UsuarioBaseDeDatos); sender.setPassword(PasswordBaseDeDatos); sender.setCommand(OrdenBaseDeDatos); sender.setKeyColumns(keyCols); // Now populate the WebRowSet sender.execute(); fGrabacion = new FileWriter("g:/glXML/clientes.xml"); sender.writeXml(fGrabacion); fGrabacion.flush(); fGrabacion.close(); sender.close(); javax.swing.JOptionPane.showMessageDialog(null, "Fin Grabación XML"); } catch (HeadlessException ex) { } catch (IOException ex) { } catch (SQLException ex) { } catch (ClassNotFoundException ex) { } try { receiver = new WebRowSetImpl(); fLectura = new FileReader("f:/glXML/clientes.xml"); receiver.readXml(fLectura); // receiver.acceptChanges(); } catch (HeadlessException ex) {ex.printStackTrace(); } catch (FileNotFoundException ex) {javax.swing.JOptionPane.showMessageDialog(null, "Fichero XML Sin Datos -- Ejecute la Opción del Menu : Crear XML"); } catch (SQLException ex) {ex.printStackTrace(); }

96

} //Procesar una petición HTTP Get public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("Estroy +".."+request.getServletPath()); String dato="";

eb

el

Servlet..Xstream"

+

request.getMethod()

dato=dato+"";

try { receiver.beforeFirst(); while (receiver.next()) { dato=dato+""; dato=dato+""+receiver.getString("Nombre")+""; dato=dato+"<editorial>"+receiver.getString("Direccion")+""; dato=dato+""; } dato=dato+""; } catch (SQLException ex) { } System.out.println("DATO: "+dato); dato="<message>"+dato+""; response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write(dato);

} //Procesar una petición HTTP Post public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } //Limpiar recursos public void destroy() { } }

97

Propiedades y eventos del objeto Onreadystatechange Es una función de rellamada. La función de esta propiedad se llama siempre que cambia readyState readyState Es un número que puede tomar los siguiente valores: 0 Significa sin inicializar, es decir que aun no se ha ejecutado el método open() 1 Significa cargando, que aún no se ha llamado a send(). 2 Significa cargado, es decir ya se ha llamado al método send(). 3 Significa interactuando y responseText contiene datos parciales. 4 Significacompletado responseText. Es una cadena. Representa la respuesta recibida desde el servidor web. responseXML. Es Objeto document de DOM. Son los datos enviados desde le servidor en formato XML. status Código de estado de la respuesta . 200 significa respuesta recibida correctamente y 404 respuesta de no encontrado el servidor o la página web solicitada. statusText Es una cadena con el mensaje asociado al código de status de la respuesta HTTP. abort() Cancela la petición http. open(metodo POSt o GET,cadena url,true/false) Prepara la petición que se va a enviar al servidor mediante el protocolo de comunicación http. True/false especifica si es una conexión asincrona o no. send(cadena) Envía la petición http.send(null); Ejemplo: var url = http://localhost:8080/alquiler/LeerCliente if (window.XMLHttpRequest) { alert("window.XMLHttpRequest"); req = new XMLHttpRequest();} else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); alert("Microsoft.XMLHTTP");} req.open("POST", url, true); req.onreadystatechange = callback; req.send(null); } function callback() { alert("req.readyState"+req.readyState); if (req.readyState == 4) { if (req.status == 200) { parseMessage();} } function parseMessage() { var message = req.responseXML.getElementsByTagName("message")[0]; alert("Mensaje recibido "+message);}

}

98

JSON

La alternativa a XML busca más información Fichero de datos: datos.jso [({"NOMBRE":"Gabriel Lucia Velazquez","EDAD":6}), ({"NOMBRE":"Angel Lucia Velazquez","EDAD":8}), ({"NOMBRE":"Luis Lucia Velazquez","EDAD":8})]; Fichero html con el código JavaScript que procesa los datos leidos del fichero datos.jso:json.htm <%@ Language=JavaScript %> <xml id="articulosXML" src="datos.jso"> <script language="javascript" type="text/javascript"> myXml=document.all("articulosXML").XMLDocument; function carga() { var part=myXml.getElementsByTagName("datos"); alert(part.length); dato=part.item(0).firstChild.nodeValue; alert(dato); var objeto = eval(dato); var nr = objeto.length ; for(i=0;i
Edad : "+objeto[i].EDAD);

} }

99