curso de ajax - ajaxya

Ajax Ya desde CERO

Ajax Ya desde CEROEl objetivo de este tutorial es poder aprender Ajax viendo un concepto terico, luego algunos ejercicios resueltos y otros por resolver. Puede desarrollar los ejercicios en el sitio, probarlos, modificarlos y ver los resultados inmediatamente. A lo largo del curso se introducen conceptos de Ajax desde CERO, si esta olvidado de HTML, JavaScript, CSS, PHP o DHTML puede visitar HTML Ya, JavaScript Ya, CSS Ya, PHP Ya y DHTML Ya 1 - Qu es AJAX? 2 - Ventajas y desventajas de AJAX. 3 - Un ejemplo con AJAX. 4 - El mismo ejemplo sin AJAX. 5 - Objeto XMLHttpRequest 6 - Pasando datos al servidor por el mtodo GET. 7 - Pasando datos al servidor por el mtodo POST. 8 - Recuperando datos mediante la propiedad responseText del objeto XMLHttpRequest 9 - Recuperando datos mediante la propiedad responseXML del objeto XMLHttpRequest 10 - Propiedades onreadystatechange y readystate. 11 - Propiedades status y statusText. 12 - Mtodo abort del objeto XMLHttpRequest 13 - Mostrar un gif animado mientras se envan y reciben los datos del servidor. 14 - Paginacin con AJAX 15 - Cargar un control de tipo select 16 - Mostrar un tooltip con datos recuperados del servidor en forma asincrnica 17 - Autocompletar un control de tipo text 18 - Encuenta con AJAX 19 - Qu es JSON? 20 - Recuperar datos del servidor en formato JSON 21 - De PHP a JSON (utilizando la librera JSON.php) 22 - De JavaScript a JSON (utilizando la librera json.js) 23 - De JSON a JavaScript (utilizando la librera json.js) 24 - De JSON a PHP (utilizando la librera JSON.php) 25 - Pizarra interactiva multiusuario

1 - Qu es AJAX?AJAX son las siglas de Asynchronous JavaScript And XML. No es un lenguaje de programacin sino un conjunto de tecnologas (HTML-JavaScript-CSS-DHTML-PHP/ASP.NET/JSP-XML) que nos permiten hacer pginas de internet ms interactivas. La caracterstica fundamental de AJAX es permitir actualizar parte de una pgina con informacin que se encuentra en el servidor sin tener que refrescar completamente la pgina. De modo similar podemos enviar informacin al servidor. La complejidad se encuentra en que debemos domininar varias tecnologas: HTML o XHTML CSS JavaScript DHTML Bsicamente debemos dominar todos los objetos que proporciona el DOM. XML Para el envo y recepcin de los datos entre el cliente y el servidor. PHP o algn otro lenguaje que se ejecute en el servidor (ASP.Net/JSP) En este curso suponemos que domina las tecnologas mencionadas, en caso de no ser asrecomiendo recorrer los cursos de HTML Ya, JavaScript Ya, CSS Ya, PHP Ya y DHTML Ya, luego todo lo nuevo que aparezca lo hiremos explicando lentamente a travs de ejemplos.

Ajax Ya desde CERO

2 - Ventajas y desventajas de AJAX.Ventajas: Utiliza tecnologas ya existentes. Soportada por la mayora de los navegadores modernos. Interactividad. El usuario no tiene que esperar hasta que llegen los datos del servidor. Portabilidad (no requiere plug-in como Flash y Applet de Java) Mayor velocidad, esto debido que no hay que retornar toda la pgina nuevamente. La pgina se asemeja a una aplicacin de escritorio. Desventajas: Se pierde el concepto de volver a la pgina anterior. Si se guarda en favoritos no necesariamente al visitar nuevamente el sitio se ubique donde nos encontrabamos al grabarla. La existencia de pginas con AJAX y otras sin esta tecnologa hace que el usuario se desoriente. Problemas con navegadores antiguos que no implementan esta tecnologa. No funciona si el usuario tiene desactivado el JavaScript en su navegador. Requiere programadores que conozcan todas las tecnologas que intervienen en AJAX. Dependiendo de la carga del servidor podemos experimentar tiempos tardos de respuesta que desconciertan al visitante.

