Esta entrada daremos la introducción a la tecnología de AJAX, este será la primera publicación sobre este tema, en futuras entregas publicare como implementarla para desarrollar aplicaciones ricas en internet.
Lo primero que se preguntaran es, ¿Qué es AJAX?, la palabra es el acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano.
Toda aplicación que usa AJAX usa al objeto XMLhttpRequest , por eso mismo veremos un poco de historia y después como usar este objeto para desarrollar aplicaciones interactivas.
El objeto XMLHttpRequest
Empezaremos con un poco de historia , corría el año de 1998 cuando Microsoft libero una tecnología conocida como Remote Scripting que permitia por medio de un applet Java, realizar peticiones desde JavaScript al servidor sin que el usuario lo notara y sin que cambiara la URL del sitio web.
Al año siguiente la empresa lanzo Internet Explorer 5.0 (La pesadilla de los desarrolladores web de la época) y en este incorporó, bajo la tecnología ActiveX un objeto llamado XMLHttp, que remplazaba a Remote scripting sin necesidad de que el usuario tenga instalada una máquina virtual Java.
Esta tecnología paso desapercibida hasta que 5 años después un conjunto de empresas (Google, Yahoo, AOL, etc.) retomaron el concepto y comenzaron a aplicarlo en sus servicios web para lograr interfaces ricas jamás antes vistas desde la llegada del HTML.
Es así como el objeto XMLHttp es el corazón de toda aplicación AJAX dado que es el que permite realizar peticiones al servidor en forma asíncrona y sin cambiar de URL.
La competencia de IE implementaron un objeto clon que lo denominaron XMLHttpRequest. Este objeto es nativo de JavaScript y tiene los mismos métodos y propiedades que el objeto ActiveX de Microsoft.
Estas dos versiones del objeto XMLHttp se convirtieron durante mucho tiempo en el dolor de cabeza de muchos desarrolladores, hasta que IE 7 implementó el objeto XMLHttpRequest en forma nativa.
Modo de uso
Ya que nos pusimos en contexto veamos cómo se implementa esta tecnología.
Para hacer una petición al servidor es necesario seguir los pasos siguientes:
- Instanciar el Objeto antes mencionado.
- Configurar y abrir la petición.
- Definir una función que se encargue de administrar la evaluación de la petición.
- Enviar la petición y los datos al servidor.
- En la función definida antes, manipular el estado de la petición y en que caso correcto recibir los datos y actuar en consecuencia con ellos, según lo que se quiera hacer.
Instanciar el Objeto
Para esto declaramos una variable y asignamos el objeto como lo muestra el código de abajo:
|
|
var xhr = new XMLHttpRequest(); |
Configurar y abrir la petición.
Para configurar y preparar la petición antes de enviarla al servidor usaremos el método open(), este recibe los datos de configuración como son el método por el cual se enviaran los datos, los más utilizados son GET o POST , la URL a donde se hará la petición y si la petición será asíncrona o no, el uso del método seria como el siguiente:
Código para preparar la conexión.
|
|
xhr.open("GET",url,true); |
Ya que se configuro y esta lista la petición para su envió, usaremos el método send(), cabe mencionar que si en el método anterior configuramos como método de envio a GET , el método send recibe como parámetro NULL, ya que los datos fueron enviados por medio de la URL.
En caso contrario los datos serán pasados en el formato
|
|
dato="1"&dato2="2"&dato3="etc..." |
.
Código del uso del método send().
|
|
xhr.send(dato=”1”&dato2= “2”&dato3=”etc...”.) |
Propiedades
Ahora veremos las propiedades para poder llevar el monitoreo y administración de nuestra petición.
ReadyState
La propiedad de solo lectura readystate devuelve el código numérico entre 0 y 4, inclusive, que indica en qué estado se encuentra la petición.
|
Código
|
Estado
|
Descripción
|
|
0
|
Sin inicializar
|
El requerimiento solo fue instancionado. Muchos navegadores no manejan este código y pasan directamente al siguiente |
|
1
|
Cargando
|
El requerimiento se configuro con open pero todavía no se envía. |
|
2
|
Cargado
|
El requerimiento de envió o se está enviando, aunque todavía no tenemos respuesta alguna del servidor |
|
3
|
Interactivo
|
El servidor ya respondió la petición, ya tenemos disponibles las cabeceras pero el contenido todavía se esta descargando. |
|
4
|
Completo
|
La petición ya finalizó y el contenido está completo. |
|
|
if(xhr.readyState == 4){ //la peticion termino } |
Status
Es muy importante no confundir esta propiedad con la anterior, la propiedad status devuelve el código HTTP que nos devolvió el servidor.
| Código |
Descripción
|
| 200 |
La petición se pudo procesar en forma correcta. |
| 404 |
La URL a la que realizamos la petición no existe en el servidor. |
| 500 |
Error interno del servidor. Puede indicarnos que el servidor está saturado o que hay algún error en el script ejecutado en el servidor. |
| 400 |
La petición enviada al servidor es errónea. Hay algún inconveniente con las cabeceras o con la información POST enviada. |
| 403 |
No tenemos permiso de acceder al recurso en el servidor. |
| 405 |
No se acepta el método. Hay un problema al definir los métodos POST o GET. |
| 414 |
La URL pedida es muy larga. Puede producirse cuando se envían muchos datos por GET. En este caso, se debe cambiar al método a POST. |
| 503 |
El servidor esta temporalmente no disponible. |
Como vemos en la tabla anterior, el código que se debe esperar de una petición correcta será 200.
Ahora agregamos esta condición a la anterior.
|
|
if (xhr.readyState == 4){ //La peticion termino if (xhr.status == 200){ //Los datos llegaron bien y están disponibles. } } |
ResponseText
Esta propiedad de solo lectura devuelve un string con el contenido del cuerpo devuelto por el servidor ante la petición. Solo tenemos seguridad de que los datos están correctos cuando readystate sea 4 y status sea 200.
Esta propiedad se utiliza para recibir del servidor tanto información textual como HTML, código JavaScript u objetos JSON.
Onreadystatechange
De todas las propiedades descritas hasta ahora, esta es la única que se utiliza antes de enviar la petición.
El objeto XMLHttpRequest posee un solo evento estándar, que se puede y se debe capturar para procesar la petición dado que se está tratando con una petición asíncrona donde el objeto se encarga de avisarnos cuando la petición termina.
La propiedad onreadystatechange, entonces debe asignarse a una función que se ejecutara de manera automática cada vez que la propiedad readystate cambie su valor de entre 0 y 4.
De esta forma cuando el estado llegue a 4 ya estaremos listos para leer los datos que nos devuelve el servidor.
Para asignarle una función a esta propiedad tenemos dos opciones, la primera es definir una función anónima o en línea y la segunda es almacenar una función en una variable, al usar la segunda opción tenemos que tener cuidado de no usar los paréntesis ya que en vez de almacenar la función estaríamos ejecutándola.
|
|
xhr.onreadystatechange = function ( ){ if (xhr.readyState == 4 ){ //La peticion termino if (xhr.status == 200){ //Los datos llegaron bien y están disponibles. } } xhr.send (null); |
Esta propiedad deberá definirse antes o después del método open y antes del send para que el código funcione correctamente.
Implementación
Ya que vimos los métodos y propiedades del objeto XMLHttpRequest haremos una pequeña demostración para esto haremos una petición al servidor para que nos devuelva un mensaje «Hola Mundo en AJAX», este tutorial tenemos dos archivos index.html y Ajax.php.
En el archivo index.html pondremos el código javascript y la estructura HTML, en Ajax.php ira el mensaje que nos devuelve el servidor, estos dos archivos tienen que estar en algún servidor web y en la misma carpeta.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>peticion AJAX</title> <script> var xhr = new XMLHttpRequest(); xhr.open('GET','Ajax.php',true); xhr.onreadystatechange = function procesarPeticion(){ if (xhr.readyState == 4){ //La peticion termino if (xhr.status == 200){ //Los datos llegaron bien y están disponibles. alert(xhr.responseText); } } } xhr.send(null); </script> </head> <body> </body> </html> |
Ajax.php
|
|
<?php echo "hola mundo en AJAX"; ?> |
