Esta entrada es otra de tantas que intentan explicar que es exactamente AJAX, aunque ya tiene unos 6 años aun hay quien no lo entiende, y para que sirve.
AJAX es un acrónimo de los que tanto le gustan a los angloparlantes quiere decir Asynchronous JavaScript And XML y la explicación de andar por casa es: Usar Javascript y XML para comunicar distintas aplicaciones web.
Pero vayamos por partes, primero ¿qué es Javascript? , y ¿qué es XML? muchos lo debéis de saber ya pero otros no así que lo explico:
-
Javascript es un lenguaje de programación que esta integrado en la mayoría de navegadores desde 1995. En el que apareció en Netscape en 1996 aparecería JScript para Internet Explorer. El 90% de los formularios webs lo usaban y usan para comprobar que los datos que insertas son validos y que está todo. También se usaba para generar animaciones en la web, presentar datos, etc.. A partir del año 2000 que se terminó de definir el modelo de web basado en contenido y presentación el HTML con los datos y el CSS con la presentación empezó a usarse para modificar la presentación dinámicamente. Apareciendo por la web paginas en las que el texto se esconde, pulsas una imagen y se abre al lado la descripción, …. Es lo que se dio a conocer como DHTML o Web Dinámica.
Desgraciadamente mucha gente confunde DHTML con AJAX, AJAX es coger los datos que quieres presentar de otra web, o de otro agente web, o de un servidor perdido de la mano de dios que devuelve datos en XML. DHTML es poner bonitas las webs. La causa de la confusión es que todo lo que usa AJAX hoy en día también lo presenta usando las técnicas de DHTML. Pero son cosas distintas.
-
XML son las siglas de eXtended Markup Language cuya traducción seria lenguaje de marcas extensible ¿alguien se ha enterado? los lenguajes de marcas/etiquetas son aquellos en los que la información que quieres insertar esta encapsuladas entre etiquetas del estilo <html></html>. Por ejemplo las paginas webs están escritas usando un lenguaje de marcas, lo del extensible solo quiere decir que tu puedes definir tus propias marcas y un diccionario para decir que tiene que haber dentro de cada marca.
Ya sabemos que es cada cosa, ahora ¿cómo lo unimos para hacer funcionar el AJAX este ? La mayoría ya ha tenido que pensar:
Usando Javascript llamo a alguna aplicación web que me devolverá el resultado en un XML y que usando otra vez Javascript lo presentaré de forma bonita.
Si eso es lo que has pensado enhorabuena, por que es precisamente lo que hay que hacer, si no lo has pensado pues lo estas haciendo ahora mismo xD. La cuestión es ¿cómo? y la respuesta tiene un nombre XMLHttpRequest()
Es una clase de Javascript, para ser exactos es una interfaz pero lo dejamos como clase, que permite a los navegadores hacer peticiones a otros servidores, o al mismo, una vez establecida la comunicación le mandamos o los datos de un formulario, o de una búsqueda o cualquier cosa. Como resultado cuando el servidor lo haya procesado nos devolverá en un XML lo que le hemos pedido. Ahora lo bueno el HTML con el que escribimos las webs es también un XML, luego en muchos casos lo que devuelve es los datos en HTML para insertarlos tal cual.
Pongamos un ejemplo:
function nuevoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!=’undefined’) {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function cargaDatos(id){
var t1, t2, contenedor;
contenedor = document.getElementById(‘datos’);
ajax=nuevoAjax();
ajax.open(“POST”, “ajax1.php”,true);
contenedor.innerHTML = “<div id=\”conectando\”><img src=\”img/proceso.gif\” /></div>”;
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText;
}
}
ajax.send(“ID=”+id);
}
La función nuevoAjax() lo que hace es devolver la clase que implementa la interfaz XMLHttpRequest() y funciona para la inmensa mayoría de navegadores.
cargaDatos(id) tiene más chicha. Iré paso a paso.
- contenedor = document.getElementById(‘datos’);
En el HTML de la web existe un <div id=”datos”></div> pues eso se asigna a contenedor.
- ajax=nuevoAjax();
Creamos el XMLHttpRequest.
- ajax.open(“POST”, “ajax1.php”,true);
Le decimos que cree una nueva conexión con el fichero ajax1.php, este fichero espera una ID enviada como POST y devuelve ‘<span> Datos de la ID </span>’
- contenedor.innerHTML = “<div id=\”conectando\”><img src=\”img/proceso.gif\” /></div>”;
Insertamos en el <div id=”datos”></div> una imagen para indicar que estamos esperando. Le estoy insertando directamente el HTML.
- ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText;
}
}
XMLHttpRequest tiene un atributo interno que es readyState, segun el valor indica:0=no estoy conectado; 1=me estoy conectando; 2=le mando las cabeceras; 3=le mando los datos; 4=acabé aquí tienes la respuesta.
Luego arriba estamos diciendo que cuando haya acabado inserte los datos en el <div>
- ajax.send(“ID=”+id);
En 3 decía que esperaba una variable ¿no? pues se manda aquí.
Lo que se os estará pasando por la cabeza es ¿y para esto tanta chorrada? pues, si la verdad es que si. Más que nada porque estos ejemplos están muy limitados. No comprueba que el fichero falle o los datos no sean los que deben. Esto se puede complicar mucho y para terminar de rematar la faena hay dos tonterías más.
Primero habéis visto que todo el tema de asíncrono me lo he comido con patatas. Esto se debe a que aunque en la mayoría de casos si que es asíncrono tu haces algo, el ajax llama a un servidor. Tu sigues a lo tuyo y cuando el servidor acaba la web lo presenta. Sin embargo hay muchos ejemplos por internet en los que deja de ser tan asíncrono. Le das a un botón para editar un post pero hasta que el ajax no acabe y te lo presente no puedes hacer nada. Eso es común hoy en día y eso para mi no es asíncrono.
Otra tontería es que para usar el concepto de AJAX no hace falta Javascript ni XML. Puedes usar cualquier cosa para enviar los datos. JSON como usa Google, uno propio, HTML, lo que quieras. Y aun así el concepto es el mismo y hoy en día se le llama AJAX a eso también.
Incluso en vez de Javascript puedes usar un Flash o Silverlight o JavaFX. Sin necesidad de Javascript para realizar la llamada al servidor ni presentar los datos.
