AJAXQue es?Antes que nada empecemos definiciendo que es AJAX.
Como bien dice la Wikipedia (http://es.wikipedia.org/wiki/AJAX):
CitarAJAX, 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 (http://kiuman.com/ajax/)
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:
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
<?php
// por si quieren votar algo fuera del rango
if (($value > 3) or ($value < 1)) $value = rand(1,3);
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:
<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. (http://kiuman.com/ajax/)
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
Para mi esta buenisimo.
Dejo otro articulo: www.desarrolloweb.com/articulos/2279.php
Saludos!
Justo hace un par de días lei que el nuevo sitio de google paginas personales usaba AJAX
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