3 - Un ejemplo con AJAX.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 completasino 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. 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. La mayora de los problemas requieren los siguientes archivos como mnimo: El archivo HTML (es la pgina que se ve en el navegador) 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. La hoja de estilo, es decir el archivo CSS La pgina que contiene el script que se ejecuta en el servidor(en nuestro caso emplearemos el lenguaje PHP) Comencemos a presentar los distintos archivos para resolver este problema:pagina1.html

Ajax Ya desde CEROProblema Signos del horscopo. Aries Tauro Geminis Cancer Leo Virgo Libra Escorpio Sagitario Capricornio Acuario Piscis Seleccio ne su signo.

Esta pgina contiene HTML puro. Es importante notar que debemos incorporar los dos archivos externos .css y .js mediante los elementos HTML respectivos:

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 eleme link nto 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 {

Ajax Ya desde CERObackground -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 corresponden al tema 28 del curso de CSS Ya "Creacin de un men vertical configurando las pseudoclases", puede refrescar los conceptos all. Inclusive si todava conoce poco de CSS y no quiere estudiarlo por ahora puede anular el archivo no incorporndolo en la pgina HTML suprimiento el elemento link. 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 (recuerde que a lo largo de este curso iremos profundizando todos estos conceptos de comunicacin con el servidor):funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob; for(f=1;f

Mediante el vector asociativo $_REQUEST 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. Veremos ms adelante problemas que acceden a bases de datos. Hasta ac el primer problema de AJAX. Le recomiendo pasar a la seccin de "Problemas Resueltos" y ejecutar este ejercicio, releer nuevamente estos conceptos y tratar de hacer modificaciones sencillas al problema.

4 - El mismo ejemplo sin AJAX.Volveremos a confeccionar el mismo problema que muestra una lista de hipervnculos con los distintos signos del horscopo, a diferencia del problema expuesta en el concepto anterior ahora no emplearemos AJAX, es decir recargaremos la pgina completamente al presionar alguno de los hipervnculos. Como debemos recargar la pgina y actualizar en el servidor los datos del signo del horscopo seleccionado confeccionaremos solo una pgina php. pagina1.php Problema Signos del horscopo. Aries Tauro

Ajax Ya desde CEROGeminis Cancer Leo Virgo Libra Escorpio Sagitario Capric ornio Acuario Piscis

Como podemos observar los hipervnculos llaman a la misma pgina:href="pagina1.php?cod=1">Aries

Luego el cdigo PHP que se ejecuta en el servidor verifica el valor que llega como parmetro y muestra el detalle del signo del horscopo seleccionado:if ($_REQUEST['cod']==1) echo "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.";

En caso de no llegar parmetros a la pgina (normalmente la primer vez que cargamos la pgina) el primer if se verifica verdadero:if (!isset($_REQUEST['cod'])) echo "Seleccione su signo.";

Si comparamos este ejemplo con el anterior veremos que utilizar AJAX reduce la cantidad de informacin que pedimos al servidor, tambin evitamos la recarga completa de la pgina (imaginemos un sitio que contiene muchos elementos el redibujado es lento y engorroso) La hoja de estilo no tiene cambios con respecto al problema anterior:#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; }

Ajax Ya desde CERO#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; }

5 - Objeto XMLHttpRequestEl objeto XMLHttpRequest es un elemento fundamental para la comunicacin asincrnica con el servidor. Este objeto nos permite enviar y recibir informacin en formato XML y en general en cualquier formato (como vimos en el ejercicio anterior retornando un trozo de archivo HTML) La creacin de un objeto de esta clase vara si se trata del Internet Explorer de Microsoft, ya que este no lo incorpora en JavaScript sino que se trata de una ActiveX:if (window.ActiveXObject) xmlHttp = new Act iveXObject("Microsoft.XMLHTTP");

En cambio en FireFox y otros navegadores lo incorpora JavaScript y procedemos para su creacin de la siguiente manera:if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();

Como hemos visto en el problema anterior siempre implementaremos una funcin que nos retorne un objeto XMLHttpRequest haciendo transparente el proceso en cuanto a navegador donde se est ejecutando:function crearXMLHttpRequest() { var xmlHttp=null; if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); return xmlHttp; }

Es decir la funcin crearXMLHttpRequest se encargar de retornarnos un objeto de la clase XMLHttpRequest. Las propiedades principales del objeto XMLHttpRequest son: onreadystatechange Almacena el nombre de la funcin que se ejecutar cuando el objeto XMLHttpRequest cambie de estado. readyState Almacena el estado del requerimiento hecho al servidor, pudiendo ser: 0 No inicializado (el mtodo open no a sido llamado) 1 Cargando (se llam al mtodo open) 2 Cargado (se llam al mtodo send y ya tenemos la cabecera de la peticin HTTP y el status) 3 Interactivo (la propiedad responseText tiene datos parciales) 4 Completado (la propiedad responseText tiene todos los datos pedidos al servidor)

Ajax Ya desde CERO

responseText Almacena el string devuelto por el servidor, luego de haber hecho una peticin. responseXML Similar a la anterior (responseText) con la diferencia que el string devuelto por el servidor se encuentra en formato XML. Los mtodos principales del objeto XMLHttpRequest son: open Abre un requerimiento HTTP al servidor. send Enva el requerimiento al servidor. Confeccionaremos otro problema para fijar conceptos vistos hasta el momento. Confeccionar una pgina que muestre una imagen y permita calificarla con un valor entre 1 y 10. Permitir ingresar el nombre del visitante. Disponer de un control de tipo select para seleccionar el valor. Luego al presionar un botn enviar el valor seleccionado utilizando el objeto XMLHttpRequest al servidor donde almacenaremos en un archivo de texto el nombre del visitante y el puntaje. Retornar luego todos los votos hasta el momento. Actualizaremos la pgina HTML con todos los nombres y votos hasta e momento. l El archivo HTML es:pagina1.html Problema Vote esta foto Nombre:
Voto: seleccione 1 2 3 4 5 6 7 8 9 10

Lo primero que podemos observar es que no utilizaremos una hoja de estilo para reducir la complejidad del problema y concentrarnos en la lgica. Si vemos utilizamos controles de tipo input, select y button, pero no disponemos ningn formu lario. Esto se debe a que los datos ingresados se enviarn en forma asncrona mediante el objeto XMLHttpRequest. Otro punto a destacar que a cada control le definimos la propiedad id, esta es de suma importancia para poder accederla desde JavaScript. No definimos la propiedad name ya que no se enviarn los datos por medio de formulario. Nuestro archivo con las funciones JavaScript es:funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElement ById('boton1'); addEvent(ob,'click',presionBoton,false);

Ajax Ya desde CERO} function presionBoton(e) { var ob1=document.getElementById('voto'); var ob2=document.getElementById('nombre'); cargarVoto(ob1.value,ob2.value); } var conexion1; function cargarVoto(voto,nom) { conexion1=crearXMLHttpRequest(); conexion1.onreadystatechange = procesarEventos; conexion1.open('GET','pagina1.php?puntaje='+voto+'&nombre='+nom, true); conexion1.send(null); } function procesarEventos() { var resultados = document.getElementById("resultados"); if(conexion1.readyState == 4) { resultados.innerHTML = conexion1.responseText; } else { resultados.innerHTML = 'Cargando...'; } } //*************************************** //Funciones comunes a todos los problemas //*************************************** 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 = n ew ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); return xmlHttp; }

