Trabajando Con Ajax en Múltiples Plataformas

Trabajando con Ajax en mútiples plataformas | www.group64bits.co.cc | Kamilo Cervantes S.

Trabajando con Ajax en multiples plataformas

A continuación presentaremos un ejercicio en el cual se hace uso de Ajax para acceder a los datos de un documento XML desde páginas HTML. En la primera parte se usará el método mas común: el objeto ActiveXObject. Luego nos daremos cuenta de los problemas de usar este objeto para crear la transacción Ajax, y se dará una alternativa de solución a este problema.

Tenemos el siguiente documento XML que estructura una serie de películas con sus respectivos datos, tales como título, escritores, productores, director, actores, etc.

<?xml version="1.0" standalone="no"?> <!DOCTYPE movies SYSTEM "Movies.dtd">

<movies> <movie type="comedy" rating="PG-13" review="5" year="1987"> <title>Raising Arizona</title> <writer>Ethan Coen</writer> <writer>Joel Coen</writer> <producer>Ethan Coen</producer> <director>Joel Coen</director> <actor>Nicolas Cage</actor> <actor>Holly Hunter</actor> <actor>John Goodman</actor> <comments>A classic one-of-a-kind screwball love story.</comments> </movie>

<movie type="comedy" rating="R" review="5" year="1988"> <title>Midnight Run</title> <writer>George Gallo</writer> <producer>Martin Brest</producer> <director>Martin Brest</director> <actor>Robert De Niro</actor> <actor>Charles Grodin</actor> <comments>The quintessential road comedy.</comments> </movie>

<movie type="mystery" rating="R" review="5" year="1995"> <title>The Usual Suspects</title>


<writer>Christopher McQuarrie</writer> <producer>Bryan Singer</producer> <producer>Michael McDonnell</producer> <director>Bryan Singer</director> <actor>Stephen Baldwin</actor> <actor>Gabriel Byrne</actor> <actor>Benicio Del Toro</actor> <actor>Chazz Palminteri</actor> <actor>Kevin Pollak</actor> <actor>Kevin Spacey</actor> <comments>A crime mystery with incredibly intricate plot twists.</comments> </movie>

<movie type="sci-fi" rating="PG-13" review="4" year="1989"> <title>The Abyss</title> <writer>James Cameron</writer> <producer>Gale Anne Hurd</producer> <director>James Cameron</director> <actor>Ed Harris</actor> <actor>Mary Elizabeth Mastrantonio</actor> <comments>A very engaging underwater odyssey.</comments> </movie> </movies>

Necesitamos crear 5 paginas html en las cuales:

– Se listen las películas con todos sus datos consecutivamente (ListMovies1.html)– Se listen las películas solo mostrando el título y los comentarios sobre la película

(ListMovies2.html)– Se filtren las películas de tal forma que se muestren solo las de comedia

(FilterMovies.html)– Se listen los actores (ListActors.html)– Se haga una búsqueda con los siguientes parámetros: el atributo como aparece en el xml(ej.:

title, actor ) y el valor de tal atributo. Esto con el fin de mostrar el resto de los datos de la película como resultado de búsqueda. (SearchMovies.html)

El método común

Tomaremos como objeto de análisis el archivo ListMovies1.html, pueden descargar todos los


archivos en el siguiente enlace: http://www.mediafire.com/?y3f764wx2qmktiq

1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> 23 <html> 4 <head> 5 <title>List Movies 1 Example HTML Document</title> 6 7 <script language="JavaScript"> 8 var xmldoc; 910 function LoadDoc() { 11 xmldoc = new ActiveXObject("microsoft.xmldom"); 12 xmldoc.load("Movies.xml"); 13 } 1415 function ListMovies() { 16 LoadDoc(); 17 root = xmldoc.documentElement; 18 for (i = 0; i < root.childNodes.length; i++) { 19 DOCCONTENT.innerHTML += root.childNodes.item(i).text + "<br>"; 20 } 21 } 22 </script> 23 </head> 2425 <body> 26 Click the button to list the movies in the Movies XML document. 27 <br> 28 <input type="button" value="List Movies" onclick="ListMovies()"> 29 <div id="DOCCONTENT"></div> 30 </body> 31 </html>

Nos interesa mirar el script que hace la mágia de la linea 7 a la 22, tambien tener en cuenta la línea 28, la cual crea un botón que al hacer click ejecuta el método FilterMovies(), y la línea 29, la cual tiene un div con el id "DOCCONTENT".

El script debe hacer dos cosas: primero cargar el XML usando Ajax y segundo, una vez que el XML esta cargado en el DOM de la página, en español, que se puede acceder a los datos del XML desde javascript, debe seleccionar los datos a mostrar y añadirlos a la página.

Lo primero se logra con el método LoadDoc(), aquí se crea en la variable xmldoc un objeto xmldom a través de la clase ActiveXObject. Luego con el método load() que recibe como parámetro el documento XML a cargar. Listo, que fácil no?... pero como cosa rara Microsoft siempre hace sus maldades y ese objeto ActiveXObject es exclusivo de Internet Explorer por lo tanto los demás navegadores no podrán ejecutar ese script por lo cual en otro navegador que no sea IE, no funcionará nada de nada. Puede verlo por si mísmo en este enlace:

