Practica Introduccion A AJAX

Introduccin a AJAX DPWEB/PRWEB Ing.
Tomas Eduardo Urbina EJEMPLO 1 El Objeto XMLHttpRequest XMLHttpRequest es el objeto primario que nos permitir la comunicacin con el servidor de forma asncrona, originalmente fue implementada para Internet Explorer y basada en un ActiveX y ahora los otros navegadores tambin la soportan. Entonces lo primero es detectar el tipo de navegador y crear una instancia del objeto XMLHttpRequest para poder utilizarlo posteriormente, para ello implementamos la siguiente funcin en Javascript. function createXMLHttpRequest() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } } Mtodos y Propiedades El objeto XMLHttpRequest dispone de los siguientes mtodos: send(content): permite enviar datos al servidor. abort(): termina o cancela la peticin actual. getAllResponseHeaders(): devuelve todos los headers de respuesta a la peticin HTTP como pares key/valor. getResponseHeader("header"): devuelve una cadena con el valor del header especificado en"header". open("method", "url"): permite realizar llamadas al servidor, el argumento del method puede ser GET, POST, HEAD, o PUT. setRequestHeader("header", "value"): define un header especifico al valor dado por open(). Adems de ello las propiedades disponibles son las siguientes: onreadystatechange: detector de eventos para ejecutar una funcin cada vez que se detecta el cambio en el estado de la peticin. readyState: es el estado de la peticin. Se tienes cinco estados posibles: 0 (sin iniciar), 1 (cargando), 2 (cargado), 3 (interactuando), 4 (completo) responseText: respuesta del servidor como un cadena de texto. responseXML: respuesta del servidor como un XML. status: cdigo de estado HTTP del servidor (200, 404, etc.) statusText: cdigo de estado HTTP del servidor como texto (OK, Not Found, etc) Ejemplo de Interaccin Sea que tenemos un campo de texto en donde un usuario ingresa su usuario, deseamos que nuestra pgina valide automticamente si este usuario es correcto. Lo primero que
Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina hacemos es detectar que el usuario sale del campo de ingreso de txtuser y un botn para llamar a una funcin Javascript que se encarga de verificar dicho usuario. <input type="text" id="txtuser" name="txtuser"><br> <input type="password" id="txtclave" name="txtclave"><br> <input type="button" id="bt" value="Validar" onClick="validardatos();"> El siguiente paso es crear la funcin validardatos(), el cual tomar en txtuser ingresado lo enviar a un script llamado validar.php que devolver si es o no valido. var xmlHttp; function validardatos { var user = document.getElementById("txtuser"); var clave = document.getElementById("txtclave"); var url = "validar.php?user=" + escape(user.value); xmlHttp = createXMLHttpRequest(); xmlHttp.open("GET", url); xmlHttp.onreadystatechange = onCompleteData; xmlHttp.send(null); } function onCompleteData() { if (xmlHttp.readyState == 4) { alert(xmlHttp.responseText); } } Como se puede observar, creamos una instancia del objeto XMLHttpRequest utilizando la funcin creada anteriormente, luego procedemos a llamar al PHP utilizando el mtodo GET para enviar los datos, luego cuando se detecta el cambio en el estado de la peticin ejecutaremos la funcinonCompleteData, la cual la definimos posteriormente y se encarga de lanzar un alert con la respuesta del servidor. Uniendo todos el cdigo obtenemos nuestro ejemplo de AJAX funcionando y sin utilizar ninguna librera externa para ello: <html> <head> <title>Ajax Demo - Ejemplo 1</title> <script language="JavaScript" type="text/javascript"> function createXMLHttpRequest() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } } var xmlHttp;
Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina function validardatos { var user = document.getElementById("txtuser"); var clave = document.getElementById("txtclave"); var url = "validar.php?user=" + escape(user.value); xmlHttp = createXMLHttpRequest(); xmlHttp.open("GET", url); xmlHttp.onreadystatechange = onCompleteData; xmlHttp.send(null); } function onCompleteData() { if (xmlHttp.readyState == 4) { alert(xmlHttp.responseText); } } </script> </head> <body> Validar Usuario con AJAX: <br> <input type="text" id="txtuser" name="txtuser"><br> <input type="password" id="txtclave" name="txtclave"><br> <input type="button" id="bt" value="Validar" onClick="validardatos();"> </body> </html> EJEMPLO 2 Confeccionaremos un ejemplo donde veremos que aparecen muchos conceptos, no se preocupe si no los comprende en su totalidad ya que los mismos se vern en forma detallada a lo largo de este curso. La idea fundamental de este ejercicio es conocer como debemos estructurar nuestras pginas y ver que introduce de nuevo el empleo de AJAX. Confeccionaremos un problema muy sencillo, imaginemos que tenemos una lista de hipervnculos con los distintos signos del horscopo y queremos que al ser presionado no recargue la pgina completa sino que se enve una peticin al servidor y el mismo retorne la informacin de dicho signo, luego se actualice solo el contenido de un div del archivo HTML. Este problema se puede resolver muy fcilmente si refrescamos la pgina completamente al presionar el hipervnculo, pero nuestro objetivo es actualizar una pequea parte de la pgina y ms precisamente el div que debe mostrar los datos del signo seleccionado.
Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina Si bien nuestra pgina solo contendr los hipervnculos a los distintos signos en un caso real la pgina puede contener muchos otros elementos HTML con imgenes, otros hipervnculos etc. los cuales no debern sufrir cambios (ni parpadeo) ya que solo se modificar el elemento div respectivo mediante DHTML. Esta actualizacin parcial de la pgina tiene muchas ventajas:

Reducimos el ancho de banda requerido al no tener que recuperar toda la pgina. Agilizamos la actualizacin de la pgina. Reducimos el parpadeo de la pgina. Hacemos ms natural la navegacin del sitio.
Este ejemplo requiere los siguientes archivos como mnimo: 1. El archivo HTML (es la pgina que se ve en el navegador) 2. El archivo JS (contiene todas las rutinas JavaScript que permiten actualizar dinmicamente la pgina HTML (mediante DHTML) y las rutinas que permiten comunicarse con el servidor para el envo y recepcin de informacin. 3. La hoja de estilo, es decir el archivo CSS 4. La pgina que contiene el script que se ejecuta en el servidor(en nuestro caso emplearemos el lenguaje PHP igualmente puede ser cualquier otro lenguaje) Comencemos a presentar los distintos archivos para resolver este problema:
Pag_ajax1.htm <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1>Signos del horscopo.</h1> <div id="menu"> <p><a id="enlace1" href="ej_ajax_1.php?cod=1">Aries</a></p> <p><a id="enlace2" href="ej_ajax_1.php?cod=2">Tauro</a></p> <p><a id="enlace3" href="ej_ajax_1.php?cod=3">Geminis</a></p> <p><a id="enlace4" href="ej_ajax_1.php?cod=4">Cancer</a></p> <p><a id="enlace5" href="ej_ajax_1.php?cod=5">Leo</a></p> <p><a id="enlace6" href="ej_ajax_1.php?cod=6">Virgo</a></p> <p><a id="enlace7" href="ej_ajax_1.php?cod=7">Libra</a></p> <p><a id="enlace8" href="ej_ajax_1.php?cod=8">Escorpio</a></p> <p><a id="enlace9" href="ej_ajax_1.php?cod=9">Sagitario</a></p> <p><a id="enlace10" href="ej_ajax_1.php?cod=10">Capricornio</a></p> <p><a id="enlace11" href="ej_ajax_1.php?cod=11">Acuario</a></p> <p><a id="enlace12" href="ej_ajax_1.php?cod=12">Piscis</a></p> </div> <div id="detalles">Seleccione su signo.</div> </body> </html>
Esta pgina contiene HTML puro. Es importante notar que debemos incorporar los dos archivos externos .css y .js mediante los elementos HTML respectivos:
Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina

<script src="funciones.js" language="JavaScript"></script> <link rel="StyleSheet" href="estilos.css" type="text/css">
La hoja de estilo solo tiene el objetivo de mejorar la presentacin en la pgina de los doce hipervnculos de los signos del horscopo. Puede probar de eliminar el archivo .css mediante el borrado del elemento link del archivo HTML y el problema debera continuar funcionando, por supuesto con una presentacin mucho ms pobre. Podemos observar que cada hipervnculo solicita la misma pgina al servidor pero pasndole como parmetro un valor distinto, con esto podremos detectar en el servidor que signo a elegido el operador. El segundo archivo contiene las reglas de estilo que se definen para el archivo HTML:
estilos.css #menu { font-family: Arial; margin:5px; } #menu p { margin:0px; padding:0px; } #menu a { display: block; padding: 3px; width: 160px; background-color: #f7f8e8; border-bottom: 1px solid #eee; text-align:center; } #menu a:link, #menu a:visited { color: #f00; text-decoration: none; } #menu a:hover { background-color: #369; color: #fff; } #detalles { background-color:#ffc; text-align:left; font-family:verdana; border-width:0; padding:5px; border: 1px dotted #fa0; margin:5px; }
No haremos un anlisis de estas reglas ya que CSS ya fue visto anteriormente. Inclusive si todava conoce poco de CSS y no quiere estudiarlo por ahora puede anular el archivo
Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina no incorporndolo en la pgina HTML suprimiento el elemento link. Esto afectara la apariencia del ejemplo. Ahora viene uno de los puntos claves donde debemos prestar ms atencin, esto se encuentra en las rutinas JavaScript que debemos implementar para comunicarnos con el servidor, adems de lo ya conocido de DHTML para aadir elementos HTML en forma dinmica. Veamos el archivo en su totalidad y expliquemos en forma muy global:
funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob; for(f=1;f<=12;f++) { ob=document.getElementById('enlace'+f); addEvent(ob,'click',presionEnlace,false); } } function presionEnlace(e) { if (window.event) { window.event.returnValue=false; var url=window.event.srcElement.getAttribute('href'); cargarHoroscopo(url); } else if (e) { e.preventDefault(); var url=e.target.getAttribute('href'); cargarHoroscopo(url); } }
var conexion1; function cargarHoroscopo(url) { if(url=='') { return; } conexion1=crearXMLHttpRequest(); conexion1.onreadystatechange = procesarEventos; conexion1.open("GET", url, true); conexion1.send(null); } function procesarEventos() { var detalles = document.getElementById("detalles");

if(conexion1.readyState == 4) { detalles.innerHTML = conexion1.responseText; } else { detalles.innerHTML = 'Cargando...'; } } //*************************************** //Funciones comunes //*************************************** function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } function crearXMLHttpRequest() { var xmlHttp=null; if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); return xmlHttp; }
En este punto si es indispensable haber conocido HTML para entender como registramos los eventos para los doce hipervnculos. Recordemos que siempre llamaremos a la funcin addEvent (que se encuentra codificada en el mismo archivo) para hacer compatible nuestro cdigo con el navegador IE (recordemos que no cumple los estndares referente a eventos). Lo primero que se ejecuta es la llamada a la funcin inicializarEventos() inmediatamente luego que la pgina se a cargado por completo en el navegador:
function inicializarEventos() { var ob; for(f=1;f<=12;f++) { ob=document.getElementById('enlace'+f); addEvent(ob,'click',presionEnlace,false);

} }
En esta funcin registramos el evento click para los doce enlaces de los signos del horscopo. Para facilitar la codificacin recordemos que todos tienen casi el mismo nombre, difieren por un nmero al final. Luego dentro de un for rescatamos la referencia a cada enlace y registramos el evento click indicando que se debe llamar a la funcin presionEnlace. La funcin presin enlace:
function presionEnlace(e) { if (window.event) { window.event.returnValue=false; var url=window.event.srcElement.getAttribute('href'); cargarHoroscopo(url); } else if (e) { e.preventDefault(); var url=e.target.getAttribute('href'); cargarHoroscopo(url); } }
Primero detecta que navegador se trata y procede a desactivar el evento por defecto para el hipervnculo, luego llama a la funcin cargarHoroscopo pasandole como referencia la url que contiene el hipervnculo. Veamos ahora la funcin cargarHoroscopo:
var conexion1; function cargarHoroscopo(url) { if(url=='') { return; } conexion1=crearXMLHttpRequest() conexion1.onreadystatechange = procesarEventos; conexion1.open("GET", url, true); conexion1.send(null); }
Previo a la definicin de esta funcin definimos una variable global llamada conexion1 que ser utilizada en esta y la siguiente funcin. La funcin recibe como parmetro la url a la que debe hacer la peticin de datos. Lo primero que verificamos que el parmetro no llegue vaco, en caso de estar vaco salimos con el comando return.
Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina El siguiente paso es llamar a la funcin crearXMLHttpRequest que crea y retorna un objeto de la clase XMLHttpRequest (luego veremos que este objeto nos permite comunicarnos con el servidor de forma asincrnica):
conexion1=crearXMLHttpRequest()
Esta funcin se encuentra codificada ms abajo dentro del mismo archivo y tiene por objetivo retornar un objeto de la clase XMLHttpRequest. La creacin del objeto de la clase XMLHttpRequest se implementa separada en otra funcin porque depende del navegador que se trate la sintaxis cambia:
function crearXMLHttpRequest() { var xmlHttp=null; if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); return xmlHttp; }
Como podemos observar verificamos si se trata del navegador IE, en caso afirmativo la creacin del objeto XMLHttpRequest es:
if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
Si no se trata del navegador IE verificamos si existe la clase XMLHttpRequest en el objeto window, en caso afirmativo creamos un objeto de dicha clase:
if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();
Por la diferencia en la forma de crear un objeto de la clase XMLHttpRequest hemos movido esta actividad a esta funcin. La funcin retorna la referencia del objeto creado:
return xmlHttp;
Retornemos a la funcin cargarHoroscopo y veamos que hacemos con el objeto de la clase XMLHttpRequest que acabamos de crear:
conexion1=crearXMLHttpRequest() conexion1.onreadystatechange = procesarEventos; conexion1.open("GET", url, true); conexion1.send(null);
Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina La propiedad onreadystatechange se inicializa con la referencia de una funcin que ser la encargada de procesar los datos enviados por el servidor, veremos el cdigo de esta funcin ms adelante. Seguidamente llamamos al mtodo open que tiene tres parmetros:
Primero el mtodo de envo de datos (GET o POST) Recordemos que si los datos se envan como parmetros (como es nuestro ejemplo) debemos indicar que utilizamos el mtodo GET El segundo parmetro es la url y la pgina que procesar los datos que le eviemos. El tercer parmetro indicamos si se procesarn los datos de forma asncrona (true) o sncrona (false)
Por ltimo nos falta llamar al mtodo send para que comience el proceso:
conexion1.send(null);
Nos queda explicar la funcin procesarEventos que se ejecuta cada vez que el objeto conexion1 de la clase XMLHttpRequest cambia de estado. Tengamos en cuenta que los estados posibles de este objeto son:

0 No inicializado. 1 Cargando. 2 Cargado. 3 Interactivo. 4 Completado.
Para conocer el estado del objeto debemos acceder a la propiedad readyState que almacena alguno de los cinco valores que enunciamos. Nuestra funcin procesarEventos es:
function procesarEventos() { var detalles = document.getElementById("detalles"); if(conexion1.readyState == 4) { detalles.innerHTML = conexion1.responseText; } else { detalles.innerHTML = 'Cargando...'; } }
Decamos que cuando la propiedad readyState almacena 4 significa que todos los datos han llegado desde el servidor, luego mediante el mtodo responseText recuperamos la informacin enviada por el servidor. Luego cualquier otro valor que contenga la propiedad readyState mostramos dentro del div el mensaje 'cargando...'.
Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina Pero todava nos queda la pgina que contiene el programa en el servidor, en nuestro caso empleamos el lenguaje PHP (tener en cuenta que podemos emplear otro lenguaje de servidor para esto) Veamos el cdigo de la pagina PHP: Pongale como nombre ej_ajax_1.php. Con la instruccin request.item recuperaremos el parmetro cod que enviamos en cada signo. Asi: <?php if ($_GET['cod']==1) { echo <strong>Aries:</strong> Hoy los cambios sern fsicos, personales, de carcter, Te sentirs impulsivo y tomars iniciativas. Perodo en donde considerars unirte a agrupaciones de beneficencia, o de ayuda a los dems.'; } ?> Contine usted con el resto de opciones y signos.
Aries: Hoy los cambios sern fsicos, personales, de carcter, Te sentirs impulsivo y tomars iniciativas. Perodo en donde considerars unirte a agrupaciones de beneficencia, o de ayuda a los dems. Tauro: Hoy los cambios sern privados, ntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de retiro. Tu cnyuge puede aportar buen status a tu vida o apoyo a tu profesin. Gminis: Los asuntos de hoy tienen que ver con las amistades, reuniones, actividades con ellos. Da esperanzado, ilusiones. Mucha energa sexual y fuerza emocional. Deseos difciles de controlar."; Cancer: Este da la profesin y las relaciones con superiores y con tu madre sern de importancia. Actividad en relacin a estos temas. Momentos positivos con compaeros de trabajo. Actividad laboral agradable. Leo: Este da los estudios, los viajes, el extranjero y la espiritualidad sern lo importante. Pensamientos, religin y filosofa tambin. Vivencias krmicas de la poca te vuelven responsable tomando decisiones. Virgo: Para este da toma importancia tu vida sexual, tal vez miedos, temas legales, juicios o herencias. Experiencias extraas. Hay karma de prueba durante este perodo en tu parte psicolgica, generndose algunos replanteos. Libra: Hoy todo asunto tiene que ver con tu pareja, tambin con socios, con la gente o el pblico. Ellos sern lo ms importante del

da. Ganancias a travs de especulaciones o del juego. Actividades vocacionales artsticas. Escorpio: Hoy todo asunto tiene que ver con temas de trabajo y de salud. Presta atencin a ambos. Experiencias diversas con compaeros. Durante este perodo tendrs muchos recursos para ganar dinero."; Sagitario: Durante este da se vivirn cambios en relacin a los noviazgos o a los hijos. Creatividad, actividad, diversiones y salidas. Perodo de encuentros con personas o situaciones que te impresionan. Capricornio: Los cambios del da tienen que ver con tu hogar, con la convivencia y con el padre. Asuntos relativos al carcter en la convivencia. El karma de responsabilidad de estos momentos te acercar al mundo de lo desconocido, mucha madurez y contacto con el ms all. Acuario: Hoy todo asunto tiene que ver con el entorno inmediato, hermanos y vecinos, con la comunicacin, los viajes cortos o traslados frecuentes. El hablar y trasladarse ser importante hoy. Mentalidad e ideas activas.
Piscis: Durante este da se vivirn cambios en la economa, movimientos en los ingresos, negocios, valores. Momentos de gran fuerza y decisin profesionales, buscars el liderazgo.
Mediante $_GET recuperamos el valor del parmetro cod y mediante una serie de if verificamos si almacena el valor 1 procedemos a generar un texto referente al signo Aries, si tiene un 2 generamos un texto referente al signo Tauro y as sucesivamente. Hay que tener en cuenta que no se estar enviando una pgina HTML completa, por eso no tiene los elementos Head, Body etc. sino es ms bien un archivo de texto que luego ser aadido en forma dinmica al div de la pgina HTML. Debe quedar claro que los datos se podran haber rescatado perfectamente de una base de datos, pero por simplicidad hemos dispuesto estos 12 if y generado el texto respectivo.

Practica Introduccion A AJAX

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Practica Introduccion A AJAX

Enviado por

Direitos autorais:

Formatos disponíveis

Introduccin a AJAX DPWEB/PRWEB Ing.

Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina

Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina

Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina

0 No inicializado. 1 Cargando. 2 Cargado. 3 Interactivo. 4 Completado.

Introduccin a AJAX DPWEB/PRWEB Ing. Tomas Eduardo Urbina

Você também pode gostar