Ajax

ndice general_
1. CONCEPTOS BSICOS.......................................................................1 2. EL MOTOR DE AJAX: EL OBJETO XMLHttpRequest ...........................13 3. EL COMBUSTIBLE DE AJAX: XML .....................................................27 4. EL DESARROLLO DE UNA APLICACIN AJAX ...................................49 5. FACILITANDO EL TRABAJO CON AJAX.............................................75 GLOSARIO ...........................................................................................97 REFERENCIAS WEB ............................................................................101 BIBLIOGRAFA ..................................................................................103
1
ndice_
Conceptos bsicos
1.1. QU ES AJAX? ..............................................................................3 1.2. USO DE AJAX .................................................................................3 1.3. VENTAJAS QUE OFRECE AJAX ........................................................7 1.4. INCONVENIENTES DE AJAX ...........................................................8 1.5. EL MOTOR DE AJAX........................................................................9
1
1.1. QU ES AJAX? un lenguaje de programacin, como muchos creen.
Conceptos bsicos
AJAX (Asynchronous JavaScript And XML o JavaScript y XML asncrono) es una tcnica de desarrollo para crear aplicaciones web basada en tres tecnologas ya existentes y no
Aunque este trmino fue creado en 2005, las tecnologas sobre las que se sustenta no son tan recientes. Los primeros antecedentes se remontan al ao 1998 con una propuesta por parte de Microsoft que podemos considerar el precedente de AJAX, el Scripting Remoto. Las tecnologas que forman AJAX son las que a continuacin describimos:
Las pginas Web que son parte de la aplicacin Web en AJAX se crean mediante HTML y hojas de estilos en cascada (CSS). No obstante, tambin se puede utilizar XHTML como alternativa para HTML.
AJAX va a hacer uso del Modelo de Objetos de Documento, en ingls Document Object Model, conocido como DOM. Dicho modelo permite el acceso a los elementos de una pgina web (tablas, formularios, capas, etc.), mediante JavaScript y posibilita tratar los elementos como objetos que poseen propiedades y mtodos. Tambin ser necesario el uso del objeto XMLHttpRequest definido por JavaScript.
La transmisin de la informacin entre las pginas (parte cliente) y el servidor se har de manera asncrona mediante XML. Sin embargo, hay que indicar que AJAX no slo permite el intercambio de informacin mediante XML, ya que tambin se pueden utilizar ficheros de texto plano, textos pre-formateados, HTML, etc.
1.2. USO DE AJAX Como hemos adelantado, AJAX es la suma de tres tecnologas que nos van a facilitar la obtencin de datos de un servidor de manera asncrona. Este hecho nos va a permitir la construccin de aplicaciones Web que no tengan que ser recargadas y renderizadas al completo. Es decir, slo se va a recargar una parte de la pgina con la informacin obtenida desde el servidor.
1
Para entender mejor el funcionamiento de AJAX, veamos un ejemplo: que existen.
Conceptos bsicos
Imaginemos que hacemos una aplicacin para una compaa de seguros de automvil en la que el usuario tiene que seleccionar su modelo de vehculo. Aunque este proceso pueda parecer sencillo en un principio, no lo es tanto debido a la gran cantidad de marcas, modelos de una misma marca y versiones de un mismo modelo (diesel o gasolina, 3 5 puertas, etc.)
Las dos posibilidades que tenemos para crear la aplicacin que nos permita realizar este proceso de seleccin son las siguientes:
Sin saber AJAX y usando el modelo clsico para desarrollo de una aplicacin Web, realizaremos los siguientes pasos: 1. Lo primero es crear una pgina con un formulario y una lista desplegable que nos muestre el listado de marcas disponibles. 2. Cuando el usuario selecciona su marca, este formulario mediante una accin de Submit se reenviar al servidor. 3. El servidor obtendr de la base de datos los modelos existentes para la marca elegida y devolver otra pgina formada por otro formulario con otra lista despegable con los modelos de automvil disponibles. 4. Del mismo modo, el usuario volver a seleccionar el modelo y mediante otra accin de Submit se enviar al servidor para que procese toda la informacin y devolver de nuevo una tercera pgina con las versiones para el modelo de automvil elegido anteriormente. 5. Por ltimo, el usuario seleccionar la versin del modelo y lo devolver al servidor.
1
En el siguiente grfico podemos ver esquemticamente este proceso: Navegador de Internet Aplicacin Web
Conceptos bsicos
Cliente
Peticin HTTP
Respuesta en HTML+CSS
Servidor Web
Base de datos Servidor
Modelo clsico
Usando AJAX, el proceso que deberamos crear es el siguiente: 1. Al igual que el caso anterior, se mostrara inicialmente una lista desplegable de marcas de automviles que se venden en la actualidad. Dicha lista se generara realizando una peticin al servidor y rellenndola con los datos recogidos. 2. Una vez seleccionada una marca, en la pgina se mostrara otra lista desplegable pero sin que la pgina haya sido recargada, es decir, esta segunda lista se habra creado desde la nada en un lugar especfico marcado por nosotros en la pgina. Dicha lista se completara usando AJAX para obtener la informacin en segundo plano desde el servidor de los modelos de automvil. 3. Elegido el modelo, crearamos una nueva lista desplegable desde la nada que sera rellenada usando otra peticin al servidor.
1
Grficamente, el modelo que usa AJAX es el siguiente: Navegador de Internet Aplicacin Web Llamada JavaScript Motor AJAX HTML+CSS+DOM
Conceptos bsicos
Cliente
Peticin HTTP
Respuesta en XML
Servidor Web
Base de datos
Servidor
Modelo AJAX
Las principales diferencias que podemos observar al usar AJAX son:
Todas las operaciones se realizan sin que la pgina deba ser recargada al completo.
El usuario no pierde en ningn momento la referencia de donde est, l slo ve que en la pgina aparecen nuevos elementos pero no percibe una recarga completa de una pgina, slo la inclusin en ella de nuevos objetos (en el ejemplo anterior eran listas desplegables).
Al solicitar al servidor datos y no la pgina al completo, la respuesta y el procesamiento para mostrar la informacin son ms rpidos ya que dicho procesamiento se realiza en el navegador del cliente usando JavaScript.
El hecho de tener el control de lo que solicitamos al servidor y de cundo nos devuelve los datos, posibilita la creacin de mensajes informativos que son mostrados al usuario para que no piense que hay errores provocados por la tardanza en la carga, debidos a algn problema en el servidor, etc.. En nuestro ejemplo, un posible mensaje para
1
modelos de vehculos para la marca seleccionada. soliciten.
Conceptos bsicos
mostrar a un usuario podra ser: Espere unos segundos mientras cargamos los
En resumen, utilizando AJAX vamos a poder crear interfaces de usuario ms amenas, interactivas y completas. Estas interfaces posibilitarn que los usuarios estn ms informados y puedan acceder de una manera ms rpida y efectiva a la informacin que
Por ltimo, Indicar que una de las grandes empresas que ms estn apostando por AJAX para crear sus aplicaciones Web es Google Inc. conocida por su famoso buscador (http://www.google.com). Google Inc. aunque posee otras aplicaciones como:
Gmail (http://www.gmail.com). Se trata de un sistema de correo online que se basa por entero en AJAX para la presentacin de los correos electrnicos.
Google Maps (http://maps.google.com). Es un sistema global para ver los mapas de ciudades, carreteras y lugares de todo el planeta que utiliza tambin AJAX para su presentacin.
1.3. VENTAJAS QUE OFRECE AJAX Una de las ventajas de AJAX radica en la forma transparente de comunicacin con el servidor, ya que, tcnicamente, esta comunicacin se realiza en segundo plano y de una manera asncrona, es decir, sin que el usuario se percate a simple vista de que se est transfiriendo y solicitando informacin a un servidor. Por este motivo, haciendo uso de AJAX vamos a conseguir crear aplicaciones Web interactivas que puedan cambiar y actualizarse sin necesidad de que dicha pgina tenga que ser recargada al completo. Para conseguir esta funcionalidad, AJAX usa DOM para acceder a los elementos de la pgina web, escrita en HTML, y as poder cambiarlos en funcin de la respuesta obtenida desde el servidor. Normalmente, las peticiones realizadas suelen ser pequeas en tamao, de ah la rapidez de respuesta. Otra ventaja muy importante que presenta esta tcnica es la portabilidad. Como AJAX se basa en los estndares de cada tecnologa que usa, no empleando nada de nueva creacin y, adems, la mayora de los navegadores de Internet implementan de una u otra forma dichas tecnologas, nos aseguramos de que las aplicaciones creadas usando esta tcnica funcionen de una manera correcta en todos ellos.
1
mundial son:
Conceptos bsicos
Los navegadores actuales que soportan AJAX y que suman el 99% de los empleados a nivel
Microsoft Internet Explorer desde la versin 5.0 y todos aquellos navegadores que usen el mismo motor que Internet Explorer.
Todos los navegadores basados en el motor Gecko. Por ejemplo: Mozilla Firefox, Mozilla, Netscape Camino, Ephipany, Netscape 7.1, etc.
Aqullos que se basan en el API KHTML. Algunos de ellos son: Safari de Apple desde la versin 1.2, Konqueror desde la versin 3.2, etc.
El navegador Opera desde la versin 8.0.
1.4. INCONVENIENTES DE AJAX Como es lgico, AJAX tambin tiene algunos inconvenientes. Veamos a continuacin los ms relevantes:
Una aplicacin puede no ser vista en determinados navegadores de Internet que no tengan soporte para alguna de las tecnologas necesarias para AJAX.
Aunque JavaScript sea soportado por la mayora de los navegadores, en ocasiones est deshabilitado por defecto, por lo que se debe indicar al usuario cmo activarlo.
El botn Atrs, tal y como est desarrollado en los navegadores actuales, slo muestra pginas completas que han sido cargadas pero no cambios en una misma pgina que es lo que se realiza con la tcnica de desarrollo de AJAX. Por tanto, este botn deja de tener lgica y, por tanto, deja de emplearse.
Una aplicacin mal implementada puede dar lugar a que el usuario se confunda. Por ejemplo, imaginemos que tenemos que solicitar informacin a un servidor para rellenar una lista desplegable. Si no usamos un sistema de mensajes para informar al alumno de que se estn cargando los datos o de que se ha producido un error, el usuario podra llegar a pensar que no est haciendo lo correcto o que se ha equivocado realizando alguna accin.
1
continuamente informados de los procesos que se llevan a cabo. 1.5. EL MOTOR DE AJAX
Conceptos bsicos
Por tanto, a la hora de crear una aplicacin usando AJAX, debemos ser conscientes de todas estas limitaciones y desarrollar un sistema que sea slido, estable y sin errores para que todos nuestros usuarios puedan acceder a la informacin que les queremos presentar y estn
Una vez estudiados las ventajas e inconvenientes que presenta AJAX, nos vamos a centrar en ver cmo funciona realmente y cul es el motor que mueve toda la maquinara de AJAX. Aunque HTML+CSS nos proporciona el medio para presentar los contenidos mediante pginas Web y XML nos ofrece un medio estandarizado para transmitir la informacin, es la tecnologa JavaScript la que verdaderamente nos aporta la posibilidad de crear la comunicacin asncrona de la que hacamos referencia en el apartado de ventajas. Por este motivo, podemos afirmar que el verdadero motor de AJAX es JavaScript. Haciendo un smil con un automvil, podramos decir que HTML+CSS representa el chasis de nuestro vehculo, XML el combustible y JavaScript es el motor que mueve todo. En una aplicacin AJAX, JavaScript nos va a permitir acceder a los elementos de la pgina usando DOM y nos posibilita la comunicacin empleando un objeto implementado en la mayora de los navegadores denominado XMLHttpRequest. El objeto XMLHttpRequest es un API implementado en el navegador Web, es decir, en la parte cliente, que puede ser invocado desde varios lenguajes de programacin, entre los que se encuentra, como es obvio, JavaScript. Tcnicamente, est desarrollado para crear un canal de comunicacin independiente entre el servidor y la pgina Web que se est mostrando en el navegador. La W3C, World Wide Web Consortium, que es la organizacin internacional que crea los estndares de Internet, en Abril del 2006 cre la primera especificacin completa para este objeto. Dicha especificacin marca las caractersticas mnimas que deben implementar los navegadores que afirmen que poseen la posibilidad de usar dicho objeto para que funcione perfectamente la aplicacin Web.
1
modelo de una aplicacin AJAX: Navegador de Internet Aplicacin Web Pgina Web (HTML+CSS)
Conceptos bsicos
En estos momentos, con esta nueva informacin, podemos ampliar el grfico sobre el
Cliente
DOM Funciones JavaScript
Motor AJAX (XMLHttpRequest)
Peticin HTTP
Respuesta en XML
Servidor Web
Base de datos
Servidor
Modelo AJAX extendido
10
1
recuerde_
DOM+XMLHttpRequest.
Conceptos bsicos
AJAX es una unin de tres tecnologas ya existentes: HTML+CSS, XML y
HTML+CSS nos proporcionan el medio para crear una pgina Web.
XML nos suministra una forma de enviar y recibir informacin en un formato estndar.
JavaScript, mediante DOM y el objeto XMLHttpRequest, nos da la posibilidad de acceder a los elementos de la pgina Web para su modificacin y establece el camino de acceso al servidor.
La mayor ventaja de AJAX es que posibilita una comunicacin asncrona con el servidor.
Haciendo uso de AJAX vamos a conseguir crear aplicaciones Web interactivas que puedan cambiar y actualizarse sin necesidad de que la pgina deba ser recargada desde cero; slo se tendrn que recargar partes de ella.
No todos los navegadores tienen soporte para AJAX o alguna de sus tecnologas por lo que una aplicacin puede no funcionar.
El objeto XMLHttpRequest, encargado de la comunicacin entre el navegador y el servidor, tiene su propia especificacin, desarrollada por la W3C, con los requisitos mnimos que debe cumplir.
11
2
ndice_
El motor de AJAX: El objeto XMLHttpRequest
2.1. 2.2. 2.3. 2.4. 2.5.
CONCEPTOS BSICOS.................................................................15 CREAR UNA INSTANCIA DEL OBJETO XMLHttpRequest ...............15 MTODOS DEL OBJETO XMLHttpRequest.....................................17 PROPIEDADES DEL OBJETO XMLHttpRequest..............................20 EJEMPLO DE USO DE MTODOS Y PROPIEDADES ........................22
13
2
2.1. CONCEPTOS BSICOS Es un API que implementan los navegadores web.
Antes de empezar, recordemos qu es y cul es la funcin del objeto XMLHttpRequest:
Su funcin es crear un canal de comunicacin entre la pgina web que se muestra en el navegador de Internet del cliente y el servidor.
El objeto XMLHttpRequest se puede invocar desde distintos lenguajes de programacin. Nosotros nos vamos a centrar en el uso de este objeto bajo la perspectiva de la tcnica de desarrollo AJAX, por tanto, utilizaremos el lenguaje JavaScript para acceder a este objeto. Por otra parte, y como ya estudiamos, la W3C, en Abril del 2006, cre la primera especificacin completa para el objeto XMLHttpRequest. Sin embargo, muchos navegadores ya haban implementado el objeto de una u otra forma. Por ello, a la hora de crear una nueva instancia del objeto en el cdigo JavaScript de la pgina, vamos a necesitar tener en cuenta estas implementaciones si queremos conseguir aplicaciones compatibles entre los distintos navegadores. Para realizar este proceso vamos a tener que utilizar una funcin JavaScript que nos permita encapsular la creacin de la instancia del objeto.
2.2. La
CREAR UNA INSTANCIA DEL OBJETO XMLHttpRequest funcin JavaScript que nos va a permitir crear una instancia del objeto
XMLHttpRequest se va a llamar crearMotorAJAX. La funcin crearMotorAJAX posee las siguientes caractersticas: No necesita recibir ningn parmetro. Permite crear varias instancias del objeto XMLHttpRequest Devuelve una referencia a una nueva instancia del objeto XMLHttpRequest Posibilita el funcionamiento de una aplicacin AJAX en todos los navegadores que tengan implementado el objeto XMLHttpRequest
15
2
El cdigo fuente de la funcin ser el siguiente: function crearMotorAJAX(){ var motorAJAX=false; try{
/*Creamos la variable que nos permite instanciar el objeto*/
/*Caso 1: Comprobamos que sea Internet Explorer con el motor de XML actualizado*/
motorAJAX = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){

/*No se ha cumplido el caso 1 */
try{
/*Caso 2: Comprobamos que sea Internet Explorer con el motor antiguo de XML instalado*/
motorAJAX = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){

/*No se ha cumplido el caso 2 por lo que asignamos al objeto el valor "falso"*/
motorAJAX = false; } }
/*Si no se cumplen el caso 1 ni el caso 2, comprobamos que exista un objeto llamado XMLHttpRequest*/
if (!motorAJAX && typeof XMLHttpRequest!='undefined') {

/*Existe el objeto XMLHttpRequest, por lo que se crea una nueva instancia de este objeto y se asigna a nuestra variable*/
motorAJAX = new XMLHttpRequest(); }

/*Por ltimo, devolvemos la variable que tiene instanciado el objeto XMLHttpRequest*/
return motorAJAX; }
16
2
similar a la mostrada a continuacin:
Por tanto, para obtener una instancia a un objeto XMLHttpRequest en nuestra pgina web, sea cual sea el navegador del cliente, slo tenemos que realizar una llamada JavaScript
var objAJAX= crearMotorAJAX(); Una vez definido el modo de creacin, pasamos a describir los mtodos y propiedades que son obligatorios que implemente un navegador web que tenga soporte para el objeto XMLHttpRequest.
2.3.
MTODOS DEL OBJETO XMLHttpRequest
Los mtodos del objeto XMLHttpRequest nos van a posibilitar acceder a funciones especficas para realizar determinadas operaciones necesarias para establecer la comunicacin con el servidor. Veamos a continuacin que mtodos posee este objeto: abort() Descripcin. Sirve para detener la peticin que se est ejecutando al servidor. Ejemplo: objAJAX.abort(); getAllResponseHeaders() Descripcin. Devuelve todas las cabeceras HTTP de la respuesta de una peticin. El resultado es una cadena de texto formada por los pares etiqueta: valor. Ejemplo: alert( objAJAX.getAllResponseHeaders() );
17
Resultado de la ejecucin del cdigo de ejemplo:
getResponseHeader(nombre_de_la_cabecera) Descripcin. Devuelve la cabecera http, indicada por el parmetro
nombre_de_la_cabecera, de la respuesta de una peticin al servidor. El resultado es una cadena de texto formada por el par etiqueta: valor. Ejemplo: alert( objAJAX. getResponseHeader('Content-Type') ); Resultado de la ejecucin del cdigo de ejemplo:
open(mtodo, URL, {[asncrono], [usuario], [clave]}) Descripcin. Permite establecer una conexin con la URL especificada usando uno de los siguientes mtodos: GET, POST, HEAD o DELETE.
18
2
Este mtodo puede tener cinco atributos: Mtodo URL o o o o o o Es obligatorio. Es obligatorio. No es obligatorio
Puede ser: GET, POST, HEAD o DELETE. Puede ser una ruta relativa o completa. Determina el modo en el que se ejecutar una peticin al servidor. Puede tener dos valores true o false. true: la peticin se hace en segundo plano y el script se sigue ejecutando sin esperar la respuesta del servidor. false: la peticin espera la respuesta del servidor para seguir ejecutando el script. No es obligatorio. Se emplea para pasar un nombre de usuario. No es obligatorio. Se emplea para pasar una clave de usuario.
Asncrono
Usuario Clave
o o o o
Ejemplo: objAJAX.open('GET','ejemplo.php', false);
send(contenido) Descripcin. Enva la peticin al servidor. El parmetro contenido sirve para enviar ms informacin. En el caso de que no se necesite enviar nada, se utiliza el valor null. Ejemplo: objAJAX.send(null);
setRequestHeader(cabecera, valor) Descripcin. Establece el valor de una cabecera HTTP con los valores indicados por los parmetros cabecera y valor.
19
2
Ejemplo: 2.4. PROPIEDADES DEL OBJETO XMLHttpRequest
objAJAX. setRequestHeader ('Content-Type', 'text/html');
El objeto XMLHttpRequest nos proporciona una serie de propiedades a las que vamos a poder acceder para obtener informacin sobre el estado y la respuesta de la comunicacin que se establece con el servidor. Seguidamente, estudiaremos con ms detalle las propiedades que estn a nuestra disposicin y su uso: status Descripcin. Devuelve un cdigo numrico que representa el estado de la peticin al servidor. Los cdigos numricos ms comunes son: 200 = La peticin ha sido correcta. 404 = No se ha encontrado la pgina solicitada. 403 = Se ha prohibido el acceso a la pgina solicitada. 304 = La pgina solicitada est cacheada. 414 = Al hacer una peticin usando el mtodo GET, los datos enviados han superado los 512 bytes de longitud. Ejemplo: var estado_peticion=objAJAX.status; statusText Descripcin. Devuelve una cadena de texto asociada al cdigo numrico que representa el estado de la peticin al servidor.
o o o o o
20
2
o o o o o 200 => OK 404 => Not Found 403 => Forbidden 304 => Not Modified 414 => Request-URI Too Long
Para los cdigos numricos ms comunes, la cadena devuelta es:
Ejemplo: var txt_estado_peticion=objAJAX.statusText;
responseText Descripcin. Devuelve el resultado de la peticin realizada al servidor como una cadena de texto. Ejemplo: var resultado_peticion=objAJAX.responseText;
responseXML Descripcin. Devuelve el resultado de la peticin realizada al servidor en formato XML. La respuesta recibida es procesada y se asigna a un nuevo objeto que es un documento XML. Este tipo de objeto documento XML posibilita el acceso a la informacin contenida utilizando los mtodos y propiedades del DOM. Ejemplo: var objeto_xml =objAJAX.responseXML;
21
2
readyState conexin con el servidor. Los posibles valores que puede tomar son: 0 = Sin inicializar. 1 = Cargando la informacin. o o o
Descripcin. Devuelve un cdigo numrico que representa el estado de la
2 = Cargado, aunque sin haber incorporado la informacin recibida a los objetos que corresponden. 3 = Incorporando la informacin. 4 = Completado.
o o
Ejemplo: var estado_servidor=objAJAX.readyState;
onreadystatechange Descripcin. Indica la funcin que se va a ejecutar cada vez que se produce el evento de cambio en el estado de la conexin con el servidor, es decir, cada vez que cambia el valor readyState. Ejemplo: objAJAX.onreadystatechange=function(){ alert('Nuevo valor de readyState : ' + objAJAX.readyState); };
2.5.
EJEMPLO DE USO DE MTODOS Y PROPIEDADES
Para afianzar los conocimientos sobre el objeto XMLHttpRequest, crearemos un sencillo ejemplo con el cual observaremos cmo usar los mtodos y acceder a las propiedades que ya hemos estudiado. Con el ejemplo pretendemos conseguir crear una pgina HTML que muestre, usando JavaScript, los valores devueltos por los mtodos y las propiedades tras realizar una peticin a otra pgina alojada en un servidor.
22
2
1. Pgina: ajax_ejemplo1.htm Cdigo Fuente: <HTML> <HEAD></HEAD> <BODY></BODY> </HTML> 2.
Las fases de desarrollo de nuestro ejemplo son las enumeradas seguidamente: Creamos una pgina HTML con una mnima estructura.
Insertamos un script JavaScript en el HEAD con la funcin crearMotorAJAX vista anteriormente. Pgina: ajax_ejemplo1.htm Cdigo Fuente: <HTML> <HEAD> <script language=javascript> function crearMotorAJAX(){ } </script> </HEAD> <BODY></BODY> </HTML>
3.
Insertamos un script JavaScript en el BODY con el cdigo necesario para crear una nueva instancia del objeto XMLHttpRequest y usar sus propiedades y mtodos.
Pgina: ajax_ejemplo1.htm Cdigo Fuente: <BODY> <script language=javascript> var objAJAX=crearMotorAJAX(); /*creamos una nueva instancia*/ /*Definimos la funcin que se ejecuta al cambiar el estado de la conexin*/ objAJAX.onreadystatechange=function(){
23
2
} objAJAX.send(null); /*enviamos la peticin*/
/*Al cambiar, mostramos el valor de la propiedad*/ alert('Nuevo valor de readyState : ' + objAJAX.readyState); objAJAX.open('GET', 'test.htm', false); /*Solicitamos la pgina test.htm*/
/*Escribimos en el cuerpo de la pgina las distintas propiedades y mtodos*/ document.write('Mtodo getAllResponseHeaders():<hr/>'); document.write(objAJAX.getAllResponseHeaders()); document.write('<br/><br/>Mtodo getResponseHeader(\'Content-Type\'):<hr/>'); document.write(objAJAX.getResponseHeader('Content-Type')); document.write('<br/><br/>Propiedad readyState:<hr/>'); document.write(objAJAX.readyState); document.write('<br/><br/>Propiedad status:<hr/>'); document.write(objAJAX.status); document.write('<br/><br/>Propiedad statusText:<hr/>'); document.write(objAJAX.statusText); document.write('<br/><br/>Propiedad responseText:<hr/>'); document.write('<textarea>'+objAJAX.responseText+'</textarea>'); /*Al utilizar la propiedad responseXML, obtenemos un objeto, por lo que no podemos mostrar su valor, aunque s el tipo de dato con el que tratamos. Para ello, hacemos uso de la funcin typeof() de JavaScript*/ document.write('<br/><br/>Propiedad responseXML:<hr/>'); document.write(typeof(objAJAX.responseXML)); </script> </BODY> </HTML>
24
2
continuacin:
Una vez creada esta pgina, ya slo nos queda visualizarla usando un navegador de Internet. El resultado que obtenemos es la pgina web que podemos observar a
25
2
recuerde_
navegadores web. entre el navegador y el servidor.
El objeto XMLHttpRequest es un API que est implementada por los
La funcin del objeto XMLHttpRequest es crear un canal de comunicacin
Debido a las distintas implementaciones que hacen los navegadores del objeto XMLHttpRequest, es necesario crear una funcin JavaScript que encapsule el acceso al objeto.
Dispone de mtodos y propiedades a las que se puede acceder usando JavaScript.
La propiedad responseXML devuelve un objeto que es del tipo documento XML al que se puede acceder usando el rbol DOM.
26
3
ndice_
El combustible de AJAX: XML
3.1. 3.2. 3.3. 3.4.
INTRODUCCIN .........................................................................29 NOCIONES BSICAS SOBRE XML ................................................29 DATOS BSICOS DE UN DOCUMENTO XML .................................31 OBTENCIN DE INFORMACIN DE UN XML MEDIANTE DOM y JAVASCRIPT ............................................................................32 3.4.1. Saber si un nodo tiene hijos ............................................33 3.4.2. Obtener un nodo hijo.......................................................35 3.4.2.1. Propiedad firstchild ............................................35 3.4.2.2. Propiedad lastChild.............................................37 3.4.2.3. Propiedad nextSibling.........................................38 3.4.2.4. Propiedad previousSibling ..................................39 3.4.3. Obtener el nodo padre .....................................................40 3.4.4. Obtener una lista de nodos ..............................................41 3.4.5. Obtener el nmero de hijos de un nodo ...........................43 3.4.6. Obtener informacin de un nodo......................................45 3.4.7. Obtener informacin de un atributo .................................46
27
3
3.1. INTRODUCCIN tecnologas, siendo XML una de ellas.
Como ya hemos adelantado en temas anteriores, AJAX es una tcnica basada en tres
La tecnologa XML permite transferir informacin entre el cliente y el servidor, pero cmo accedemos a la informacin recogida del servidor en formato XML desde la parte cliente. La respuesta a esta cuestin es a travs de una combinacin de las otras tecnologas en las que se basa AJAX: DOM y JavaScript. Por tanto, DOM (Modelo de Objetos de Documento) no slo va a posibilitar acceder a los elementos de una pgina HTML, sino que va a permitir acceder a los distintos elementos (nodos, atributos, etc.) que componen un documento XML.
3.2.
NOCIONES BSICAS SOBRE XML
Antes de comenzar a estudiar en profundidad el acceso a un documento XML usando DOM y JavaScript, recordemos algunas nociones bsicas sobre XML: XML es el acrnimo de eXtensible Markup Language, es decir, lenguaje de marcado extensible. Fue desarrollado por la W3C y se basa en un lenguaje de etiquetas. Las etiquetas que forman el documento, delimitan elementos. Un elemento es tambin conocido por el nombre de nodo. Las etiquetas deben seguir una estructura estrictamente jerrquica con un solo nodo raz. En un documento XML, se diferencias maysculas y minsculas. Los elementos pueden contener: Atributos. Otros elementos. Atributos y otros elementos.
29
3
Un valor de tipo texto. un listado de empleados de una empresa:
La funcionalidad de los atributos es aadir caractersticas a un elemento.
Seguidamente, podemos observar un ejemplo de un documento XML que va a representar
<?xml versin=1.0 encoding=ISO-8859-1?> <EMPRESA> <EMPLEADOS> <EMPLEADO id=1> <DNI>12345678A</DNI> <NOMBRE>Pedro Rosa</NOMBRE> </EMPLEADO> <EMPLEADO id=2> <DNI>98765432Z</DNI> <NOMBRE>Alonso Bravo</NOMBRE> </EMPLEADO> </EMPLEADOS> </EMPRESA>
Observemos como est formado el documento XML: El elemento EMPRESA es el nodo raz del documento y es nico. El nodo raz est compuesto de un elemento: EMPLEADOS. ste, a su vez, est formado por varios elementos. El elemento EMPLEADO tiene siempre la misma estructura. Est compuesto de dos elementos: DNI y NOMBRE que contienen un valor de tipo texto. La caracterstica que hace nico a cada nodo EMPLEADO es el valor del atributo id.
30
3
Grficamente, podemos ver el organigrama que forma este XML: EMPRESA
Nodo Raz
Nodo Hijo EMPLEADOS
EMPLEADO
Nodos hermanos
EMPLEADO
id DNI NOMBRE Atributo
id DNI NOMBRE
3.3.
DATOS BSICOS DE UN DOCUMENTO XML
Una vez que hemos recordado las nociones bsicas de XML, pasamos a estudiar cmo podemos acceder a la informacin contenida en un documento XML. Para realizar esta accin vamos a utilizar DOM y JavaScript. JavaScript nos proporciona una serie de funciones, mtodos y propiedades, basadas en DOM, para poder obtener la informacin contenida en un XML. Basndonos en el XML visto anteriormente y en el esquema grfico de lo que representa la informacin, podemos decir que los datos bsicos que vamos a necesitar obtener son los siguientes: Saber si un nodo tiene hijos. Obtener un nodo hijo. Obtener el nodo padre. Obtener una lista de nodos. Nmero de hijos de un nodo. Informacin de un nodo.
31
3
Informacin de un atributo. proporcionar estos datos. 3.4.
A continuacin, veamos las funciones, mtodos y propiedades JavaScript que nos van a
OBTENCIN DE INFORMACIN DE UN XML MEDIANTE DOM y JAVASCRIPT
Con el objetivo de poder asimilar mejor el funcionamiento de esta tecnologa, usaremos ejemplos prcticos que aplicaremos al documento XML visto en el apartado anterior. Para comenzar, consideraremos que hemos recibido del servidor, usando el objeto XMLHttpRequest, una respuesta en formato XML que corresponde con el documento XML visto anteriormente:
<script language=javascript> var objAJAX=crearMotorAJAX(); /* .... Se realiza la comunicacin con el servidor usando el objeto XMLHttpRequest .... */ //Asignamos a una variable la respuesta en formato XML procedente del servidor var docXML=objAJAX.responseXML; </script>
Mediante este cdigo, creamos una variable docXML que va a contener el objeto XML resultado de la respuesta recibida desde el servidor.
32
3
contendra el siguiente XML: var docXML=<EMPRESA> <EMPLEADOS> <EMPLEADO id="1"> <DNI>12345678A</DNI> <NOMBRE>Pedro Rosa</NOMBRE> </EMPLEADO> <EMPLEADO id="2"> <DNI>98765432Z</DNI> <NOMBRE>Alonso Bravo</NOMBRE> </EMPLEADO> </EMPLEADOS> </EMPRESA>
En nuestro caso, si pidiramos entrar dentro del objeto y leerlo en modo texto, la variable
Una vez que tenemos el documento en la variable, pasamos a obtener los datos bsicos del XML. 3.4.1. Saber si un nodo tiene hijos Cuando se intenta obtener la informacin de un XML, tenemos que ser conscientes de lo que conocemos de dicho XML. En principio, nosotros vamos a saber de antemano la estructura de un documento XML pero no toda la informacin que contiene. Por ejemplo, en nuestro caso, la informacin siempre se estructura de la siguiente forma:
EMPRESA
EMPLEADOS
EMPLEADO 1
EMPLEADO n
33
3
realizar una peticin al servidor, en formato XML.
Como vemos, la estructura es conocida, pero no sabemos cuntos empleados va a tener la empresa, ya que esta informacin ser obtenida de una base de datos y suministrada, tras
Por otro lado, observamos que el nmero de empleados es un dato que puede variar pero que tambin puede ser nulo, es decir, que al realizar una peticin al servidor, ste no devuelva ningn empleado porque no existan. En casos as, es siempre recomendable comprobar si el nodo que suponemos que es el padre, tiene hijos. La funcin hasChildNodes() va a ser la encargada de suministrarnos esta informacin. En el siguiente recuadro podemos ver sus caractersticas:
hasChildNodes() Devuelve: true = si el nodo actual tiene hijos. false = si el nodo actual no tiene hijos.
Ejemplo: Comprobar que el nodo <EMPRESA> tiene hijos Cdigo fuente: function ComprobarHijos (){ alert("Tiene hijos: "+ docXML.hasChildNodes()); } Resultado: Aplicado a nuestro documento XML de ejemplo, el resultado que obtenemos al llamar a esta funcin es:
34
3
3.4.2. Obtener un nodo hijo
Existen 4 propiedades que nos van a permitir acceder a cualquier nodo hijo: firstChild: permite acceder al primer nodo hijo desde el nodo padre. lastChild: permite acceder al ltimo nodo hijo desde el nodo padre. nextSibling: permite acceder al primer hermano del nodo hijo seleccionado. previousSibling: permite acceder al anterior hermano del nodo hijo seleccionado.
En los prximos apartados, estudiaremos cada una de estas propiedades de una manera ms amplia. 3.4.2.1. Propiedad firstchild La propiedad fisrtChild posibilita el acceso al primer nodo hijo que tenga un nodo padre. Posee estas caractersticas: Es una propiedad de solo lectura, es decir, no podemos asignar a un documento XML cul va a ser el primer nodo hijo para un padre especfico. Esta propiedad devuelve una referencia al nodo elegido y no a su contenido.
firstChild Devuelve:
Objeto: que representa el nodo hijo.
Ejemplo 1: Obtener el primer nodo de la variable docXML Cdigo fuente:
function ObtenerPrimerNodo (nodo){ var nodoHijo=nodo.firstChild; } ObtenerPrimerNodo(docXML);
35
3
Resultado: <EMPRESA> <EMPLEADOS> <EMPLEADO id="1"> <DNI>12345678A</DNI> <NOMBRE>Pedro Rosa</NOMBRE> </EMPLEADO> <EMPLEADO id="2"> <DNI>98765432Z</DNI> <NOMBRE>Alonso Bravo</NOMBRE> </EMPLEADO> </EMPLEADOS>
Aplicado a la variable docXML, el resultado sera un objeto con la misma informacin:
Ejemplo 2: Obtener el primer nodo de <EMPLEADOS> Cdigo fuente: function ObtenerPrimerNodoEmpleado(){ var nodoEmpleado=docXML.firstChild.firstChild.firstChild; } ObtenerPrimerNodoEmpleado(); Resultado: El resultado sera un objeto con esta informacin: <EMPLEADO id="1"> <DNI>12345678A</DNI> <NOMBRE>Pedro Rosa</NOMBRE> </EMPLEADO>
36
3
3.4.2.2. Propiedad lastChild Las caractersticas principales de esta propiedad son:
La propiedad lastChild posibilita el acceso al ltimo nodo hijo que tenga un nodo padre.
Es una propiedad de solo lectura, es decir, no podemos asignar a un documento XML cual va a ser el ltimo nodo hijo para un padre especfico. Esta propiedad devuelve una referencia al nodo elegido y no a su contenido.
lastChild Devuelve: Objeto: que representa el nodo hijo. Ejemplo 1:
Obtener el ltimo nodo de la variable docXML Cdigo fuente: function ObtenerUltimoNodo (nodo){ var nodoHijo=nodo.lastChild; } ObtenerUltimoNodo(docXML); Resultado: Aplicado a la variable docXML, el resultado sera un objeto con la misma informacin ya que slo hay un nodo y, por tanto, el primero coincide con el ltimo: <EMPRESA> <EMPLEADOS> <EMPLEADO id="1"> <DNI>12345678A</DNI> <NOMBRE>Pedro Rosa</NOMBRE> </EMPLEADO> <EMPLEADO id="2"> <DNI>98765432Z</DNI> <NOMBRE>Alonso Bravo</NOMBRE> </EMPLEADO> </EMPLEADOS> </EMPRESA>
37
3
Ejemplo 2: Obtener el ltimo nodo de <EMPLEADOS> Cdigo fuente: function ObtenerUltimoNodoEmpleado(){ var nodoEmpleado=docXML.firstChild.firstChild.lastChild; } ObtenerUltimoNodoEmpleado(); Resultado: El resultado sera un objeto con esta informacin: <EMPLEADO id="2"> <DNI>98765432Z</DNI> <NOMBRE>Alonso Bravo</NOMBRE> </EMPLEADO>
3.4.2.3. Propiedad nextSibling La propiedad nextSibling posibilita el acceso al siguiente nodo contiguo del nodo actual. Sus caractersticas son: Es una propiedad de solo lectura. Esta propiedad devuelve una referencia al nodo elegido y no a su contenido.
nextSibling Devuelve: Objeto: que representa el nodo hijo. Ejemplo: Obtener el siguiente nodo contiguo al primer nodo <EMPLEADO id=1> Cdigo fuente: function ObtenerSiguienteNodo (nodo){ var nodoSiguiente=nodo.nextSibling; } ObtenerSiguienteNodo(docXML.firstChild.firstChild.firstChild);
38
3
Resultado: El resultado sera un objeto con la siguiente informacin: <EMPLEADO id="2"> <DNI>98765432Z</DNI> <NOMBRE>Alonso Bravo</NOMBRE> </EMPLEADO>
3.4.2.4. Propiedad previousSibling La propiedad previousSibling posibilita el acceso al nodo anterior contiguo del nodo actual Posee estas caractersticas: Es una propiedad de solo lectura. Esta propiedad devuelve una referencia al nodo elegido y no a su contenido.
previousSibling Devuelve: Objeto: que representa el nodo hijo. Ejemplo: Obtener el anterior nodo contiguo al ltimo nodo <EMPLEADO id=2> Cdigo fuente: function ObtenerAnteriorNodo (nodo){ var nodoAnterior=nodo.previousSibling; } ObtenerAnteriorNodo(docXML.firstChild.firstChild.lastChild); Resultado: El resultado sera un objeto con esta informacin: <EMPLEADO id="1"> <DNI>12345678A</DNI> <NOMBRE>Pedro Rosa</NOMBRE> </EMPLEADO>
39
3
3.4.3. Obtener el nodo padre Las caractersticas de esta propiedad son las siguientes: Es una propiedad de solo lectura.
La propiedad parentNode posibilita el acceso al nodo padre desde un nodo hijo.
Esta propiedad devuelve una referencia al nodo elegido y no a su contenido.
parentNode Devuelve: Objeto: que representa el nodo padre de un nodo hijo. Ejemplo 1: Obtener el nodo padre del nodo <EMPLEADO id=1> Cdigo fuente: function ObtenerNodoPadre (nodo){ var nodoPadre=nodo.parentNode; } //Asignamos a la variable nodoEmpleadoID1 el nodo <EMPLEADO id=1> var nodoEmpleadoID1=docXML.firstChild.firstChild.firstChild; //Llamamos a la funcin pasndole el nodo <EMPLEADO id=1> ObtenerNodoPadre(nodoEmpleadoID1); Resultado: El resultado sera un objeto con esta informacin: <EMPLEADOS> <EMPLEADO id="1"> <DNI>12345678A</DNI> <NOMBRE>Pedro Rosa</NOMBRE> </EMPLEADO> <EMPLEADO id="2"> <DNI>98765432Z</DNI> <NOMBRE>Alonso Bravo</NOMBRE> </EMPLEADO>
40
3
3.4.4. Obtener una lista de nodos tratar un documento XML. Las ventajas que nos ofrece dicha lista son: Nos permite trabajar directamente con cada uno de los nodos. Nos posibilita acceder de una manera directa a un nodo.
La obtencin de una lista de nodos es una de las operaciones ms comunes a la hora de
Existen dos formas de obtener una lista de nodos: 1. 2. Haciendo uso del mtodo childNodes Haciendo uso de la funcin getElementsByTagName ()
Ambas formas devuelven una lista de nodos, pero se diferencian en:
childNodes Devuelve una lista de nodos hijos de un nodo padre especificado.
getElementsByTagName() Devuelve una lista de nodos cuyo nombre coincida con el valor pasado como argumento de la funcin.
Para llegar hasta un nodo hijo debemos conocer todos sus padres y recorrer todos los nodos.
Hace una bsqueda automtica en el documento XML del nodo solicitado.
Para entender mejor su funcionamiento, detallaremos seguidamente un ejemplo de uso de cada una de ellas:
childNodes Devuelve: Lista de nodos. Ejemplo: Obtener la lista de nodos de <EMPLEADO> Cdigo fuente: function ObtenerListaNodosEmpleado (nodo){ var listaDeNodos=nodo.childNodes; } //Asignamos a la variable nodoEmpleados el nodo <EMPLEADOS> var nodoEmpleados=docXML.firstChild.firstChild; //Llamamos a la funcin pasndole el nodo <EMPLEADOS>
41
3
ObtenerListaNodosEmpleado(nodoEmpleados); Resultado: El resultado sera un objeto con esta informacin: <EMPLEADO id="1"> <DNI>12345678A</DNI> <NOMBRE>Pedro Rosa</NOMBRE> </EMPLEADO> <EMPLEADO id="2"> <DNI>98765432Z</DNI> <NOMBRE>Alonso Bravo</NOMBRE> </EMPLEADO>
getElementsByTagName() Devuelve: Lista de nodos. Ejemplo: Obtener la lista de nodos de <EMPLEADO> Cdigo fuente: function ObtenerListaNodosEmpleado (){ /*Para obtener los nodos <EMPLEADO> slo es necesario pasar el nombre del nodo como argumento a la funcin */ var listaDeNodos=docXML.getElementsByTagName(EMPLEADO); } //Llamamos a la funcin ObtenerListaNodosEmpleado(); Resultado: El resultado sera un objeto con esta informacin: <EMPLEADO id="1"> <DNI>12345678A</DNI> <NOMBRE>Pedro Rosa</NOMBRE> </EMPLEADO> <EMPLEADO id="2"> <DNI>98765432Z</DNI> <NOMBRE>Alonso Bravo</NOMBRE> </EMPLEADO>
42
3
getElementsByTagName() Devuelve: Lista de nodos. Ejemplo: Obtener la lista de nodos de <EMPLEADO> Cdigo fuente: function ObtenerListaNodosEmpleado (){ /*Para obtener los nodos <EMPLEADO> slo es necesario pasar el nombre del nodo como argumento a la funcin */
var listaDeNodos=docXML.getElementsByTagName(EMPLEADO); } //Llamamos a la funcin ObtenerListaNodosEmpleado(); Resultado: El resultado sera un objeto con esta informacin: <EMPLEADO id="1"> <DNI>12345678A</DNI> <NOMBRE>Pedro Rosa</NOMBRE> </EMPLEADO> <EMPLEADO id="2"> <DNI>98765432Z</DNI> <NOMBRE>Alonso Bravo</NOMBRE> </EMPLEADO>
3.4.5. Obtener el nmero de hijos de un nodo Para obtener el nmero de hijos de un nodo, debemos recurrir a obtener una lista de nodos hijos. La propiedad que nos indica el nmero de elementos, en nuestro caso nodos, de una lista, es length. Posee estas caractersticas: Es una propiedad de solo lectura. Esta propiedad devuelve un valor numrico que representa el nmero de nodos que forman la lista.
43
3
length Devuelve: Nmero Ejemplo 1: Cdigo fuente: function ObtenerListaNodosEmpleado (nodo){ var listaDeNodos=nodo.childNodes; //Obtenemos el nmero de nodos de la lista. var numHijos=listaDeNodos.length; } //Asignamos a la variable nodoEmpleados el nodo <EMPLEADOS> var nodoEmpleados=docXML.firstChild.firstChild; //Llamamos a la funcin pasndole el nodo <EMPLEADOS> ObtenerListaNodosEmpleado(nodoEmpleados); Ejemplo 2: Obtener el nmero de nodos hijos del nodo padre <EMPLEADOS>
Obtener el nmero de nodos hijos del nodo padre <EMPLEADOS> usando el mtodo childNodes
usando
la
funcin
getElementsByTagName() Cdigo fuente: function ObtenerListaNodosEmpleado (){ /*Para obtener los nodos <EMPLEADO> slo es necesario pasar el nombre del nodo como argumento a la funcin */ var listaDeNodos=docXML.getElementsByTagName(EMPLEADO); //Obtenemos el nmero de nodos de la lista var numHijos=listaDeNodos.length; } //Llamamos a la funcin que obtiene una lista de nodos <EMPLEADO> ObtenerListaNodosEmpleado(); Resultado para ambos ejemplos: El resultado sera: numHijos=2
44
3
3.4.6. Obtener informacin de un nodo Existen varias propiedades que nos van a proporcionar toda nodeName: nos proporciona el nombre de un nodo. nodeValue: nos proporciona el valor de un nodo.
la
informacin
que
necesitaremos conocer de un nodo. Veamos dichas propiedades a continuacin:
nodeType: nos proporciona el tipo de nodo al que queremos acceder. Los posibles valores q puede tomar son: 1: el nodo es un elemento XML. En nuestro ejemplo, el nodo <EMPLEADO> es un nodo que contiene otros, por ello, es un elemento XML. 3: el nodo es un nodo de tipo texto, es decir, el valor del nodo es una cadena de texto. En nuestro ejemplo, el nodo <DNI> es un nodo de tipo texto porque su contenido es una cadena de texto que representa el DNI.
Apliquemos estas propiedades en un ejemplo para ver su uso:
Ejemplo: Obtener el nombre, valor y tipos de los nodos <DNI> Cdigo fuente:
function ObtenerInformacionNodosDNI (){ /*Para obtener los nodos <DNI> slo es necesario pasar el nombre del nodo como argumento a la funcin */ var listaNodos=docXML.getElementsByTagName(DNI); //Obtenemos el nmero de nodos de la lista var numHijos=listaNodos.length; var infDNI=; for (i=0;i<numhijos;i++){ infDNI+=listaNodos[i].nodeName +": "; infDNI+=listaNodos[i].firstChild.nodeValue; infDNI+=" - nodeType: "+ listaNodos[i].firstChild.nodeType; infDNI+="\n"; }
45
3
alert(infDNI); } //Llamamos a la funcin que obtiene la informacin de los nodos ObtenerInformacionNodosDNI (); Resultado para ambos ejemplos: El resultado sera:
3.4.7. Obtener informacin de un atributo Al igual que existen mtodos para obtener una lista de nodos, se puede lograr una lista de atributos de un nodo. El mtodo que posibilita la obtencin de dicha lista es attributes. Por otra parte, del mismo modo que para una lista de nodos, la propiedad length aplicada a una lista de atributos va a poseer una propiedad que va a permitirnos saber cuntos atributos tiene dicha lista. Un objeto de tipo atributo posee las siguientes propiedades: name: proporciona el nombre del atributo. value: proporciona el valor del atributo.
Apliquemos estas propiedades en un ejemplo para ver su uso:
Ejemplo:
Obtener el nombre y valor de los atributos de los nodos <EMPLEADO> Cdigo fuente: function ObtenerInformacionAtributosEMPLEADO (){ /*Para obtener los nodos <EMPLEADO> slo es necesario pasar el nombre del nodo como argumento a la funcin */
46
3
var listaNodos=docXML.getElementsByTagName(EMPLEADO); //Obtenemos el nmero de nodos de la lista var numHijos=listaNodos.length; var infATRIB=; for (i=0;i<numhijos;i++){ infATRIB +=listaNodos[i].nodeName +": "; //Obtenemos la lista de los atributos para el nodo seleccionado listaAtributos=listaNodos[i].attributes; for(j=0;j<listaAtributos.length;j++){ infATRIB+=listaAtributos[j].name + ": "; infATRIB+=listaAtributos[j].value + "\n"; } infATRIB+="\n"; } alert(infATRIB); } //Llamamos a la funcin que obtiene la informacin de los atributos ObtenerInformacionAtributosEMPLEADO ();
Resultado para ambos ejemplos: El resultado sera:
47
3
recuerde_
forma estructurada y estandarizada. Todo XML est formado por un nodo raz. Un nodo puede contener nodos y atributos.
XML permite transferir informacin entre el servidor y el cliente de una
Un nodo de tipo texto es aqul que contiene slo una cadena de texto. Un nodo puede tener o no atributos. Si tiene atributos, no hay lmite en el nmero de atributos que posea.
Usando JavaScript y basndonos en DOM podemos obtener los siguientes datos: Saber si un nodo tiene hijos. Obtener un nodo hijo. Obtener el nodo padre. Obtener una lista de nodos. Nmero de hijos de un nodo. Informacin de un nodo. Informacin de un atributo.
48
4
ndice_
Desarrollo de una aplicacin AJAX
4.1. 4.2. 4.3.
INTRODUCCIN .........................................................................51 ESTRUCTURA DE LA INFORMACIN ............................................51 4.2.1. Transformar la informacin a XML ....................................53 FASES DEL DESARROLLO ............................................................55 4.3.1. Aplicacin web .................................................................56 4.3.1.1. Funciones JavaScript para la carga de datos ........58 4.3.1.2. Funciones JavaScript para mostrar los datos........61 4.3.1.3. Variables y funciones JavaScript globales ............68 4.3.1.4. Ejemplo de uso de la aplicacin............................70
49
4
4.1. INTRODUCCIN
Una vez que hemos estudiado las nociones bsicas de lo que es AJAX y su utilidad, vamos a desarrollar una aplicacin web usando todo lo que hemos visto hasta ahora. Como novedad, introduciremos el concepto de acceso a los elementos de una pgina usando DOM. No obstante, antes de desarrollar cualquier aplicacin debemos tener en cuenta mltiples cuestiones. Veamos para nuestro caso, las ms relevantes y a las que debemos prestar una mayor atencin: Objetivos. Crear una aplicacin que posibilite la consulta de los datos personales de un empleado que forme parte de un ficticio grupo empresarial. Funcionalidad. La aplicacin permitir seleccionar un empleado y mostrar una ficha que pueda ser impresa. Perfil de los usuarios. Los usuarios que utilizarn la aplicacin sern los integrantes del Departamento de Recursos Humanos. El nivel de conocimientos de informtica es medio, por lo que la aplicacin deber ser fcil de usar, clara y sencilla.
4.2.
ESTRUCTURA DE LA INFORMACIN
Antes de comenzar a desarrollar la aplicacin, debemos hacernos una idea del volumen de informacin de la que disponemos para poder as sintetizarla. 1. Inicialmente, observemos el esquema organizativo del grupo empresarial.
51
4
EMPRESA 1 Departamento 1 Departamento 2
Departamento 3
Departamento 4
Empleado 1 Empleado 2
Empleado 3 Empleado n
EMPRESA 2 Departamento 1 Departamento 2 Departamento 3 Departamento 4
Empleado 1 Empleado 2
Empleado 3 Empleado n
Grupo empresarial
En el esquema, apreciamos que hay varias empresas que pertenecen al grupo. A su vez, cada empresa est dividida en departamentos y cada departamento est formado por un nmero de empleados variable. 2. Para poder visualizar la ficha personal de un empleado va a ser necesario realizar esta secuencia de pasos:
Elegir la empresa. Seleccionar el departamento. Escoger el empleado.
52
4
3.
Por tanto, una interfaz grfica que va a permitir realizar el proceso de seleccin de una ficha de empleado, de una manera rpida y fcil, es la siguiente:
4.2.1. Transformar la informacin a XML AJAX hace uso de XML para la transferencia de informacin entre la parte cliente y la parte del servidor. Por ello, vamos tener que transformar la informacin recopilada en las bases de datos a un formato XML. Como hemos visto, para obtener la ficha de un empleado vamos a tener que realizar 3 acciones previas: elegir una empresa, seleccionar un departamento de dicha empresa y por ltimo, elegir un empleado. Por tanto, cada peticin que tengamos que realizar al servidor para obtener la informacin va a devolver un XML pero con diferente estructura. Veamos, a continuacin, qu formato XML podra representar cada una de las acciones: 1. Elegir la empresa: <?xml version="1.0" encoding="ISO-8859-1"?> <EMPRESAS> <EMPRESA id=1 nombre=Empresa 1/> <EMPRESA id=n nombre=Empresa n/> <EMPRESAS>
53
4
2. Seleccionar el departamento: <?xml version="1.0" encoding="ISO-8859-1"?> <DEPARTAMENTOS>
<DEPARTAMENTO id=1 nombre=Departamento 1/>
<DEPARTAMENTO id=n nombre=Departamento n/> <DEPARTAMENTOS>
3.
Escoger el empleado:
<?xml version="1.0" encoding="ISO-8859-1"?> <EMPLEADOS> <EMPLEADO id=1> <DNI>11111111A</DNI> <NOMBRE>Nombre 1</NOMBRE> <APELLIDOS>Apellidos 1</APELLIDOS> <DIRECCION>Direccin 1</DIRECCION> <EMAIL>email1@email.com</EMAIL> <FOTO>fotos/foto1.jpg</FOTO> </ EMPLEADO > </EMPLEADOS>
54
4
4.3. FASES DEL DESARROLLO por una zona donde se mostrarn los datos del empleado.
Nuestro objetivo, usando AJAX, ser hacer funcionar la interfaz planteada de la manera ms rpida y fcil. Como hemos visto, la interfaz est formada por varias listas desplegables y
Para lograr nuestro objetivo, definiremos las fases que vamos a seguir teniendo siempre en cuenta que nos basamos en AJAX: 1. 2. Se carga en la lista las empresas del grupo, usando DOM. Al seleccionar una empresa, se realiza una peticin al servidor para obtener los departamentos de la empresa seleccionada. 3. 4. Se carga en la lista los departamentos usando DOM. Al seleccionar un departamento, se realiza una peticin al servidor para obtener los empleados para el departamento seleccionado. 5. 6. Se carga en la lista los empleados usando DOM. Al seleccionar el empleado, se realiza una peticin al servidor para obtener los datos del empleado seleccionado. 7. Se actualiza la ficha de empleado de la pgina web usando DOM con los datos del empleado. Para las fases 2, 4 y 6 emplearemos el objeto XMLHttpRequest. Una vez que conocemos la estructura lgica de las fases de desarrollo, pasaremos a crear nuestro ejemplo.
55
4
4.3.1. Aplicacin web planteado: <html> <head> <style>body{font-family:Verdana;font-size:8px;}</style>  </head>
Para comenzar, veamos el cdigo necesario HTML para crear la estructura que hemos
 <body onload="javascript:CargarEmpresas();"> <div style="width:500px;"> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="black"> <tr bgcolor="white"> <td width="14%" height="25"><b>EMPRESA:</b> </td> <td width="86%"> <select name="listaEmpresa" id="listaEmpresa" style="width:300px" onchange="javascript:CargarDepartamentos(this.value);"> <option value="0"></option> </select></td> </tr> <tr bgcolor="white"> <td width="14%" height="25"><b>DEPARTAMENTO:</b> </td> <td width="86%"> <select name="listaDepartamento" id="listaDepartamento" style="width:300px" onchange="javascript:CargarEmpleados(this.value);"> <option value="0"></option> </select> </td> </tr> <tr bgcolor="white"> <td width="14%" height="25"><b>EMPLEADO:</b> </td> <td width="86%"> <select name="listaEmpleado" id="listaEmpleado" style="width:300px" onchange="javascript:CargarEmpleado(this.value);"> <option value="0"></option> </select>
56
4
</tr> <tr bgcolor="white"> <td colspan="2" b><br/><br/> bgcolor="black"> <tr bgcolor="white">
style="padding:5px;"><br><b>Ficha
del
empleado:</
<table width="100%" height="200" border="0" cellpadding="0" cellspacing="1"
<td width="40%" height="200" rowspan="3" align="center" valign="middle" id="campoFoto">FOTO DEL EMPLEADO</td> <td width="60%" id="campoNombre"> NOMBRE Y APELLIDOS </td> </tr> <tr bgcolor="white"> <td id="campoDireccion"> </tr> <tr bgcolor="white"> <td id="campoEmail"> EMAIL </td> </tr> </table> </td> </tr> </table> </div> </div> <br> <div id="capa" style="font-size:10px;"> </div> </body> </html> DIRECCIN </td>
Como podemos observar, asociada a cada objeto de tipo SELECT, existe una funcin JavaScript que se ejecuta cuando hay algn cambio en la lista. Estas llamadas a funciones JavaScript son: 1. 2. 3. 4. CargarEmpresas() CargarDepartamentos(this.value) CargarEmpleados(this.value) CargarEmpleado(this.value)
Asimismo, apreciamos tambin que, en las tres ltimas, se le pasa como parmetro el valor seleccionado de la lista para poder realizar la peticin al servidor basndonos en este dato.
57
4
4.3.1.1. Funciones JavaScript para la carga de datos 1. CargarEmpresas() /**
Seguidamente, estudiaremos qu operaciones realizan cada una de las funciones de carga:
CargarEmpresas: realiza una peticin a la pgina del servidor que devuelve el listado de EMPRESAS */ function CargarEmpresas(){ /* 1- Definimos la url de la pgina a la que se realiza la peticin */ var url_peticion="listado_empresas.php"; /* 2- Si la obtencin de datos ha sido correcta, se ejecuta la funcin MostrarEmpresas. En caso de error, se muestra un mensaje de advertencia*/ if (ObtenerDatos("listado_empresas.php")==true){ MostrarEmpresas(); }else{ alert("Ha empresas."); } } ocurrido un error al intentar cargar el listado de
Como podemos observar, al terminar de realizar la carga, se llama a la funcin MostrarEmpresas cuya misin veremos ms adelante. Del mismo modo, esta funcin hace uso de otra funcin de tipo global que veremos despus: ObtenerDatos. 2. CargarDepartamentos(this.value)
/** CargarDepartamentos: realiza una peticin a la pgina del servidor que devuelve el listado de DEPARTAMENTOS. Recibe como parmetro el identificador de una empresa seleccionada previamente */
58
4
function CargarDepartamentos(id_empresa){ funcin como argumento */ empresa_actual=id_empresa;
/* 1- Se establece la variable global empresa, con el valor pasado a la
/* 2- Definimos la url de la pgina a la que se realiza la peticin */ var url_peticion="listado_departamentos.php?empresa=+empresa_actual; /* 3- Si la obtencin de datos ha sido correcta, se ejecuta la funcin MostrarDepartamentos. En caso de error, se muestra un mensaje de advertencia*/ if (ObtenerDatos(url_peticion)==true){ MostrarDepartamentos(); }else{ alert("Ha departamentos."); } } ocurrido un error al intentar cargar el listado de
En este caso, como podemos ver, al terminar de realizar la carga, se llama a la funcin MostrarDepartamentos cuya misin veremos ms adelante. Del mismo modo, esta funcin hace uso de otra funcin de tipo global que veremos despus: ObtenerDatos. 3. CargarEmpleados(this.value)
/** CargarEmpleados: realiza una peticin a la pgina del servidor que devuelve el listado de EMPLEADOS. Recibe como parmetro el identificador de un departamento seleccionado previamente. */ function CargarEmpleados(id_departamento){ /* 1- Se establece la variable global departamento, con el valor pasado a la funcin como argumento */ departamento_actual=id_departamento; /* 2- Definimos la url de la pgina a la que se realiza la peticin */ var url_peticion;
59
4
mento="+departamento_actual+".php"; MostrarDepartamentos. if (ObtenerDatos(url_peticion)==true){ MostrarEmpleados(); }else{ alert("Ha empleados."); } } ocurrido un error al
url_peticion="listado_empleados.php?empresa="+empresa_actual+"&departa
/* 3- Si la obtencin de datos ha sido correcta, se ejecuta la funcin En caso de error, se muestra un mensaje de advertencia*/
intentar
cargar
el
listado
de
Como podemos ver, al terminar de realizar la carga, se llama a la funcin MostrarEmpleados cuya misin veremos ms adelante. Del mismo modo, esta funcin hace uso de otra funcin de tipo global que veremos despus: ObtenerDatos. 4. CargarEmpleado(this.value)
/** CargarEmpleado: realiza una peticin a la pgina del servidor que devuelve los datos personales del EMPLEADO seleccionado. Recibe como parmetro el identificador de un empleado seleccionado previamente. */ function CargarEmpleado(id_empleado){ /* 1- Se establece la variable global empleado, con el valor pasado a la funcin como argumento */ empleado_actual=id_empleado; /* 2- Definimos la url de la pgina a la que se realiza la peticin */ var url_peticion; url_peticion="empleado.php?empresa="+empresa_actual+"&departamento ="+departamento_actual +"&empleado="+empleado_actual+".php"; /* 3- Si la obtencin de datos ha sido correcta se ejecuta la funcin
60
4
PresentarDatosEmpleado. if (ObtenerDatos(url_peticion)==true){ PresentarDatosEmpleado(); }else{ empleado."); } }
En caso de error, se muestra un mensaje de advertencia*/
alert("Ha ocurrido un error al intentar cargar los datos del
Como podemos ver, al terminar de realizar la carga, se llama a la funcin PresentarDatosEmpleado cuya misin veremos ms adelante. Del mismo modo, esta funcin hace uso de otra funcin de tipo global que veremos despus: ObtenerDatos. 4.3.1.2. Funciones JavaScript para mostrar los datos Una vez que hemos visto las operaciones que realiza cada una de las operaciones de carga que se han creado para traer datos, pasaremos a ver cada una de las funciones que se encargan de mostrar datos. Estas funciones son: 1. MostrarEmpresas ()
/** MostrarEmpresas: el objetivo de esta funcin es recargar el objeto SELECT correspondiente a las EMPRESAS con los valores obtenidos en el fichero XML */ function MostrarEmpresas(){ /* 1- Obtenemos la lista de nodos EMPRESA */ Var idATRIB, valorATRIB; var listaNodos=docXML.getElementsByTagName("EMPRESA"); /* 2- Recorremos la lista de nodos */ for(i=0;i<listaNodos.length;i++){ idATRIB=;valorATRIB=; /* 3- Obtenemos la lista de atributos del nodo actual*/ listaAtributos=listaNodos[i].attributes;
61
4
necesitamos conocer*/ for(j=0;j<listaAtributos.length;j++){ contenido*/ nombreATRIB=listaAtributos[j].name; if (nombreATRIB=="nombre"){ valorATRIB=listaAtributos[j].value; } if (nombreATRIB=="id"){ idATRIB=listaAtributos[j].value; } }
/* 4 - Recorremos la lista de atributos para obtener los valores que
/* 5- Obtenemos el nombre del atributo para poder seleccionar su
/* 6 - Una vez que tenemos la informacin necesaria para construir un elemento de tipo OPTION, lo aadimos a la lista de opciones del objeto SELECT de EMPRESAS usando DOM. Veamos qu pasos debemos seguir para ello: /* 6.1- Creamos el elemento OPTION*/ var elemento=document.createElement("option"); /*6.2- Creamos un valor de tipo Texto que despus vincularemos con el elemento OPTION*/ var valorElemento=document.createTextNode(valorATRIB); /*6.3- Aadimos al elemento OPTION creado el valor de tipo Texto*/ elemento.appendChild(valorElemento); /*6.4- Aadimos un nuevo atributo "value" al elemento OPTION*/ elemento.setAttribute("value",idATRIB); /*6.5- Finalmente, aadimos este nuevo elemento OPTION a la lista de EMPRESAS*/ document.getElementById("listaEmpresa").appendChild(elemento); } } */
62
4
2. MostrarDepartamentos () /** */ function MostrarDepartamentos(){
MostrarDepartamentos: el objetivo de esta funcin es recargar el objeto SELECT correspondiente a las DEPARTAMENTOS con los valores obtenidos en el fichero XML
/* 1- Obtenemos la lista de nodos DEPARTAMENTO */ var listaNodos=docXML.getElementsByTagName("DEPARTAMENTO"); /* 2- Recorremos la lista de nodos */ for(i=0;i<listaNodos.length;i++){ /* 3- Obtenemos la lista de atributos del nodo actual*/ listaAtributos=listaNodos[i].attributes; /* 4 - Recorremos la lista de atributos para obtener los valores que necesitamos conocer*/ for(j=0;j<listaAtributos.length;j++){ /* 5- Obtenemos el nombre del atributo para poder seleccionar su contenido*/ nombreATRIB=listaAtributos[j].name; if (nombreATRIB=="nombre"){ valorATRIB=listaAtributos[j].value; } if (nombreATRIB=="id"){ idATRIB=listaAtributos[j].value; } } /* 6 - Una vez que tenemos la informacin necesaria para construir un elemento de tipo OPTION, lo aadimos a la lista de opciones del objeto SELECT de DEPARTAMENTOS usando DOM. Veamos qu pasos debemos seguir para ello: /* 6.1- Creamos el elemento OPTION*/ var elemento=document.createElement("option"); */
63
4
elemento OPTION*/ elemento.appendChild(valorElemento);
/*6.2- Creamos un valor de tipo Texto que despus vincularemos con ele var valorElemento=document.createTextNode(valorATRIB); /*6.3- Aadimos al elemento OPTION creado el valor de tipo Texto*/
/*6.4- Aadimos un nuevo atributo "value" al elemento OPTION*/ elemento.setAttribute("value",idATRIB); /*6.5- Finalmente, aadimos este nuevo elemento OPTION a la lista de DEPARTAMENTOS*/ document.getElementById("listaDepartamento").appendChild(elemento); } }
3. MostrarEmpleados ()
/** MostrarEmpleados: el objetivo de esta funcin es recargar el objeto SELECT correspondiente a los EMPLEADOS con los valores obtenidos en el fichero XML */ function MostrarEmpleados(){ /* 1- Obtenemos la lista de nodos DEPARTAMENTO */ var listaNodos=docXML.getElementsByTagName("EMPLEADO"); /* 2- Recorremos la lista de nodos */ for(i=0;i<listaNodos.length;i++){ /* 3- Obtenemos la lista de hijos para el nodo actual */ subListaNodos=listaNodos[i].childNodes; /* 4- Definimos una serie de variables locales para almacenar la informacin que necesitamos del nodo actual*/ cad=""; nombreEmpleado=""; apellidosEmpleado="";
64
4
/* 5- Obtenemos los atributos del nodo actual */ listaAtributos=listaNodos[i].attributes; for(k=0;k<listaAtributos.length;k++){ nombreATRIB=listaAtributos[k].name; if (nombreATRIB=="id"){ idATRIB=listaAtributos[k].value; } }
/*6- Recorremos la lista de atributos para obtener la informacin*/
/* 7- Recorremos los nodos hijos para obtener los nombres y apellidos de cada empleado*/ for(j=0;j<subListaNodos.length;j++){ /* 8- Obtenemos el nombre del nodo y el tipo de nodo*/ nombreNodo=subListaNodos[j].nodeName; tipoNodo=subListaNodos[j].nodeType; if (tipoNodo==1){ /* 9- Comprobamos sobre que nodo estamos y obtenemos su valor*/ valorNodo=subListaNodos[j].firstChild.nodeValue; if (nombreNodo=="NOMBRE"){ nombreEmpleado=valorNodo; } if (nombreNodo=="APELLIDOS"){ apellidosEmpleado=valorNodo; } } } /* 10 - Una vez que tenemos la informacin necesaria para construir un elemento de tipo OPTION, lo aadimos a la lista de opciones del objeto SELECT de EMPLEADOS usando DOM. Veamos qu pasos debemos seguir para ello: */ /*10.1- Creamos el elemento OPTION*/ var elemento=document.createElement("option");
65
4
elemento OPTION*/ var +apellidosEmpleado); elemento.appendChild(valorElemento);
/*10.2- Creamos un valor de tipo Texto que despus vincularemos con el valorElemento=document.createTextNode(nombreEmpleado+" "
/*10.3- Aadimos al elemento OPTION creado el valor de tipo Texto*/
/*10.4- Aadimos un nuevo atributo "value" al elemento OPTION*/ elemento.setAttribute("value",idATRIB); /*10.5- Finalmente, aadimos este nuevo elemento OPTION a la lista de DEPARTAMENTOS*/ document.getElementById("listaEmpleado").appendChild(elemento); } }
4. PresentarDatosEmpleado ()
/** PresentarDatosEmpleado: el objetivo de esta funcin es mostrar los datos del EMPLEADO escogido */ function PresentarDatosEmpleado(){ /* 1- Se obtiene una referencia al nodo EMPLEADO elegido */ var nodoEmpleado=docXML; /* 2- Obtenemos los hijos del nodo empleado, es decir, los datos personales */ var subListaNodos=nodoEmpleado.childNodes; /* 3- Definimos las variables que almacenan la informacin personal*/ cad=""; nombreEmpleado=""; apellidosEmpleado=""; fotoEmpleado=""; direccionEmpleado="";
66
4
emailEmpleado="" /* 4- Recorremos los nodos hijos */ for(j=0;j<subListaNodos.length;j++){ nombreNodo=subListaNodos[j].nodeName; tipoNodo=subListaNodos[j].nodeType; if (tipoNodo==1){
/* 5- Obtenemos los datos dependiendo del nombre del nodo, */
valorNodo=subListaNodos[j].firstChild.nodeValue; if (nombreNodo=="NOMBRE"){ nombreEmpleado=valorNodo; } if (nombreNodo=="APELLIDOS"){ apellidosEmpleado=valorNodo; } if (nombreNodo=="DIRECCION"){ direccionEmpleado=valorNodo; } if (nombreNodo=="EMAIL"){ emailEmpleado=valorNodo; } if (nombreNodo=="FOTO"){ fotoEmpleado=valorNodo; } } } /* 6- Por ltimo, asignamos a cada objeto de la pgina HTML, el valor del dato personal recogido*/ document.getElementById("campoNombre").innerHTML=nombreEmpleado+" " +apellidosEmpleado; document.getElementById("campoDireccion").innerHTML=direccionEmpleado; document.getElementById("campoEmail").innerHTML=emailEmpleado; document.getElementById("campoFoto").innerHTML=fotoEmpleado; }
67
4
4.3.1.3. Variables y funciones JavaScript globales aplicacin.
Una vez que hemos visto las funciones de carga, pasemos a ver las funciones generales que se han empleado y las variables globales definidas por el sistema para el control de la
Variables generales:
/*Definimos las variables generales que necesitaremos para la aplicacin*/ var empresa_actual=0; //almacena la empresa seleccionada var departamento_actual=0; //almacena el departamento seleccionado var empleado_actual=0; //almacena el empleado seleccionado /* Variable general que almacena la respuesta XML de las peticiones*/ var docXML;
Funciones generales. Tenemos dos funciones generales en nuestra aplicacin: 1. crearMotorAJAX: que se encarga de establecer la comunicacin AJAX.
/** crearMotorAJAX: crea el motor de AJAX como ya hemos visto en anteriores temas */ function crearMotorAJAX(){ /*Creamos la variable que nos permite instanciar el objeto*/ var motorAJAX=false; try{ /*Caso 1: Comprobamos que sea Internet Explorer con el motor de XML actualizado*/ motorAJAX = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ /*No se ha cumplido el caso 1 */ try{ /*Caso 2: Comprobamos que sea Internet Explorer con el motor antiguo de XML instalado*/
68
4
}catch(e){ "falso"*/ motorAJAX = false; } }
motorAJAX = new ActiveXObject("Microsoft.XMLHTTP"); /*No se ha cumplido el caso 2 por lo que asignamos al objeto el valor
/*Si no se cumplen el caso 1 ni el caso 2, comprobamos que exista un objeto llamado XMLHttpRequest*/ if (!motorAJAX && typeof XMLHttpRequest!='undefined') { /*Existe el objeto XMLHttpRequest, por lo que se crea una nueva instancia de este objeto y se asigna a nuestra variable*/ motorAJAX = new XMLHttpRequest(); } /*Por ltimo, devolvemos la variable que tiene instanciado el objeto XMLHttpRequest*/ return motorAJAX; }
2. ObtenerDatos: que se encarga de controlar que el resultado de una peticin sea correcto.
/** ObtenerDatos: realiza una peticin a la pgina del servidor que se le pasa como argumento Es una funcin Global que usan diferentes funciones y que devuelve true o false dependiendo del resultado de la peticin al servidor */ function ObtenerDatos(url_peticion){ /* 1- creamos una nueva instancia del motor AJAX*/ var objAJAX=crearMotorAJAX(); /*2- Realizamos la peticin */ objAJAX.open('GET', url_peticion, false); objAJAX.send(null);
69
4
if (objAJAX.readyState==4){ contenido del XML devuelto por la pgina*/
/* 3- Dependiendo del resultado de la peticin devuelve true o false */
/* 4- Si la peticin ha tenido xito, carga en la variable global "docXml"el docXML=objAJAX.responseXML.documentElement; return true; }else{ return false; } }
4.3.1.4. Ejemplo de uso de la aplicacin Para terminar de fijar los conceptos, seguidamente, estudiaremos los pasos para la seleccin de un empleado en las siguientes imgenes: 1. Seleccionamos la empresa. En nuestro caso, escogemos la Empresa 1:
70
4
2.
Seleccionamos el departamento. En esta ocasin, elegiremos Contabilidad:
3.
Seleccionamos el empleado. Por ejemplo, Marta Pea.
71
4
4. en la ficha de empleado.
Por ltimo, una vez seleccionada nuestra empleada Marta Pea, cargamos sus datos
72
4
recuerde_
cuestiones: Establecer el objetivo de la aplicacin. ellos.
Para desarrollar una aplicacin web, siempre hay que tener en cuenta varias
Establecer la funcionalidad que va a tener la aplicacin. Definir el perfil de los usuarios que usarn la aplicacin y adaptarla a
73
5
ndice_
Facilitando el trabajo con AJAX
5.1. 5.2.
INTRODUCCIN .........................................................................77 DOJO TOOLKIT ...........................................................................77 5.2.1. Ventajas ..........................................................................78 5.2.2. Funcionalidades ..............................................................78 5.2.3. Componentes bsicos ......................................................81
5.3.
PROTOTYPE................................................................................83 5.3.1. Funcionalidades ..............................................................84 5.3.2. Paquetes de funcionalidad de Prototype ..........................92
75
5
5.1. INTRODUCCIN
Una vez que hemos trabajado con AJAX, la siguiente cuestin que podramos plantearnos es si existe algn medio para facilitarnos el trabajo de programacin de una aplicacin. Pues bien, efectivamente, es posible utilizar frameworks de desarrollo que den soporte a AJAX. Un framework (marco de trabajo) no es ms que un conjunto de funciones creadas para implementar la estructura estndar de una aplicacin. Para ello, un framework utiliza cdigo reusable comn en diferentes procesos y lo agrupa con objeto de evitar que el desarrollador reescriba este cdigo para cada parte de la aplicacin que hace uso de l. Por tanto, podemos decir que un framework nos va a proporcionar, tal y como su nombre indica, un marco de trabajo en el que se definir una estructura y unos mtodos de trabajo. Existen muchos frameworks de desarrollo dependiendo del lenguaje y del tipo de aplicacin a desarrollar. En nuestro caso, vamos a hablar de dos frameworks de desarrollo web enfocados a facilitarnos el trabajo con AJAX: Dojo Toolkit Prototype
5.2.
DOJO TOOLKIT
Dojo Toolkit no es slo un framework de desarrollo web, tambin es una caja de herramientas que facilita el desarrollo AJAX mediante la inclusin de componentes y controles (widgets). Este framework, creado por la Fundacin DOJO, es un proyecto open source (de cdigo abierto) sujeto a las licencias de distribucin de uso BSD y Academic Free License, por lo tanto, mientras que nos ajustemos a lo establecido en dichas licencias, podemos modificar el cdigo fuente. Actualmente, DOJO Toolkit1 es uno de los frameworks ms potentes y fiables debido a que est recibiendo el apoyo de IBM y de Sun Microsystem.
1
Podemos obtener la versin ms reciente de Dojo Toolkit as como ms informacin en su Web: http://dojotoolkit.org/
77
5
5.2.1. Ventajas el desarrollo de aplicaciones. Veamos algunas de ellas:
Las ventajas de Dojo Toolkit vienen dadas por la filosofa que emplea este framework para
Separa las distintas funcionalidades en distintas libreras creando as paquetes de funciones y a su vez sub-paquetes dentro de paquetes, construyendo de esta forma, una estructura jerrquica de clases muy similar a la utilizada por Java.
Todos los paquetes de Dojo dependen del paquete base que lleva por nombre dojo. Inclusin de controles, llamados widgets, creados y pensados atendiendo a las necesidades ms habituales que se necesitan en una aplicacin web.
Proporciona un medio para empaquetar slo los paquetes usados por la aplicacin y los comprime para optimizar el cdigo de sta y as evitar la descarga excesiva de contenidos.
La aplicacin web construida usando Dojo es multinavegador y multisistema operativo.
5.2.2. Funcionalidades El empleo de paquetes por cada funcionalidad, como ya hemos visto, es una de las ventajas de Dojo por varios motivos: 1. 2. Abstrae las distintas partes que conforman el conjunto del framework. Al crear la aplicacin final, se puede optimizar el cdigo fuente quitando los paquetes que la aplicacin no utilice. 3. Permite la modificacin de pequeos trozos de cdigo correspondientes a una sola funcionalidad. Este hecho posibilita la mejor depuracin de acciones y la posibilidad de que no toda la aplicacin deje de funcionar sino que slo una pequea parte pueda quedarse sin funcionamiento.
78
5
paquetes que las definen: Los paquetes que forman parte de ella son:
A continuacin, a grandes rasgos, describiremos las funcionalidades que ofrece Dojo y los
Libreras de carcter general. Estas libreras son las que posibilitan la interaccin con la pgina web. Permiten trabajar con HTML, JavaScript y DOM.
dojo.lang
Funciones que hacen ms fcil el uso de determinadas rutinas javascript. Funciones javascript para el tratamiento de cadenas de texto. Funciones javascript para el tratamiento del DOM. Rutinas para el trabajo con hojas de estilos en cascada (CSS). Rutinas para ejecutar operaciones especficas de HTML. Funciones para la gestin de eventos del sistema y, por tanto, de la aplicacin. Funciones que conforman el API del objeto Reflection. Funciones para el tratamiento de fechas. Conjunto de funciones dedicadas a la creacin de procesos de logueo en una aplicacin. Conjunto de funciones dedicadas a la creacin de perfiles bajo javascript. Rutinas para generar expresiones regulares.
dojo.string dojo.dom dojo.style dojo.html dojo.event dojo.reflect dojo.date dojo.logging.Logger
dojo.profile dojo.regexp
Operaciones de entrada/salida. Las libreras que conforman este paquete son las encargadas de gestionar todo el proceso de comunicacin entre la parte cliente y la parte del servidor. Estn agrupadas en los siguientes paquetes:
dojo.io dojo.rpc dojo.json
Funciones
multinavegador
multisistema
que
se
encargan
de
establecer los procesos generales de envo y recepcin de datos. Funciones que posibilitan la comunicacin utilizando RPC. Funciones que posibilitan la comunicacin utilizando JSON.
Efectos visuales para la web. Estos paquetes estn destinados a mejorar el aspecto visual de los elementos que integran una pgina web. Suministran multitud de efectos pticos que hacen ms grato el visualizar contenidos.
79
5
mayora. La agrupacin es: dojo.animation.Animation animaciones. dojo.dnd
Al igual que el resto de paquetes, estos efectos son multiplataforma en su gran
Paquete que posibilita la creacin de efectos de
Libreras que implementa las acciones de Arrastrar y Soltar, tambin conocidas por Drag and Drop. Conjunto de funciones creadas para facilitar la validacin de formularios. Rutinas destinadas a crear efectos de expansin y contraccin de elementos. Paquete destinado al manejo del espacio de colores. Funciones destinadas a controlar el uso de los colores. Libreras que se utilizan para la manipulacin y control de grficos dinmicos del tipo SVG.
dojo.validate
dojo.fx dojo.graphics.Colorspace dojo.graphics.color
dojo.svg
Criptografa y operaciones matemticas. Paquetes que posibilitan el uso de tcnicas criptogrficas en las aplicaciones web para proteger la informacin suministrada. Asimismo, proporcionan un medio para usar operaciones matemticas simples y complejas. Los paquetes estn agrupados del siguiente modo:
dojo.crypto
Funciones
para
la
generacin
de
elementos
protegidos
criptogrficamente. dojo.math.Math dojo.math.curves Funciones y operaciones matemticas bsicas. Librera de funciones que posibilita la generacin y el clculo de curvas. dojo.math.matrix dojo.math.points Librera para el uso de las operaciones del lgebra lineal. Rutinas para la generacin y el clculo de puntos.
Otras. Conjunto de paquetes de carcter especial o no comunes:
dojo.storage
Librera
de
funciones
que
se
usan
para
crear
un
almacenamiento local de informacin haciendo uso del cach. dojo.xml.Parse Rutinas para ejecutar parseos de informacin recogida en XML. dojo.uri Funciones para la gestin de url's.
80
5
5.2.3. Componentes bsicos
Los componentes bsicos (widget's) que incorpora Dojo Toolkit proporcionan medios rpidos y estndares para la implementacin de operaciones muy comunes en las aplicaciones web. Sin embargo, no son los nicos componentes que existen. Debido a que es un cdigo open source (cdigo fuente abierto) es cada vez ms comn encontrar distintos componentes creados por desarrolladores annimos o empresas que ofrecen nuevas funcionalidades o que mejoran las ofrecidas por los actuales componentes. Entre las empresas que apoyan este proyecto, se encuentran dos de las ms importantes del mundo: IBM y Sun Microsystem. stas han ofrecido su apoyo y sus conocimientos para crear y mejorar nuevos y ms completos widget's, por lo que se prev que en un espacio corto de tiempo, Dojo Toolkit sea una referencia para el mundo AJAX. Para la implementacin y uso de los componentes bajo Dojo Toolkit, dichos componentes se agrupan dentro del paquete: dojo.widget Seguidamente, detallamos algunas caractersticas y usos de los componentes ms utilizados que incluye Dojo: Componentes CORE. Ofrecen las funcionalidades ms generales y demandadas. Dentro de este grupo de componentes, debemos mencionar que existen tres clases bases fundamentales que actan a modo de componente y que facilitan el trabajo en tres reas: La clase Widget. Define caractersticas comunes de los componentes. La clase DomWidget. Define caractersticas para los componentes que usan DOM. La clase HtmlWidget. Define caractersticas aplicables a HTML.
En cuanto a los componentes propiamente mencionados que conforman este grupo, tenemos: Editor. Checkbox. ComboBox. ContextMenu. DropdownButton. Menu.
81
5
MenuItem. PopUpButton. SimpleDropDownButton SortableTable TabSet Tabs Tree
Componentes Layout. Son componentes basados en capas. Haciendo uso de ellos, se facilita enormemente el trabajo de crear estructuras basadas en elementos <DIV>, es decir, capas. Podemos encontrar los siguientes: Container Accordion Dialog FloatingPane LayoutPane Manager SplitPane TemplatedContainer
Componentes SVG. Son creados para facilitar el manejo de grficos dinmicos que usan el formato SVG. Tenemos: SvgButton SvgWidget
Otros componentes. En esta seccin se agrupa el resto de componentes destacados que ofrece Dojo Toolkit: DatePicker TimePicker RichText Chart ColorPalette CiviCrmDatePicker FisheyeList InlineEditBox ResizableTextArea
82
5
SlideShow TaskBar Toggler Toolbar Wizard
5.3.
PROTOTYPE
El framework Prototype es una librera de funciones JavaScript orientada a la programacin basada en objetos. Escrito y desarrollado por Sam Stephenson, su principal objetivo es encapsular, mediante simples funciones JavaScript, las acciones ms comunes que se utilizan en el desarrollo de aplicaciones web dinmicas. Prototype comparte caractersticas con otro famoso framework de desarrollo, Ruby & Rails, en el cual, su autor es tambin desarrollador. As, Ruby & Rails incluye Prototype como una parte de su framework para el desarrollo de aplicaciones AJAX, sin embargo, Prototype no se puede considerar parte de Ruby & Rails, ya que por s mismo tiene entidad propia y no necesita de otras herramientas para funcionar. Como conclusin, se podra decir que debido a las magnficas funcionalidades ofrecidas por Prototype, ste ha sido adaptado por otros productos del mercado. Entre los ms destacados podemos citar: Ruby & Rails. Framework para desarrollar aplicaciones web que no tienen por qu ser AJAX. Est escrito en lenguaje de programacin Ruby y se basa en el denominado MVC (Modelo Vista Controlador)2. script.aculo.us. Conjunto de libreras JavaScript que proporcionan efectos dinmicos para las aplicaciones web basados en Prototype3. Rico. Componentes web desarrollados con Prototype que permiten realizar
determinados desarrollos de una forma rpida y eficiente siendo independientes de visualizacin4.
Para ms informacin, visitar su pgina web: http://www.rubyonrails.org/. Para ms informacin, visitar su pgina web: http://script.aculo.us/. Para ms informacin, visitar su pgina web: http://openrico.org/
83
5
http://prototype.conio.net 5.3.1. Funcionalidades
Por ltimo, indicar que la ltima versin de Prototype se puede descargar de su web:
Una de las principales ventajas de Prototype es la facilidad de uso e integracin en una aplicacin. Adems, Prototype ofrece unas funcionalidades bsicas que lo hacen nico por la facilidad que aporta al desarrollo web. Veamos, a continuacin, algunas de ellas: Funcin $(). Esta funcin es considerada una de las ms tiles. Su misin es proporcionar una referencia al objeto de la pgina HTML identificado por su propiedad id. Es decir, es el equivalente a la funcin de DOM getElementById, pero esta funcin est optimizada para que funcione en cualquier navegador, por lo que al desarrollar una aplicacin que la use, no hay que crear cdigo duplicado dependiendo de la plataforma. Veamos un ejemplo de uso de esta funcin:
Enunciado: cambiar el texto de una capa (<div>) al pulsar un link. Cdigo de la pgina html: <html> <head></head> <body>  <div id=capaTexto>Ejemplo</div> <!Link que llamar a la funcin JavaScript que cambiar el contenido--> <a href=javascript:CambiarTexto();>Cambiar Texto</a> </body> </html> Cdigo JavaScript: <script language=javascript> function CambiarTexto(){
84
5
$(capaTexto).innerHTML=Nuevo texto; } </script>
/*Se obtiene la referencia del objeto capaTexto y, haciendo uso de la propiedad innerHTML de JavaScript, se modifica el texto del objeto*/
Por otra parte, la funcin $() posee otra funcionalidad. Es capaz de devolver un array de objetos a partir de sus identificadores o de una referencia a un objeto. Por este motivo, permite trabajar con conjuntos de objetos como si de elementos de un array se tratara. Veamos un ejemplo:
Enunciado: crear un array de objetos. Cdigo de la pgina html: <html> <head></head> <body> <div id=capaTexto>Ejemplo</div> <p id=parafo>Texto de un prrafo</p> <div id=capaPrueba>Texto en una capa</div> <!Link que llamar a la funcin JavaScript que crear el array--> <a href=javascript:CrearArray();>Crear Array</a> </body> </html> Cdigo JavaScript: <script language=javascript> function CambiarTexto(){ /*Se obtiene la referencia del objeto capaTexto*/ var referencia_objeto=$(capaTexto);
85
5
referenciados*/
/*Se crea el array a partir del objeto referenciado por la variable anterior y por los dos identificadores de objetos que no han sido an var arrayObj=$(referencia_objeto,parrafo,capaPrueba); /*Se muestra, usando un alert, el nmero de objetos que forman el nuevo array. En este caso, el resultado es 3*/ alert(El array esta formado por: + arrayObj.length); } </script>
Funcin $F(). Esta funcin sirve para realizar una de las operaciones bsicas en cualquier aplicacin web como es obtener el valor de un campo de un formulario. Su uso es muy simple y, al igual que con otras funciones, nos abstrae de pensar en las diferentes formas de programacin necesarias para obtener esta informacin dependiendo de los navegadores. Un ejemplo del uso de la funcin $F():
Enunciado: Obtener el valor de diferentes objetos del formulario. Cdigo de la pgina html: <html> <head></head> <body> <input type=text id=objTexto name=objTexto value=Objeto Texto> <input type=hidden id=objHidden name=objHidden value=Oculto> <select id=objSelect name=objSelect> <option value=opc1 selected>Opcin 1</option> <option value=opc2>Opcin 2</option> </select>
86
5
</body> </html> Cdigo JavaScript: <script language=javascript> function ObtenerValores(){
<!Link que llamar a la funcin JavaScript que obtiene los valores--> <a href=javascript:ObtenerValores();>Obtener los valores</a>
/*Se muestra un alert informando de cada uno de los valores que toma cada objeto*/ alert(Valor del objeto objTexto: +$F(objTexto)); alert(Valor del objeto objHidden: +$F(objHidden)); alert(Valor del objeto objSelect: +$F(objSelect)); } </script> Resultado: Al ejecutar este cdigo obtendramos la siguiente respuesta: Valor del objeto objTexto: Objeto Texto Valor del objeto objHidden: Oculto Valor del objeto objSelect: opc1
Funcin Form.getElements().Esta instruccin devuelve un array con todos los objetos que forman parte de un formulario cuyo identificador se pasa como parmetro de la funcin. Un posible uso para el cual es muy til esta funcin es para recuperar informacin sobre formularios de mltiples opciones que se construyan dinmicamente.
87
5
Veamos un ejemplo: Enunciado: obtener un array con los objetos del formulario. Cdigo de la pgina html: <html> <head></head> <body> <form name=formulario id=formulario METHOD=POST>
<input type=text id=objTexto name=objTexto value=Objeto Texto> <input type=hidden id=objHidden name=objHidden value=Oculto> <select id=objSelect name=objSelect> <option value=opc1 selected>Opcin 1</option> <option value=opc2>Opcin 2</option> </select> </form> <!Link que llamar a la funcin JavaScript que obtiene el array--> <a href=javascript:ObtenerArray();>Obtener el Array</a> </body> Cdigo Javascript: <script language=javascript> function ObtenerArray(){ var arrayForm=Form.getElements(formulario); for(i=0;i<arrayForm.length;i++){ /*Cdigo para implementar las acciones deseadas*/ } } </script>
88
5
JavaScript. Prototype lo extiende e implementa mucho ms potente.
Funcin $A().Esta funcin convierte cualquier parmetro en un array. Sin embargo, y llegados a este punto, tenemos que hacer un inciso para indicar que el objeto array que implementa Prototype no es exactamente igual que el objeto array de una extensin llamada Enumerable que dota al array de JavaScript de nuevas funcionalidades y lo hace
Veamos, con un ejemplo, el posible uso de la funcin $A() y de la extensin Enumerable:
Enunciado: crear un array con los objetos option de una lista select y recorrerlos. Cdigo de la pgina html: <html> <head></head> <body> <select id=objSelect name=objSelect> <option value=opc1 selected>Opcin 1</option> <option value=opc2>Opcin 2</option> <option value=opc3>Opcin 3</option> </select> <!Link que llamar a la funcin JavaScript que obtiene el array--> <a href=javascript:ObtenerArray();>Obtener el Array</a> </body> </html> Cdigo Javascript: <script language=javascript> function ObtenerArray(){ /*Para empezar, obtenemos una referencia al objeto select usando la funcin $(). Seguidamente, le aplicamos la funcin de JavaScript getElementsByTagName, que devuelve una serie de objetos que cumplen la condicin pasada como
89
5
parmetro. En nuestro caso, los objetos option*/ /*Obtenemos el array de objetos al aplicarle la funcin $A()*/ var arrayOption = $A(refOption);
var refOption=$('objSelect').getElementsByTagName('option');
/*Recorremos el array usando la funcin each que nos la proporciona la extensin Enumerable de Prototype. Esta funcin nos permite recorrer todas las posiciones del array y aplicarle la funcin que le pasemos como parmetro a cada elemento del array.*/ arrayOption.each( function(obj){ /* En este caso, para cada objeto option vamos a mostrar el nombre de cada uno y el texto que posee.*/ alert(obj.nodeName + ': ' + obj.innerHTML); } ); } </script>
Clase Ajax.Request. Esta clase es la que va a proporcionar el acceso para realizar una peticin AJAX. Engloba nuestra funcin motorAjax pero adems incluye, como uno de sus parmetros, el envo de variables de formulario y la llamada a otras funciones cuando la peticin AJAX se ha completado. La definicin de esta clase es la siguiente:
var objAjax = new Ajax.Request(url, {method: 'post', parameters: datos, onComplete: funcion} );
90
5
Veamos mediante un ejemplo el uso de esta clase: Cdigo de la pgina html: <html> <head></head> <body>
Enunciado. Realizar una peticin AJAX y mostrar la carga de datos en la pgina HTML
<select id=objSelect name=objSelect onChange=RealizarPeticion();> <option value=opc1 selected>Opcin 1</option> <option value=opc2>Opcin 2</option> </select> <!En esta capa se mostrar el resultado de la peticin --> <div id=capaResultado></div> </body> Cdigo Javascript: <script language=javascript> function RealizarPeticion(){ /*Se usa $F para obtener el valor seleccionado del objeto select*/ var id_peticion=$F(objSelect); /*Se definen los parmetros que necesita la clase Ajax.Request*/ var url = 'http://localhost/ajax/mostrarOpcion.php'; var parametros = 'id_peticion=' + id_peticion; var metodo=post; /*Se instancia un nuevo objeto de la clase y se definen sus parmetros y la funcin que se llamar al completar la funcin*/ var peticionAjax=new Ajax.Request( url, { method: metodo, parameters: parmetros, onComplete: MostrarRespuesta }); }
91
5
function MostrarRespuesta(originalRequest){ mostrar dicha respuesta*/ } </script>
/*Esta funcin recibe la respuesta de la clase Ajax.Request y usa la funcin $() para $('capaResultado').innerHTML = originalRequest.responseText;
5.3.2. Paquetes de funcionalidad de Prototype A diferencia de Dojo Toolkit, Prototype se compone de un solo fichero js que incluye todas las funcionalidades que ofrece. La desventaja que presenta esta forma de estructurar la informacin es, como es de esperar, que para usar slo alguna de las funcionalidades es necesario incluir todo. Sin embargo, Prototype no es en exceso pesado, ya que, ronda los 60 KB. Los 10 paquetes bsicos que podemos encontrar en Prototype y que agrupan todas las funcionalidades son los siguientes: BASE: este paquete posibilita el uso de JavaScript como un lenguaje orientado a objetos. Est formado por: Class: su funcin es permitir crear clases. Abstract: permite crear clases abstractas. Try.these: posibilita iterar en una lista de opciones hasta encontrar las operaciones que devuelve una accin de tipo verdadero o true. Object.extend(destino,fuente): permite extender y aadir funcionalidades a otras clases. bind(object): vincula a un objeto. bindAsEventListener(object): vincula un listener u oyente a un objeto. toColorPart(): convierte un nmero a un formato de color hexadecimal. PeriodicalExecuter: permite ejecutar rdenes en intervalos de tiempo definidos como parmetro de la clase. $(): funcin que hemos visto anteriormente y que devolva la referencia a un objeto.
92
5
unir la funcin al objeto indicado en el argumento.
COMPACT: paquete que ofrece funciones de compatibilidad. Est formado por: push: que aade la funcionalidad de incluir un elemento en un objeto array. apply(objeto,parmetros): se aplica a una funcin y proporciona un medio de
STRING: paquete que aade funcionalidades a la clase String de JavaScript. Lo forman los siguientes elementos: stripTags: reemplaza los caracteres especiales de HTML. escapeHTML(): codifica los caracteres HTML. unescapeHTML(): decodifica los caracteres HTML. parseQuery(): devuelve un array con la asociacin clave-valor de una query.
ENUMERABLE: posibilita la creacin de colecciones de objetos. ARRAY: extiende la clase array de JavaScript y le aade funciones definidas en Enumerable. Est formado por: $A(): permite crear un array con los objetos pasados como argumentos. each(): realiza una iteracin entre los elementos que forman parte del array sobre el que se aplica. first(): obtiene el primer elemento de un array. last(): obtiene el ltimo elemento de un array.
Ajax: paquete que facilita la comunicacin AJAX. Est formado por: Ajax.Base: establece opciones generales del paquete. Ajax.Request: permite realizar una peticin Ajax. Ajax.Updater: permite realizar una actualizacin de una peticin. Ajax.PeriodicalUpdater: permite realizar actualizaciones peridicas de una peticin.
DOM: paquete que extiende las operaciones bsicas que puede realizarse con JavaScript sobre el DOM. Se compone de: Insertion: posibilita la insercin de nuevos elementos en una pgina HTML. Element: que extiende la clase Object dotando a los objetos de nuevas funciones.
93
5
componen: estos objetos.
FORM: paquete que extiende las opciones de un formulario en JavaScript. Lo
Field: que representa un objeto de un formulario y le aade nuevas funciones a Form: extiende las propiedades de un formulario y lo dota de nuevas funciones. Abstract.EventObserver: crea asociaciones de eventos con objetos.
EVENT: paquete que crea un nuevo gestor de eventos que se pueden asociar a los distintos elementos que conforman una pgina HTML.
POSITION: paquete que dota de nuevas funcionalidades a una pgina HTML aadindole la opcin de determinar posiciones de elementos en la pgina y su manejo.
Por ltimo, debido a la continua mejora que presenta Prototype impulsada por la creciente comunidad de desarrolladores que lo utilizan, se prev que en un corto espacio de tiempo estas funcionalidades sean mayores y se extienda su uso.
94
5
recuerde_
AJAX: Dojo Toolkit y Prototype.
Existen varios medios para facilitar el trabajo con AJAX. Un framework (marco de trabajo) no es ms que un conjunto de funciones creadas para implementar la estructura estndar de una aplicacin. Dos frameworks destacan por las facilidades que ofrecen para trabajar con
Dojo Toolkit es un framework muy robusto, basado en la implementacin de clases de Java.
Dojo Toolkit est apoyado por dos de las mayores empresas: IBM y Sun Microsystems.
Prototype ofrece simplicidad de uso y funcionalidades muy tiles para el desarrollo de una aplicacin web.
El uso de Prototype es cada vez ms habitual en la creacin de aplicaciones AJAX.
Prototype es cada vez ms apoyado por diferentes desarrolladores creando componentes que se basan en l.
95
glosario_
AJAX (Asynchronous JavaScript And XML o JavaScript y XML asncrono). Es una tcnica de desarrollo para crear aplicaciones Web basada en tres tecnologas ya existentes: HTML+CSS, JavaScript y XML alert(). Mtodo del objeto window. Muestra cuadro de dilogos modales de advertencia. API (Application Program Interface). Conjunto de rutinas que una librera, programa o sistema operativo ofrece al programador para realizar una serie de operaciones. Array. Objeto de JavaScript que se utiliza para crear matrices. Atributo. Parmetro, informacin adicional que se puede aadir a un elemento concreto, que especfica ciertas caractersticas o propiedades del mismo, pero no forma parte de su contenido. El valor de un atributo siempre debe ir entre comillas dobles. C Cadena de caracteres (Tipo de dato). Conjunto de smbolos que se procesan como un texto. JavaScript utiliza una pareja de comillas dobles o simples para sealar las cadenas de caracteres. Contenido XML. Informacin contenida entre las etiquetas de apertura y cierre de un elemento de un fichero XML. CSS. Cascade StyleSheet. Es un lenguaje que permite formatear y presentar la informacin de un documento Web (escrito en HTML y/o XML). D Document. Objeto del navegador. Este objeto nos permite acceder a las propiedades de una pgina HTML. Se corresponde con el cuerpo del documento, limitado por las etiquetas <BODY></BODY>. DOM (Document Object Model). API que especifica la manera de acceder a los datos de un documento XML o HTML, segn la especificacin marcada por el W3C. E Elementos. Son las unidades bsicas de construccin de un XML. Los elementos contienen la informacin y pueden contener a su vez otros elementos creando
97
as una estructura jerrquica. Estn limitados por una etiqueta de apertura y
glosario_
otra de cierre. F Function. Conjunto de instrucciones utilizadas en JavaScript a las que se les asigna un nombre y puede ser llamado desde otra parte del script. Los procedimientos function permiten el uso de parmetros y son capaces de devolver un valor. I Interfaz grfica. Conjunto de informacin que se muestra a un usuario para que pueda interactuar con el ordenador a travs del monitor o pantalla. H HMTL(Hipertext Markup Language). Lenguaje de Marcas de Hipertexto. Http (HyperText Transfer Protocol). Protocolo para la comunicacin entre Servidores y Clientes en la WWW. N Navegador web. Programa que permite acceder a la Web y muestra el contenido de las pginas en la pantalla del ordenador del usuario. O Objeto. Entidad bsica de programacin. Los programas crean objetos o alteran sus comportamientos para realizar un objetivo determinado. R Ruby & Rails. Framework para desarrollar aplicaciones web. Est escrito en lenguaje de programacin Ruby y se basa en el denominado MVC (Modelo Vista Controlador).
98
glosario_
URL (Uniform Resource Locator). Permite localizar o acceder de forma sencilla a cualquier recurso de la red desde un navegador Web. Es un subtipo de URI. W W3C. Siglas que corresponden al World Wide Web Consortium. Es un organismo internacional que se encarga de los estndares de todos los lenguajes relacionados con Internet, entre ellos XML y HTML. Estos estndares son aceptados internacionalmente por miles de empresas. XML (eXtensible Markup Language). Lenguaje de marcas utilizado para describir los datos correspondientes a una informacin. XMLHttpRequest. API implementada en los navegador web que permiten la comunicacin entre la parte cliente y la parte servidor para el intercambio de informacin mediante peticiones.
99
referencias web_
WIKIPEDIA, la enciclopedia libre W3C, World Wide Web W3 Schools, the best things in life are free Gecko DOM Reference Prototype, JavaScript Framework dojo, the javascript toolkit
http://es.wikipedia.org/wiki/AJAX http://www.w3c.es http://www.w3schools.com http://developer.mozilla.org/en/docs/Main_Page http://prototype.conio.net
http://dojotoolkit.org/
101
Crane, D. Ajax in action. Manning Publications. 2005.
bibliografa_
Zakas,
Nicholas
C.;
McPeak,
Jeremy;
Fawcett,
Joe.
Professional
AJAX.
WROX/WILEY. 2006.
103

Ajax

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Ajax

Caricato da

Copyright:

Formati disponibili

ndice general_

Base de datos Servidor

Las principales diferencias que podemos observar al usar AJAX son:

El navegador Opera desde la versin 8.0.

DOM Funciones JavaScript

Motor AJAX (XMLHttpRequest)

Modelo AJAX extendido

AJAX es una unin de tres tecnologas ya existentes: HTML+CSS, XML y

HTML+CSS nos proporcionan el medio para crear una pgina Web.

El motor de AJAX: El objeto XMLHttpRequest

2.1. 2.2. 2.3. 2.4. 2.5.

El motor de AJAX: El objeto XMLHttpRequest

Antes de empezar, recordemos qu es y cul es la funcin del objeto XMLHttpRequest:

El motor de AJAX: El objeto XMLHttpRequest

/*Creamos la variable que nos permite instanciar el objeto*/

motorAJAX = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){

motorAJAX = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){

if (!motorAJAX && typeof XMLHttpRequest!='undefined') {

motorAJAX = new XMLHttpRequest(); }

El motor de AJAX: El objeto XMLHttpRequest

MTODOS DEL OBJETO XMLHttpRequest

El motor de AJAX: El objeto XMLHttpRequest

Resultado de la ejecucin del cdigo de ejemplo:

getResponseHeader(nombre_de_la_cabecera) Descripcin. Devuelve la cabecera http, indicada por el parmetro

El motor de AJAX: El objeto XMLHttpRequest

Ejemplo: objAJAX.open('GET','ejemplo.php', false);

El motor de AJAX: El objeto XMLHttpRequest

objAJAX. setRequestHeader ('Content-Type', 'text/html');

El motor de AJAX: El objeto XMLHttpRequest

Para los cdigos numricos ms comunes, la cadena devuelta es:

Ejemplo: var txt_estado_peticion=objAJAX.statusText;

El motor de AJAX: El objeto XMLHttpRequest

Descripcin. Devuelve un cdigo numrico que representa el estado de la

Ejemplo: var estado_servidor=objAJAX.readyState;

EJEMPLO DE USO DE MTODOS Y PROPIEDADES

El motor de AJAX: El objeto XMLHttpRequest

El motor de AJAX: El objeto XMLHttpRequest

El motor de AJAX: El objeto XMLHttpRequest

El motor de AJAX: El objeto XMLHttpRequest

El objeto XMLHttpRequest es un API que est implementada por los

La funcin del objeto XMLHttpRequest es crear un canal de comunicacin

Dispone de mtodos y propiedades a las que se puede acceder usando JavaScript.

El combustible de AJAX: XML

3.1. 3.2. 3.3. 3.4.

El combustible de AJAX: XML

NOCIONES BSICAS SOBRE XML

El combustible de AJAX: XML

La funcionalidad de los atributos es aadir caractersticas a un elemento.

Seguidamente, podemos observar un ejemplo de un documento XML que va a representar

El combustible de AJAX: XML

Nodo Hijo EMPLEADOS

id DNI NOMBRE Atributo

DATOS BSICOS DE UN DOCUMENTO XML

El combustible de AJAX: XML

OBTENCIN DE INFORMACIN DE UN XML MEDIANTE DOM y JAVASCRIPT

El combustible de AJAX: XML

El combustible de AJAX: XML

El combustible de AJAX: XML

Objeto: que representa el nodo hijo.

Ejemplo 1: Obtener el primer nodo de la variable docXML Cdigo fuente:

function ObtenerPrimerNodo (nodo){ var nodoHijo=nodo.firstChild; } ObtenerPrimerNodo(docXML);

El combustible de AJAX: XML

Aplicado a la variable docXML, el resultado sera un objeto con la misma informacin:

/Creamos la variable que nos permite instanciar el objeto/

/6- Recorremos la lista de atributos para obtener la informacin/

/10.3- Aadimos al elemento OPTION creado el valor de tipo Texto/