Laboratorio9 TPI

UNIVERSIDAD DE EL SALVADOR
FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE (UESOCC)
TCNICAS DE PROGRAMACIN PARA INTERNET (TPI)
LABORATORIO 9: INTRODUCCIN A AJAX
CATEDRTICO: ING. FREDY DARO CERNA
INSTRUCTOR: BR. CARLOS EDUARDO CRCAMO
UNA INTRODUCCIN A AJAX
De Wikipedia: Acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y XML), es una tcnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicacin asncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las pginas sin necesidad de recargarlas, la interactividad, velocidad y usabilidad en las aplicaciones. Ajax es una tecnologa asncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualizacin ni el comportamiento de la pgina. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asncrono est formateado en XML. Ajax es una tcnica vlida para mltiples plataformas y utilizable en muchos sistemas operativos y navegadores, dado que est basado en estndares abiertos como JavaScript y Document Object Model (DOM). Seguramente ya hemos visto aplicaciones en internet que utilizan Ajax, entre algunos de los sitios web ms famosos que utilizan esta tcnica esta Google, google utiliza en su buscador Ajax para mostrar opciones de autocompletado, cada vez que escribimos una palabra el mismo navegador nos da sugerencias e incluso muestra resultados mientras escribimos todo eso sin recargar la pgina, esto hace que la bsqueda sea ms eficiente pues no tenemos que esperar a que se envi la peticin al servidor y recargar la pgina para recibir una respuesta. Entre otros sitios y aplicaciones en produccin que utilizan Ajax estn: Google maps: http://maps.google.com.sv/maps?hl=en&tab=wl A9 buscador de amazon: http://www.a9.com
lbumes de fotos online: http://www.flickr.com/ Comunidad de fotos sobre google maps: http://www.panoramio.com/ Bing maps: http://www.bing.com/maps/ Etc, etc.
Prcticamente la gran mayora de sitios utilizan Ajax, lo cual lo vuelve indispensable de conocer, utilizar esta tcnica y aplicarla a nuestros propios sitios web. APLICACIONES WEB TRADICIONALES VS APLICACIONES CON AJAX Una aplicacin web tradicional es un sistema sncrono
Las aplicaciones tradicionales son sncronas, lo que significa que la invocacin espera el resultado, es decir invocas a un mtodo y te quedas en ese punto esperando hasta que se devuelva un resultado (o un error).
Una aplicacin web con Ajax, es un sistema asncrono.
A diferencia de las aplicaciones web tradicionales, las aplicaciones con Ajax son asncronas, quiere decir que si realizas una peticin al servidor pero continas interactuando con la aplicacin, la peticin contina y por lo general se define un callback (algn mtodo o funcin) que recibir la respuesta o el error para tomar alguna accin. La aplicacin no se queda esperando, y puedes enviar ms peticiones y seguir interactuando con la aplicacin sin bloquear la ejecucin del hilo actual.
LA PRIMERA APLICACIN CON AJAX Comenzamos creando una aplicacin sencilla con Ajax, vamos a obtener datos de un archivo *.txt alojado en nuestro servidor, por medio de un botn ejecutaremos nuestro cdigo y obtendremos el texto que contiene el archivo datos.txt, veremos que no hay necesidad de recargar la pgina para ejecutar esa accin, Ajax gestiona este proceso bastante rpido. Para comenzar creamos un documento HTML con el siguiente contenido:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Ajax ejemplo 1 - TPI</title> <script type="text/javascript" src="js/ejemplo1.js"></script> </head> <body> <h1>Ejemplo 1</h1> <button type="button" id="get">Cargar datos</button> <div id="data"> <h2>Acá se mostrará el texto</h2> </div> </body> </html>
Luego creamos un archivo *.js, en este ejemplo lo llamaremos ejemplo1.js, y contendr el siguiente cdigo:
window.onload = function(){ var xhr = false; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ xhr = new ActiveXObject('Microsoft.XMLHTTP') } function showData(source, divID){ if(xhr){ var div = document.getElementById(divID); xhr.open('GET', source, true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ div.innerHTML +='<p>' + xhr.responseText + '</p>'; } }
xhr.send(null); } } var boton = document.getElementById('get'); boton.onclick = function(){showData('datos.txt','data')}; }
Si ejecutamos el cdigo anterior, veremos que se carga el contenido de datos.txt si recargar la pgina.
DETALLE DEL CDIGO Para comenzar, instanciamos el objeto XMLHttpRequest, esto lo debemos de hacer siempre que queramos usar las tcnicas Ajax, el cdigo necesario es el siguiente:
//Para la mayoria de navegadores if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); //para los navegadores IE6 y anteriores }else if(window.ActiveXObject){ xhr = new ActiveXObject('Microsoft.XMLHTTP') }
Este objeto XMLHttpRequest es el que permite comunicarse con el servidor sin recargar la pgina. Los navegadores que normalmente siguen los estndares (Firefox, Safari, Opera, Chrome) implementan el objeto XMLHttpRequest de forma nativa, por lo que se puede obtener a travs del objeto window <<window.XMLHttpRequest>>, este mismo funciona con internet Explorer 7 y posteriores. Los navegadores obsoletos (Internet Explorer 6 y anteriores) implementan el objetoXMLHttpRequest como un objeto de tipo ActiveX << window.ActiveXObject >>. Una vez instanciado el objeto XMLHttpRequest, se prepara la funcin que se encarga de procesar la respuesta del servidor. La propiedad onreadystatechange del
objetoXMLHttpRequest, a esta propiedad le pasamos una funcin annima que se ejecutara una vez la aplicacin reciba respuesta del servidor.
xhr.onreadystatechange = function(){ // cdigo a ejecutar }
Luego de preparar la aplicacin para la respuesta, pasamos a realizar la peticin HTTP

xhr.open('GET', source, true);
Lo anterior se trata de una peticin con el mtodo open(), al que le pasamos tres parmetros, el primero especificando el tipo de peticin GET, segundo se especifica un string con la ruta y nombre del documento que se quiere obtener (source), seguido de un tercer parmetro que bien puede ser true o false, especificamos true para que sea una peticin asncrona. Luego de creada la peticin se enva al servidor mediante el mtodo send(), a este le pasamos un parmetro null, si la peticin es de tipo POST se puede pasar un string como parmetro. Sin embargo, hay que usar las peticiones POST cuando: Un archivo de cach no es una opcin (actualizar un archivo o base de datos en el servidor). Envo de una gran cantidad de datos en el servidor (POST no tiene limitaciones de tamao). Envo de la entrada del usuario (que puede contener caracteres desconocidos), POST es ms robusto y seguro que GET. Dentro de la funcin annima que pasamos a la propiedad onreadystatechange, vemos un if que va de la siguiente manera:
if(xhr.readyState == 4 && xhr.status == 200 )
Se comprueba que se ha recibido la respuesta del servidor mediante el valor de la propiedad readyState, si es igual a 4, significa que se ha completado la inicializacin correctamente. Luego se verifica que sea correcta la respuesta (comprobando si el cdigo de estado HTTP devuelto es igual a 200). Una vez realizadas las comprobaciones, se muestra el contenido de respuesta del servidor, para el ejemplo el texto contenido en datos.txt, el cual lo mostramos mediante la propiedad response.Text, que vemos en el siguiente cdigo:
div.innerHTML +='<p>' + xhr.responseText + '</p>';
EL OBJETO XMLHTTPREQUEST Este objeto tiene una seria de propiedades y mtodos, vamos a describir algunas de las ms importantes. Las propiedades definidas para el objeto XMLHttpRequest son:
Propiedad readyState responseText responseXML status statusText Descripcin Valor numrico (entero) que almacena el estado de la peticin El contenido de la respuesta del servidor en forma de cadena de texto El contenido de la respuesta del servidor en formato XML. El objeto devuelto se puede procesar como un objeto DOM El cdigo de estado HTTP devuelto por el servidor (200 para una respuesta correcta, 404 para "No encontrado", 500 para un error de servidor, etc.) El cdigo de estado HTTP devuelto por el servidor en forma de cadena de texto: "OK", "Not Found", "Internal Server Error", etc.
Los valores definidos para la propiedad readyState son los siguientes:

Valor 0 1 2 3 4 Descripcin No inicializado (objeto creado, pero no se ha invocado el mtodo open) Cargando (objeto creado, pero no se ha invocado el mtodo send) Cargado (se ha invocado el mtodo send, pero el servidor an no ha respondido) Interactivo (se han recibido algunos datos, aunque no se puede emplear la propiedadresponseText) Completo (se han recibido todos los datos de la respuesta del servidor)
Los mtodos para el objeto XMLHttpRequest son los siguientes:

Mtodo abort() getAllResponseHeaders() Descripcin Detiene la peticin actual Devuelve una cadena de texto con todas las cabeceras de la respuesta del servidor Devuelve una cadena de texto con el contenido de la cabecera solicitada Responsable de manejar los eventos que se producen. Se invoca cada vez que se produce un cambio en el estado de la peticin HTTP. Normalmente es una referencia a una funcin JavaScript Establece los parmetros de la peticin que se realiza al servidor. Los parmetros necesarios son el mtodo HTTP empleado y la URL destino (puede indicarse de forma absoluta o relativa) Realiza la peticin HTTP al servidor Permite establecer cabeceras personalizadas en la peticin HTTP. Se debe invocar el mtodo open() antes que setRequestHeader()
getResponseHeader("cabecera")
onreadystatechange
open("metodo", "url")
send(contenido) setRequestHeader("cabecera", "valor")
Fuente: http://librosweb.es/ajax/
ESTADOS DEL OBJETO XMLHTTPREQUEST Ahora vamos a adentrarnos un poco ms en cmo funciona el objeto XMLHttpeRequest, para esto vamos a analizar un ejemplo para ver algunos de los diferentes estados de la propiedad readyState y status. Usado Ajax vamos a cargar del servidor un documento XML de nombre colors.xml, cuyo contenido es el siguiente:
<?xml version="1.0"?> <colors xml:lang="EN"> <color> <name>Aqua</name> <value>#00FFFF</value> </color> <color> <name>Black</name> <value>#000000</value> </color> <color> <name>Blue</name> <value>#0000FF</value> </color> <color> <name>Brown</name> <value>#A52A2A</value> </color> <color> <name>Cyan</name> <value>#00FFFF</value> </color> <color> <name>Fuchsia</name> <value>#FF00FF</value> </color> <color> <name>Gold</name> <value>#FFD700</value> </color> <color> <name>Gray</name> <value>#808080</value> </color> <color> <name>Green</name> <value>#008000</value> </color> <color> <name>Magenta</name> <value>#FF00FF</value>
</color> <color> <name>Maroon</name> <value>#800000</value> </color> <color> <name>Orange</name> <value>#FFA500</value> </color> <color> <name>Pink</name> <value>#FFC0CB</value> </color> <color> <name>Purple</name> <value>#800080</value> </color> <color> <name>Red</name> <value>#FF0000</value> </color> <color> <name>Violet</name> <value>#EE82EE</value> </color> <color> <name>White</name> <value>#FFFFFF</value> </color> <color> <name>Yellow</name> <value>#FFFF00</value> </color> </colors>
El cdigo HMTL ser ms simple, como vemos a continuacin:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Ajax Ejemplo 2 - TPI</title> <script src="ejemplo2.js" type="text/javascript"> </script> </head> <body> <div id="actualizar"> </div> </body> </html>
Ahora creamos un archivo JavaScript que llamaremos ejemplo2.js con el cdigo siguiente:
window.onload = peticion; var xhr = false; function peticion(){ if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ try{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }catch(e){ alert(e); } } if(xhr){ xhr.onreadystatechange = mostrarEstado; xhr.open('GET', 'colors.xml', true); xhr.send(null); }else{ document.getElementById('actualizar').innerHTML = "No se pudo crear el objeto XMLH ttpRequest"; } } function mostrarEstado(){ var elemento = document.getElementById('actualizar'); elemento.innerHTML += "<p>El Estado (state) actual es " + xhr.readyState + " y el cod igo de estado (status) es " + xhr.status + "</p>"; }
Si ejecutamos el cdigo anterior obtendremos lo siguiente:
El Estado (state) actual es 2 y el codigo de estado (status) es 200 El Estado (state) actual es 3 y el codigo de estado (status) es 200 El Estado (state) actual es 4 y el codigo de estado (status) es 200
Podemos notar que se muestran 3 estados diferentes, mas sin embargo el cdigo de estado no cambia, pues todo ha sido correctamente cargado y ejecutado.
La funcin mostrarEstado() es la que se encarga de mostrar los mensajes de estados, mediante el uso de las propiedades readySate y status del objeto XMLHttpRequest, las cuales dan la informacin de lo que est sucediendo durante la peticin al servidor.
elemento.innerHTML += "<p>El Estado (state) actual es " + xhr.readyState + " y el codigo de estado (status) es " + xhr.status + "</p>";
EL CONTENIDO DEL OBJETO XMLHTTPREQUEST Con el objeto XMLHttpRequest podemos obtener los datos como XML, como texto o de ambas formas, dependiendo de nuestras necesidades, con Ajax podemos lograr obtener estos datos como ms nos plazca, para mostrar cmo, vamos a crear un ejemplo, vamos a cambiar un poco el cdigo del ejemplo anterior, tendremos dos botones con cada uno de estos vamos a obtener el archivo colors.xml que es el mismo del ejemplo anterior, de pendiendo que botn se presione vamos a obtener un formato distinto para estos datos, para esto creamos el archivo base HTML de la siguiente forma:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Ajax Ejemplo3 - TPI</title> <script src="js/ejemplo3.js" type="text/javascript"> </script> </head> <body> <button type="button" id="btnXML">Obteniendo un archivo como XML</button> <button type="button" id="btnText">Obteniendo un archivo como texto</button> <div id="actualizar"> </div> </body> </html>
Con el documento HTML listo, procedemos a crear el archivo ejemplo3.js, el cual tendr el siguiente cdigo:
window.onload = iniciar; var xhr = false; var textRequest;
function iniciar(){
document.getElementById('btnXML').onclick = function(){ textRequest = false; peticion(); }; document.getElementById('btnText').onclick = function(){ textRequest = true; peticion(); }; } function peticion(){ if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ try{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }catch(e){ alert(e); } } if(xhr){ xhr.onreadystatechange = mostrar; xhr.open('GET', 'colors.xml', true); xhr.send(null); }else{ document.getElementById('actualizar').innerHTML = "No se pudo crear el objeto XMLH ttpRequest"; } } function mostrar(){ if(xhr.readyState if(xhr.status var msj = }else{ var msj = }
== 4){ == 200){ (textRequest)? xhr.responseText: xhr.responseXML; "Hubo un problema con la peticion " + xhr.status;
document.getElementById('actualizar').innerHTML = msj; } }
Al ejecutar este cdigo, el resultado puede ser de dos formas diferentes, el primero es como un objeto XML y el segundo como elementos dentro de la pgina, los resultados sern los siguientes: [object Document] para el primero caso y para el segundo caso ser algo como esto:
Aqua #00FFFF Azure #F0FFFF Black #000000 Blue #0000FF Brown #A52A2A Crimson #DC143C Cyan #00FFFF Fu chsia #FF00FF Gold #FFD700 Gray #808080 Green #008000Indigo #4B0082 Ivory #FFFFF0 Khaki #F0E68C Laven der #E6E6FA Magenta #FF00FF Maroon #800000 Navy #000080 Olive #808000 Orange #FFA500 Pink #FFC0CB P urple#800080 Red #FF0000 Turquoise #40E0D0 Violet #EE82EE White #FFFFFF Yellow #FFFF00
En el cdigo la funcin mostrar(), es la encargada de realizar esta tarea:

function mostrar(){ if(xhr.readyState if(xhr.status var msj = }else{ var msj = } == 4){ == 200){ (textRequest)? xhr.responseText: xhr.responseXML; "Hubo un problema con la peticion " + xhr.status;
document.getElementById('actualizar').innerHTML = msj; } }
Poniendo especial atencin a la lnea:

var msj = (textRequest)? xhr.responseText: xhr.responseXML;
En la cual decidimos si mostrar los datos como texto o como un objeto XML, la variable textRequest tiene guardada la decisin de cual de ambas opciones hemos elegido y en base a esta los datos se pasan a la variable msj, la lnea de cdigo anterior es equivalente a:
if(textRequest){ var msj = xhr.responseText; }else{ Var msj = xhr.responseXML; }
Por ultimo mostramos los datos en el div:

document.getElementById('actualizar').innerHTML = msj;
Lo interesante de esto es que a pesar de que en el segundo caso hemos retornado los datos como texto dentro de la pgina. Aparentemente es solo texto pero son ms bien objetos en la
pgina, los cuales se convierten en nodos y por lo tanto podemos acceder a estos mediante el DOM y manipularlos con JavaScript a nuestro gusto.
Es difcil determinar si estos son realmente objetos o no, pues a simple vista no lo parece. Para trabajar con Ajax y en general con HTML, CSS y JavaScript, vendra bien tener a la mano un par de herramientas como editores de texto, y algn tipo de herramienta para depurar el cdigo, afortunadamente Firefox y chrome ofrecen una variedad de herramientas o extensiones que se pueden instalar fcilmente en el navegador: Chrome por ejemplo trae incorporado herramientas para desarrolladores, este cuenta con una consola JavaScript muy potente, adems inspectores HTML, sin mencionar que se pueden instalar ms extensiones como por ejemplo: JSONView, que permite ver los objetos JSON. Etc, etc.
Firefox no se queda atrs, tambin trae su propia consola JavaScript, y entre algunas de sus extensiones ms famosas estn: Firebug, el cual es muy potente para inspeccionar el cdigo y de elementos de las pginas web. DOM inspector, este permite inspeccionar el DOM, y da informacin bastante detallada sobre cada elemento. SQLite Manager, para manipular base de datos SQLite, adems tiene su propia consola para ejecutar sentencias SQL. Web Developer, otra herramienta muy completa para trabajar con cualquier proyecto web. En fin hay muchas herramientas en lnea que facilitan la edicin y depuracin de cdigo HTML, CSS y JavaScript, sera ideal buscar algunas de estas y probarlas, en especial las que son de cdigo abierto.
BIBLIOGRAFA Y REFERENCIAS
Steven Holzner (2009): Ajax a Beguiners Guide, MC Graw Hill. Anthony T. Holdener III (2008): Ajax the definitive guide, Orelly. Introduccin a AJAX: http://librosweb.es/ajax/.
http://www.w3schools.com/.

Laboratorio9 TPI

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Laboratorio9 TPI

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSIDAD DE EL SALVADOR

FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE (UESOCC)

TCNICAS DE PROGRAMACIN PARA INTERNET (TPI)

LABORATORIO 9: INTRODUCCIN A AJAX

CATEDRTICO: ING. FREDY DARO CERNA

INSTRUCTOR: BR. CARLOS EDUARDO CRCAMO

UNA INTRODUCCIN A AJAX

Una aplicacin web con Ajax, es un sistema asncrono.

xhr.send(null); } } var boton = document.getElementById('get'); boton.onclick = function(){showData('datos.txt','data')}; }

Luego de preparar la aplicacin para la respuesta, pasamos a realizar la peticin HTTP

Los valores definidos para la propiedad readyState son los siguientes:

Los mtodos para el objeto XMLHttpRequest son los siguientes:

send(contenido) setRequestHeader("cabecera", "valor")

El cdigo HMTL ser ms simple, como vemos a continuacin:

Si ejecutamos el cdigo anterior obtendremos lo siguiente:

En el cdigo la funcin mostrar(), es la encargada de realizar esta tarea:

Poniendo especial atencin a la lnea:

Por ultimo mostramos los datos en el div:

Vous aimerez peut-être aussi