Introduccion a AJAX

[Predicador]

AJAX

Que es?
Antes que nada empecemos definiciendo que es AJAX.
Como bien dice la Wikipedia:

AJAX, acrónimo de Asynchronous JavaScript And XML (en inglés «JavaScript y XML asíncronos»). Técnica de desarrollo web para crear aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes:
* HTML (o XHTML) y hojas de estilos en cascada (CSS) para presentar la información;
* Document Object Model (DOM) y JavaScript, para interactuar dinámicamente con los datos, y
* XML y XSLT, para intercambiar y manipular datos de manera desincronizada con un servidor web (aunque las aplicaciones AJAX pueden usar otro tipo de tecnologías, incluyendo texto llano, para realizar esta labor).

La definicion en fin dice que AJAX no es nada mas que la union de tres tecnologias ya existentes.
(En nuestros ejemplos no usaremos XML para dar mas simplicidad, de todos modos puede extenderse muy sencillamente)

Como funciona?
Antiguamente en los formularios HTML (un formulario para votar como veremos en el ejemplo) constaban de seleccionar una (o varias) opcion, luego al paretar send el browser envia la informacion a un script (posiblemente PHP) en el server que procesa los resultados y retorna una pagina. Esta forma de funcionamiento pone trabas de tiempo, debido a tener que esperar que toda la pagina cargue antes de poder continuar y limitando la interactividad.
Con AJAX esto no sucede asi, ya que se implamenta una nueva capa entre el browser y el server que se encarga de hacer las peticiones al servidor sin que el usuario necesite recargar toda la pagina y devolviendo los resultados cuando estos estan completos, permite que la interaccion del usuario con la aplicacion suceda asincronicamente (independientemente de la comunicación con el servidor).
La base de AJAX es una funcion llamada XMLHttpRequest() (funcion nativa en Opera 7.6, Mozilla 1.0, Safari 1.2, IE7 y como un ActiveX desde IE5) que se encarga de hacer la peticion y luego llamar a otra funcion (definida por nosotros) cuando los resultados sean retornados por el server.

A continuacion presentare un ejemplo que simula un sistema de votacion con dos variantes.
La version 1 muestra el resultado de la votacion en un texto aparte y la version 2 sobreescribe el sistema de votacion al mostrar el resultado (de este modo se evitan varias votaciones consecutivas).
Click para ver el ejemplo

Tenemos una funcion llamada xmlhttpPost() que se encarga de generar la llamada asincronica, especificar que se debe solicitar al server, avisar al usuario que su pedido esta en tramite y avisarle al browser que funcion se hara cargo de interpretar la respuesta del server. Esta funcion es practicamente la misma para toda aplicacion, veamos:

Código [Seleccionar] Expandir