Ajax Ya desde CERO Como podemos observar tiene mucho en comn con el primer ejemplo de AJAX que habamos desarrollado. Lo primero que hacemos es inicializar el evento load con la funcin inicializarEventos, en esta inicializamos el evento click del nico botn que contiene la pgina:addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getE lementById('boton1'); addEvent(ob,'click',presionBoton,false); }

Cuando se presiona el botn se dispara la funcin presionBoton, donde obtenemos la referencia a los dos controles (select y text) que tienen almacenados los valores. Llamamos finalmente a la funcin cargarVoto:function presionBoton(e) { var ob1=document.getElementById('voto'); var ob2=document.getElementById('nombre'); cargarVoto(ob1.value,ob2.value); }

La funcin cargarVoto recibe como parmetro el valor del voto y el nombre del visitante, seguidamente llama a la funcin crearXMLHttpRequest. Por ltimo inicializamos la propiedad onreadystatechange y llamamos a los mtodos open y send. En el mtodo open pasamos los dos datos en la cabecera de la peticin de pgina.var conexion1; function cargarVoto(voto,nom) { conexion1=crearXMLHttpRequest() conexion1.onreadystatechange = procesarEventos; conexion1.open('GET','pagina1.php?puntaje='+voto+'&nombre='+nom, true); conexion1.send(null); }

