Indice
1.Introducción
1.1.Pero,
¿AJAX® no era un limpiador?
1.2.La
tecnología AJAX ya existía
1.3.Formas
de uso del control XMLHttpRequest
2.Manos a la obra (el
ejemplo)
2.1.pagina1.jsp
2.2.pagina2.jsp
2.3.Funcionamiento
del ejemplo
2.4.¿Que
ha pasado?
3.Uso de AJAX en el
mundo real
3.1.Usos
civilizados de AJAX
3.2.A
tener en cuenta al usar AJAX
3.3.Consejo
final
1.Introducción
El objetivo de este tutorial es explicar de una
forma sencilla que es AJAX y por que se ha montado tanto revuelo con
esta palabrita. Además, se provee un ejemplo sencillo de uso
de AJAX “a pelo”, sugiriéndose después
posibles formas de aplicación de AJAX al mundo real.
1.1.Pero, ¿AJAX® no era un limpiador?
Efectivamente, existe un limpiador de hogar,
normalmente de color verde, con ese nombre. Sin embargo, en el mundo
web, como ya sabrá el lector, AJAX es el acrónimo de
Asynchronous Javascript And XML, es decir, Javascript
asíncrono y XML.
Como se puede apreciar, decir AJAX y decir nada es
casi lo mismo, aunque el termino nos da algunas pistas. Para ser mas
exacto nos da dos pistas y una es medio falsa (luego veremos por
qué).
1.2.La tecnología AJAX ya existía
¿Quién no ha plantado alguna vez un
frame/iframe oculto en una pagina web con el objetivo de bajarse
algún Javascript y/o datos del servidor sin tener que recargar
la pagina actual? Esto se hace desde tiempos inmemoriales y cumple
con la definición de lo que es AJAX. Entonces, ¿por qué
tanto revuelo?.
El éxito actual de la tecnología
AJAX se debe a que los navegadores mas importantes han estandarizado
un objeto Javascript, llamado XMLHttpRequest, que permite hacer
peticiones al servidor desde la pagina actual sin recargarla. Ademas,
la respuesta puede ser tratada desde Javascript, bien sea como texto,
bien sea como un objeto DOM (XML).
1.3.Formas de uso del control XMLHttpRequest
En el apartado 1.1 decíamos que una de las
pistas que da el termino AJAX es medio falsa. Tanto el termino AJAX
como el nombre del objeto Javascript que se usa sugieren que toda la
comunicación se hace usando XML. Esto no es cierto: si bien se
puede usar sólo XML, también se pueden hacer peticiones
HTTP que envíen y devuelvan texto o cualquier otro formato que
queramos. No obstante, es recomendable usar XML para las
comunicaciones y, a ser posible, algún formato estándar,
como por ejemplo SOAP (usado en servicios web).
Ademas del formato de datos, existen dos modos de
hacer la petición: no bloqueante y bloqueante. En el primero
se hace la petición sin bloquear el código Javascript y
la respuesta nos llega a través de una función
callback. En el segundo, el código Javascript se para hasta
que llega la respuesta. Como el modo bloqueante puede dejar colgado
el navegador, no se suele usar. De hecho, en nuestro ejemplo, solo
veremos el modo no bloqueante.
Por ultimo, existen dos formas de crear un objeto
XMLHttpRequest: la de Microsoft, y la del resto de la humanidad. El
código multinavegador para crear un objeto XMLHttpRequest es
muy sencillo y se puede ver en el ejemplo.
2.Manos a la obra (el ejemplo)
En este capitulo vamos
a ver un ejemplo de uso de AJAX. Al escribir en un campo de edición
el nombre de una persona y pinchar un botón, pediremos el
lugar de residencia de dicha persona y lo mostraremos sin recargar la
pagina.
Para montar el ejemplo
necesitaremos dos paginas JSP: una con el campo de edición y
el botón y otra que dado el nombre de una persona devuelva su
lugar de residencia. La segunda debería ser un servlet o algo
más civilizado (por ejemplo un servicio web) pero para el
ejemplo nos vale con un JSP porque es rápido, sencillo y ocupa
poco y le quita peso al tutorial.
Todos los datos se
enviaran/recibirán en texto plano. Se deja -¿como no?-
como ejercicio al lector montar un ejemplo con XML.
A continuación
se muestran los contenidos de las dos paginas necesarias para el
ejemplo. Basta poner los dos JSPs listados en un servidor de
aplicaciones Java (como Tomcat) para probar el ejemplo. En el
apartado 2.3 se muestra el funcionamiento del ejemplo.
2.1.pagina1.jsp
<html>
<head>
</head>
<body>
<script>
var ajax;
function funcionCallback()
{
// Comprobamos si la peticion se ha completado (estado 4)
if( ajax.readyState == 4 )
{
// Comprobamos si la respuesta ha sido correcta (resultado HTTP 200)
if( ajax.status == 200 )
{
// Escribimos el resultado en la pagina HTML mediante DHTML
document.all.salida.innerHTML = "<b>"+ajax.responseText+"</b>";
}
}
}
function recuperaResidencia()
{
// Creamos el control XMLHttpRequest segun el navegador en el que estemos
if( window.XMLHttpRequest )
ajax = new XMLHttpRequest(); // No Internet Explorer
else
ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
// Almacenamos en el control al funcion que se invocara cuando la peticion
// cambie de estado
ajax.onreadystatechange = funcionCallback;
// Enviamos la peticion
ajax.open( "GET", "pagina2.jsp?persona="+document.all.entrada.value, true );
ajax.send( "" );
}
</script>
<img src="/wp-content/uploads/tutorial-data/http://www.adictosaltrabajo.com/imagenes/adic000.jpg"/>
<br/>
<br/>
<input type="text" id="entrada" size="77"/>
<input type="button" value="Consultar" onclick="recuperaResidencia()"/>
<br/>
<br/>
Lugar de residencia: <span id="salida"></span>
<br/>
<br/>
<img src="/wp-content/uploads/tutorial-data/http://www.autentia.com/img/autentia.gif"/>
</body>
</html>
2.2.pagina2.jsp
<%
// Obtener el parametro con el nombre de la persona
String persona = request.getParameter("persona");
// Devolver el lugar de residencia de la persona
if( persona.equalsIgnoreCase("Jesus Hernandez") )
{
out.print("GUADALAJARA");
}
else
if( persona.equalsIgnoreCase("Fulano de tal") )
{
out.print("PINTO");
}
else
if( persona.equalsIgnoreCase("Fulano de cual") )
{
out.print("VALDEMORO");
}
else
{
out.print("PERSONA DESCONOCIDA");
}
%>
2.3.Funcionamiento del ejemplo
El usuario accede a la pagina del ejemplo:
Teclea el nombre de una persona:
Y pulsa el botón “Consultar”,
con lo que inmediatamente la pagina se modifica (sin recargarse)
mostrando el lugar de residencia de la persona:
2.4.¿Que ha pasado?
Cuando el usuario pulso el botón Consultar,
se invocó la función Javascript recuperaResidencia
de pagina1.jsp. Esta función extrajo el nombre de la
persona del campo de edición y se lo envió como
parámetro (por medio de un objeto XMLHttpRequest) a
pagina2.jsp. Ademas, la función recuperaResidencia
le dijo al objeto XMLHttpRequest que, cuando la respuesta estuviese
lista, invocase a la función funcionCallback.
Al invocarse pagina2.jsp, este sencillo
código Java comprobó el nombre de la persona, obtenido
del parámetro persona y lo comparo con su lista de
personas conocidas. Cuando encontró una coincidencia,
respondió con el lugar de residencia de la persona.
En este momento, el objeto XMLHttpRequest invoco a
la función funcionCallback en pagina1.jsp la
cual chequeo el código de estado para comprobar que no había
habido error y, seguidamente, actualizo el objeto HTML span
con identificador salida de pagina1.jsp para mostrar el
valor devuelto por pagina2.jsp.
Y eso es todo. Así de simple. Solo una
salvedad: la función de callback no se invoca una sola vez,
sino cuatro por cada petición. Esto lo hace el control
XMLHttpRequest para irnos informando de los cambios de estado pero,
en realidad, a nosotros solo nos interesa el estado 4, que es cuando
ha acabado la petición. Esto se chequea en la linea:
if(
ajax.readyState == 4 )
3.Uso de AJAX en el mundo real
Este capitulo da algunos consejos sobre el uso de
AJAX.
3.1.Usos civilizados de AJAX
Como hemos visto, existen multitud de protocolos
que pueden ser usados con AJAX. En realidad, el control
XMLHttpRequest nos da acceso desde Javascript a cualquier servidor ya
que es un simple cliente HTTP. No obstante, es recomendable utilizar
protocolos estándar para comunicarse mediante AJAX entre el
cliente y el servidor. Ejemplos de protocolos útiles serian
SOAP (para acceder a un servicio web) o RSS (para acceder a un
servidor RSS). Existen multitud de librerías Javascript para
manipular este tipo de protocolos.
No se considera civilizado (y, en mi opinión
es una guarrería inmunda) intercambiar HTML mediante AJAX. No
voy a dar nombres porque no lo he comprobado personalmente, pero hay
sitios web muy usados que lo hacen (ahí queda eso). Lo que
viaje por AJAX deben ser datos estructurados y entendibles por la
aplicación AJAX y no formatos de presentación.
No se debería usar AJAX a diestro y
siniestro, sino solamente donde sea necesario debido a la interfaz de
usuario o a requerimientos de eficiencia. véase el apartado
siguiente para hacerse una idea de los problemas de usar AJAX.
3.2.A tener en cuenta al usar AJAX
Si nos decidimos por usar AJAX tenemos que tener
en cuenta que:
-
Los navegadores distintos se comportan de
maneras distintas: hay que probar mas la aplicación. -
El código Javascript se ejecuta en
el cliente: va a ser mucho mas difícil diagnosticar y
resolver los problemas cuando solo ocurran en determinados clientes. -
Hay clientes que pueden tener el
Javascript inactivo: hay que decidir que se hace con ellos. -
El objeto XMLHttpRequest no esta
disponible aun en dispositivos móviles: hay que decidir
si se quieren soportar los dispositivos móviles (PDAs y
teléfonos móviles) y cual va a ser la alternativa a
AJAX. -
La tecnología AJAX aun no es un
estándar (aunque el W3C esta en ello): si no se van a
usar navegadores de amplio uso, como Internet Explorer o Mozilla
Firefox, hay que asegurarse de que AJAX funciona y de que funciona
como queremos. -
Los usuarios con discapacidades no van a
poder usar nuestra aplicación: en general, el DHTML no es
compatible con las herramientas de accesibilidad existentes. -
No podemos conectarnos con un objeto
XMLHttpRequest a un dominio distinto del cual ha creado el objeto:
toda la aplicación debe estar bajo el mismo dominio.
3.3.Consejo final
No se deje influenciar por las modas ni se haga
esclavo de la tecnología puntera a la hora de diseñar
aplicaciones informáticas. La tecnología AJAX es muy
potente, pero se debe usar con mucho juicio y solo si es realmente
necesaria. Ademas, es conveniente no usar AJAX “a la buena de
Dios”, sino apoyado por un framework que le permita abstraerse
de la tecnología subyacente.
Si necesita ayuda al plantear sus soluciones
tecnológicas no dude en contactar con nosotros a través
de nuestra web www.autentia.com.
Estaremos encantados de ayudarle en su problema poniendo a su
disposición a nuestros mejores expertos a precios asequibles.
muchas gracias por el tutorial, me fue de gran ayuda.
Muy buena introducción a Ajax.
En una segunda pasada, veo que la parte más dificil de entender / leer es la siguiente:
NOTA: está bien explicado, pero digo que es difícil de entender el bajo nivel de Ajax, ayer en un curso me recomendaron http://www.firephp.org/
function funcionCallback()
{
// Comprobamos si la peticion se ha completado (estado 4)
if( ajax.readyState == 4 )
{
// Comprobamos si la respuesta ha sido correcta (resultado HTTP 200)
if( ajax.status == 200 )
{
// Escribimos el resultado en la pagina HTML mediante DHTML
document.all.salida.innerHTML = \\\»\\\»+ajax.responseText+\\\»\\\»;
}
}
}
function recuperaResidencia()
{
// Creamos el control XMLHttpRequest segun el navegador en el que estemos
if( window.XMLHttpRequest )
ajax = new XMLHttpRequest(); // No Internet Explorer
else
ajax = new ActiveXObject(\\\»Microsoft.XMLHTTP\\\»); // Internet Explorer
// Almacenamos en el control al funcion que se invocara cuando la peticion
// cambie de estado
ajax.onreadystatechange = funcionCallback;
// Enviamos la peticion
ajax.open( \\\»GET\\\», \\\»pagina2.jsp?persona=\\\»+document.all.entrada.value, true );
ajax.send( \\\»\\\» );
}
Me pareció muy claro.
Pero no entiendo por qué si trato de mover las funciones de javascript a un archivo funciones.js y lo llamo con
no funciona.
Tampoco funciona si incluyo la linea
antes de la etiqueta