function xmlhttpPost(strURL, formFuente, idDestino) {
   var xmlHttpReq = false;
   // Opera/Mozilla/Safari
   if (window.XMLHttpRequest) {
       xmlHttpReq = new XMLHttpRequest();
   }
   // IE
   else if (window.ActiveXObject) {
       xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlHttpReq.open('POST', strURL, true);
   xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   // se define una funcion interpretara las respuestas del server
   xmlHttpReq.onreadystatechange = function() {
       if (xmlHttpReq.readyState == 4) {
           // si la preticion esta comlpeta
           updatepage(xmlHttpReq.responseText,idDestino);
       }
   }
   xmlHttpReq.send(generaQueryString(formFuente));
   // Es importante dar un feedback al usuario de que algo esta pasando ;)
   document.getElementById(idDestino).innerHTML = "Espere mientras se vota...";
}

con .onreadystatechange se define una funcion que se llamara caad vez que haya una cambio de estado, los posibles estados son 0 = sin inicializar, 1 = cargando, 2 = cargado, 3 = interactivo, 4 = completa (finalizada), de modo que una vez que el estado es 4 sabemos que el servidor termino de darnos su respuesta y se la podemos presentar al usuario.
La funcion generaQueryString() se encarga de construir la cadena de consulta que se le enviara al server. Esta funcion es muy dependiente de la aplicacion a construir ya que lee la informacion de un formulario y genera una cadena que sera leida por un script del lado del server (esto es, podria generar una cadena del tipo opcion1=<opcion del form>&valor=<voto dado>, para nuestro ejemplo solo genera value=<opcion elegida>).
La funcion updatepage() actualiza la pagina con las respuestas del servidor, tambien es dependiente de la aplicacion que queramos hacer.

En nuestro ejemplo, del lado del server tenemos un script PHP que de acuerdo al parametro recibido devuelve la cadena ""Usted voto la opcion <parametro recibido> esto se deberia guardar en una DB y generar promedios", pero este podria ser facilmente extendido para recibir mas parametros, almacenarlos en una base de datos, generar promedios de votos, contar cantidad de votos, etc y hasta podria devolver en formato XML si es mucha informacion a retornar y se necesita estructurar mejor (javascript provee lindas y comodas funciones para interpretar XML).
votar.php

Código [Seleccionar] Expandir

<?php
// por si quieren votar algo fuera del rango
if &#40;&#40;$value > 3&#41; or &#40;$value < 1&#41;&#41; $value = rand&#40;1,3&#41;;
echo "Usted voto la opcion ".$value. ", esto se deberia guardar en una DB y generar promedios";
?>

Finalmente, el codigo HTML que muestra el formulario y el selector de valor a votar y llama a la funcion xmlhttpPost() es:

Código [Seleccionar] Expandir

<h1>Ejemplo 1</h1>
 <em>Al votar muestra el resultado debajo del selector.</em>
 <div id="voto1">
   <form name="formVoto">
     Su opcion:
     <select name="mivoto" class="voteButton" onChange="xmlhttpPost('votar.php', 'formVoto','votoElegido');">
     <option value="">-</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     </select>
   </form>
 </div>
 <p>
   <div id="votoElegido">
     Aun no voto.
   </div>
 </p>
donde al cambiar alguna opcion del selector se llama a la funcion xmlhttpPost diciendole a que script debe llamar, de que formulario debe leer los datos y donde debe escribir la respuesta del servidor.

Click para ver nuevamente el ejemplo.
Todo el codigo fuente en http://kiuman.com/ajax/Ejemplo_AJAX_ArgentoP2P.ZIP

Espero haber sido lo mas claro y sucinto posible.
Cualquier duda, posteen sin miedo, la unica pregunta tonta es la que uno se guarda para si mismo.
Baii.


Referencias:
http://developer.apple.com/internet/webcontent/xmlhttpreq.html
http://en.wikipedia.org/wiki/AJAX

[snoop]

Excelente explicacion Predicador, y el ejemplo lo hace quedar muy muy claro  

Esta nuevo "concepto" (por decirlo de alguna forma) faciita la interaccion con el servidor, y solo se va a buscar (o pedir) Datos. Esto ayuda bastante, dado que en parte se separa diseño de informacion y el punto mas importante es que se ahorra ancho de banda lo que significa una carga mas rapida.

El ejemplo mas claro de esta tecnologia es el WebMail de Google, GMail (que recientemente añadio el GoogleTalk a la interfaz de Gmail ). Lo sorprendente de este webmail es el tiempo de carga, al buscar un mail o al responder uno (y al enviarlo). Esto sucede por que solo transfiere los datos y no todo el resto del diseño de la pagina.

Aca se puede encontrar un articulo (creo que uno de los primeros) de AJAX. (Ingles)
Y en noticias recientes varias empresas estan fomentando la creacion de un estandar para AJAX.

El punto mas fuerte, creo yo, es la posiblidad de hacer una peticion y que un script devuelva los resultados en XML y que desde el cliente (JS) se puedan "parsear".

Creo que va a crecer y mucho el desarrolo de aplicaciones con estas tecnologias. Y esto es bueno ya que ahorran bastante tiempo al usuario y no son dificiles de implmentar.

Para finalizar tambien hay metodos "caseros" para no utilizar httprequest por ejemplo la utilizacion de un iframe en la pagina que vayan viajando por ahí todos los datos (la peticion se hacen con iframe.src y el resultado se lo devuelve al window padre con parent.objeto.variable), es un poco sucio.. pero anda...

Saludos

[gardelitointoxicado]

Para mi esta buenisimo.
Dejo otro articulo: www.desarrolloweb.com/articulos/2279.php

Saludos!

[Camello_AR]

Justo hace un par de días lei que el nuevo sitio de google paginas personales usaba AJAX

[flasheadito]

Muchisimas gracias, muy buena la explicacion, tecnologia que crece a pasos agigantados!!

[ChaMeR]

uhhh me viene excelente esto!!

Mil gracias Predicador

ChaMeR

[Menduko]

Buenisima explicacion, habra que empezar a estudiar bien esta tecnologia, la cual brinda resultados excelentes.- 

[danielSu]

AJAX es el complemento que faltaba para reemplazar las aplicaciones de escritorio con las web, en cuanto a velocidad. Realmente es excelente la fusión de comunicacion asincrónica entre el servidor y la aplicación, XML y JavaScript...

Gracias por ese aporte realemente es algo nuevito e interesante para complementarlo con PHP y MySQL asi no falta nada...

Como siempre estan invitados a ingresar a XXXXXXX (edit by Predicador)

Exitos y Salu2

Edit by Predicador: te edite la pagina web por varias razones a saber:
1- Ya en tu perfil tenes lugar para poner tu web.
2- Debes ser Argento de Ley (mas de 75 mensajes) para que puedas publicar tu web en "Esta es mi Web"; podrias esperar a llegar a ese limite en vez de inundar cada post con tu pagina.
3- Creo que el 80% de los posts que lei tuyos tenian ese spam
4- Hay que leer las reglas.
Baii