Nos queda la funcin procesarEventos, que cuando la propiedad readyState del objeto XMLHttpRequest tiene un valor 4 (proceso completado) recupera el valor de la propiedad responseText con la informacin que se retorn desde el servidor:function procesarEventos() { var resultados = document.getE lementById("resultados"); if(conexion1.readyState == 4) { resultados.innerHTML = conexion1.responseText; } else { resultados.innerHTML = 'Cargando...'; } }

El archivo PHP que se ejecuta en el servidor es el siguiente:pagina1.php

Lo primero que hacemos es abrir el archivo para agregar datos, es decir no borramos los votos existentes (puede probar de cambiar "a" de append por "w" que crea el archivo):$ar=fopen("puntaje.txt","a") or die("No se pudo abrir el archivo");

Luego recuperamos los parmetros que llegan a la pgina y los grabamos:fputs($ar,"Nombre:".$_REQUEST['nombre']."
"); fputs($ar,"Vo to:".$_REQUEST['puntaje']."

");

Cerramos y abrimos nuevamente el archivo, pero ahora con el objetivo de leerlo:fclose($ar); $ar=fopen("puntaje.txt","r") or die("No se pudo abrir el archivo");

Por ltimo generamos el archivo a retornar al navegador:while (!feof($ar)) { $linea=fgets($ar); echo $linea; }

Con este segundo ejemplo debemos poder identificar que partes son comunes al problema anterior.

6 - Pasando datos al servidor por el mtodo GET.Para indicar cual es el mtodo de envo de los datos al servidor lo hacemos en el primer parmetro del mtodo open del objeto XMLHttpRequest:conexion1.open('GET','pagina1.php?puntaje='+voto+'&nombre='+nom, true);

En este ejemplo vemos como indicamos que el envo de los datos se hace por el mtodo GET. Si lo hacemos de esta forma tenemos que tener mucho cuidado en la codificacin del segundo parmetro del mtodo open donde indicamos el nombre de la pgina a pedir. Seguido al nombre de la pgina debe ir el signo de interrogacin, el nombre del parmetro, luego un igual y el valor del parmetro. En caso de haber ms de un parmetro debemos separarlos mediante el caracter ampersand. Por ltimo el tercer parmetro del mtodo open normalmente se pasa el valor true indicando que el requerimiento de la pgina es asncrona (esto permite al visitante continuar interactuando con la pgina sin que se congele hasta llegar la solicitud) Confeccionaremos un problema similar al anterior, es decir que nos permita calificar una foto con un valor de 1 al 10. La diferencia es que la calificacin ser por medio de una lista de hipervnculos del 1 al 10. Adems haremos que la barra de seleccin de la calificacin cambie de color cuando ingresamos con el mouse. Veremos que la mayor dificultad se encuentra en la codificacin de esta ltima caracterstica ms que en la comunicacin asincrnica. El archivo HTML es (pagina1.html): Problema

Ajax Ya desde CERO Vote esta foto

2 3 4 5 6 7 8 9

10
Ver resultados

La foto se encuentra en el directorio inmediatamente superior por eso indicamos el ../ :

Para no complicar ms el problema el archivo de resultados se almacena en un archivo de texto llamado votos.txt (al presionar el hipervnculo procedemos a mostrarlo en el navegador, esto nos podr permitir verificar si realmente el voto se registr en el servidor):Ver resultados

Cada hipervnculo pasa como parmetro la calificacin respectiva:

La hoja de estilo queda definida como sigue (estilos.css):.voto { padding:0px; } .voto a { float:left; width:15px; text-decoration:none; text-align:center; color:#f00; background -color:#f7f8e8; border-right:1px solid white; font-size:13px; } .voto li { display:inline; }

Como la lista de hipervnculos los queremos todos en la misma lnea inicializamos la propiedad display con el valor inline:.voto li { display:inline;

Ajax Ya desde CERO}

Luego donde se encuentra la complejidad mayor es en funciones.js:addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ref=document.getElementById('votofoto1'); var vec= ref.getElementsByTagName('li'); var vec2=ref.g etElementsByTagName('a'); for(f=0;f

curso de ajax - ajaxya

Documents