http://static-ganatool.99k.org/desarrolloweb/ejercicio3b/ListMovies1.html

http://static-ganatool.99k.org/desarrolloweb/ejercicio3b/ListMovies1.html

http://www.mediafire.com/?y3f764wx2qmktiq


O también puede probarlo localmente. Recuerde permitir la ejecución de ActiveX cuando lo esté ejecutando en Internet Explorer.Aquí se hace evidente el problema que queremos solucionar, pero lo trataremos más adelante.En cuanto a seleccionar y mostrar los datos del XML, de ésto se encarga el método ListMovies(), el cual luego de cargar el XML (línea 16) obtiene la raiz del XML (línea 17), recorre los nodos hijos y en cada uno de ellos le añade al div DOCCONTENT el valor de cada nodo hijo con un salto de línea (línea 18-21). De esta forma añadirá en DOCCONTENT todos los datos de las películas cuando se presione el botón.

Un método mejorado

Bien ahora explicaremos como hacer que esta mágia de Ajax funcione en todos los navegadores y plataformas. Para hacerlo hay dos formas:Una forma es inicializar el objeto Ajax dependiendo del navegador, algo asi como esto:

// AJAX code for Mozilla, Safari, Opera etc. if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = xmlhttpChange; xmlhttp.open("GET", url, true); xmlhttp.send(null); } // AJAX code for IE else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); if (xmlhttp) { xmlhttp.onreadystatechange = xmlhttpChange; xmlhttp.open("GET", url, true); xmlhttp.send(); } }

Mas información sobre éste método en este enlace: http://www.justin-cook.com/wp/2006/11/03/how-to-load-xml-data-with-javascript-ajax-tutorial/

La otra manera es usando algun framework de javascript que soporte Ajax, para este caso seleccionamos JQuery ya que es uno de los mejores frameworks de javascript que existen en el mercado hoy en día. (Los archivos de JQuery estan incluidos en los documentos del ejercicio).

Tomamos como objeto de análisis el archivo ListMovies1.html adaptado para trabajar con JQuery:

1 <html> 2 <head> 3 <title>List Movies 1 Example HTML Document</title> 4 <link href="css/style.css" media="screen" rel="stylesheet"

http://www.justin-cook.com/wp/2006/11/03/how-to-load-xml-data-with-javascript-ajax-tutorial/

http://www.justin-cook.com/wp/2006/11/03/how-to-load-xml-data-with-javascript-ajax-tutorial/


type="text/css" /> 5 <script type="text/javascript" src="jquery/jquery-1.5.js"></script> 6 <script type="text/javascript" src="js/parsexml.js"></script> 7 <script language="JavaScript"> 8 $(document).ready(function(){ 9 var p = new parseData(5); 10 $('#mybutton').click(function(){ 11 p.parseXML(); 12 }); 13 }); 14 </script> 15 </head> 1617 <body> 18 <div id="links"> 19 <ul> 20 <li><a href="FilterMovies.html">FilterMovies</a></li> 21 <li><a href="ListActors.html">ListActors</a></li> 22 <li><a href="ListMovies1.html">ListMovies1</a></li> 23 <li><a href="ListMovies2.html">ListMovies2</a></li> 24 <li><a href="SearchMovies.html">SearchMovies</a></li> 25 <li><a href="Movies.xml">Movies.xml</a></li> 26 </ul> 27 </div> 28 Click the button to list the movies in the Movies XML document. 29 <br> 30 <input type="button" value="List Movies" id="mybutton" /> 31 <div id="output"></div> 32 </body> 33 </html>

De este podemos resaltar la línea 5, en la cual se incluye el script de JQuery (con esto podremos hacer uso de todas las funcionalidades de JQuery), la línea 6 en la cual se incluye el script parsexml.js, este es el script que hace la mágia (se explicará con mas detalle más adelante), las líneas 7 a 14, las cuales explicaremos en el siguiente párrafo, la linea 30 la cual crea el botón pero esta vez no tiene un evento onclick, sino tiene un id “mybutton” y finalmente la línea 31, un div con id “output” (similar al DOCCONTENT).

El script que se encuentra de la línea 7 a la 14 lo que hace es lo siguiente: inicializa una clase llamada parseData en la variable p y le pasa como parámetro el número 5, (línea 9) recuerden ese número. Luego le ordena al boton “mybutton” en el evento click la ejecución del método parseXML() de la clase parseData a través de la variable p. Todo esto sucede al momento de cargar la página ya que la línea 8 es la versión de JQuery del evento window.onload.

Ahora analicemos el script parsexml.js:

En este archivo se ha definido una clase llamada parseData la cual recibe en el constructor un parámetro numérico (línea 4).


1 /** 2 * @author kamilo 3 */ 4 var parseData = function(val){ 5 this.opcode = val;

6 parseData.prototype.parseXML = function(){ 7 switch(this.opcode){ 8 case 1: $.ajax({type: "GET",url: "data.xml",dataType: "xml",success: this.parseXML1}); break; 9 case 2: $.ajax({type: "GET",url: "data.xml",dataType: "xml",success: this.parseXML2}); break; 10 case 3: $.ajax({type: "GET",url: "Movies.xml",dataType: "xml",success: this.parseXML3}); break; 11 case 4: $.ajax({type: "GET",url: "Movies.xml",dataType: "xml",success: this.parseXML4}); break; 12 case 5: $.ajax({type: "GET",url: "Movies.xml",dataType: "xml",success: this.parseXML5}); break; 13 case 6: $.ajax({type: "GET",url: "Movies.xml",dataType: "xml",success: this.parseXML6}); break; 14 case 7: $.ajax({type: "GET",url: "Movies.xml",dataType: "xml",success: this.parseXML7}); break; 15 } 16 }

[...]

48 parseData.prototype.parseXML5 = function(xml){ 49 $(xml).find('movie').each(function(){ 50 $("#output").append($(this).find("title").text() + "<br />"); 51 $(this).find("writer").each(function(){ 52 $("#output").append($(this).text() + "<br />"); 53 }); 54 $(this).find("producer").each(function(){ 55 $("#output").append($(this).text() + "<br />"); 56 }); 57 $("#output").append($(this).find("director").text() + "<br />"); 58 $(this).find("actor").each(function(){ 59 $("#output").append($(this).text() + "<br />"); 60 }); 61 $("#output").append($(this).find("comments").text() + "<br />"); 62 }); 63 }

[...]

102 }

Para más información sobre cómo crear clases en javascript ver este enlace: http://www.anieto2k.com/2006/09/25/programacion-orientada-a-objetos-en-javascript/

http://www.anieto2k.com/2006/09/25/programacion-orientada-a-objetos-en-javascript/


Dependiendo del valor que se le pase al constructor de la clase, éste ejecutará uno u otro método gracias al switch del método parseXML() (línea 6 – 16) en este método se inicializa el objeto Ajax usando JQuery de esta manera:

$.ajax({type: "GET", // tipo de petición (GET,POST,[...])url: "Movies.xml", // origen del archivo xmldataType: "xml", success: this.parseXML5 //método a ejecutar cuando se complete la petición

});

En cada case del switch se cambia el valor asociado al parámetro success para que se ejecute un método diferente cada vez. En el archivo tambien se usan dos archivos xml diferentes por tal motivo el parámetro url no esta asociado al mismo valor siempre.

Hasta ahora lo que se ha hecho es llamar al constructor de la clase con el parámetro 5, el cual entra en el método parseXML y ejecuta el método parseXML5, ahora explicaremos de que trata éste método.

El método parseXML5 (línea 48 – 63) se encarga de seleccionar los datos a mostrar y mostrarlos. Para ello hace uso de algunos métodos de JQuery como find(), el cual sirve para buscar una etiqueta en un objeto xml, each(), el cual sirve para repetir una función cada vez que encuentre la etiqueta (en este caso particular), append(), el cual agrega código html dentro de un elemento html, text(), que devuelve el texto de un elemento seleccionado, y tambien los selectores JQuery, que tienen la forma $(selector), cumplen la misma función que document.getElementById sólo que no se restringe a id's sino tambien a elementos, objetos, referencias, clases css y muchos otros tipos de selectores.

Primero se busca en el objeto XML la etiqueta movie y cada vez que la encuentre agrega lo siguiente (línea 49):

– (línea 50) Como el título no se repite nunca, agrega el texto de la etiqueta “title” bajo la etiqueta “movie” actual al div “output”.

– (línea 51 – 53) Como pueden haber varios escritores, busca en cada etiqueta “writer” y agrega el texto de la etiqueta al div “output”.

– (línea 54 – 56) Como pueden haber varios escritores, hace lo mismo que el paso anterior para la etiqueta “producer”.

– (línea 57) Como solo puede haber un director, hace lo mismo que el primer paso para la etiqueta “director”.

– (línea 58 – 60) Como pueden haber varios actores, busca en cada etiqueta “actor” y agrega el texto de la etiqueta al div “output”.

– (línea 61) Como solo existe un registro de comentarios, hace lo mismo que el primer paso para la etiqueta “comments”.

De ésta forma hemos mejorado la implementación del código y está garantizada la operatividad de la página en la mayoría de navegadores y plataformas comúnes. Sólo queda probar a ver que tal. Lo puede probar en este enlace:


http://static-ganatool.99k.org/desarrolloweb/ejercicio3/ListMovies1.html

O tambien ejecutando localmente la página. Las demás páginas funcionan bajo los mísmos principios, sólo queda jugar con los datos en la implementación de los métodos de selección y presentación.

http://static-ganatool.99k.org/desarrolloweb/ejercicio3/ListMovies1.html

Trabajando Con Ajax en Múltiples Plataformas

Documents

Transcript of Trabajando Con Ajax en Múltiples Plataformas