Tutorial básico de AJAX
Audiencia y Prerrequisitos
Este tutorial cubre los principios básicos de AJAX. Se requiere conocer de antemano CSS, DHTML y Javascript.
¿Qué es AJAX?
AJAX, 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 (del inglés, Rich Internet Applications).
Éstas se ejecutan en el cliente, es decir, en el navegador de los usuarios y mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma.
AJAX es la combinación de:
- Hojas de estilos en cascada (CSS) para el diseño que acompaña a la información.
- Document Object Model (DOM) accedido generalmente mediante Javascript, para mostrar e interactuar dinámicamente con la información presentada.
- El objeto
XMLHttpRequestpara intercambiar datos asincrónicamente con el servidor web. - XML es el formato usado comúnmente para la transferencia entre el servidor y el cliente, sin embargo, puede usarse cualquier formato, tales como: texto plano, HTML y JSON.
En el grafico siguiente se muestra como trabaja todo en conjunto.
Llamando al servidor
Una vez que haya ocurrido un evento del DOM en la página Web, se necesita obtener un objeto XMLHttpRequest. Como requisito es necesario escribir un código Javascript entendible por distintos los navegadores. Nótese además que la función de retorno que procesará la respuesta del servidor esta asociada al método onreadystatechange.
var obj; function generaPeticion(url) { // objecto nativo if (window.XMLHttpRequest) { // Obtener un nuevo objeto obj = new XMLHttpRequest(); // Indicar la funcion de retorno obj.onreadystatechange = procesaRespuesta; // Método GET con la url; "true" para asincronica obj.open("GET", url, true); // null for GET with native object obj.send(null); // IE/Windows ActiveX object } else if (window.ActiveXObject) { obj = new ActiveXObject("Microsoft.XMLHTTP"); if (obj) { obj.onreadystatechange = procesaRespuesta; obj.open("GET", url, true); obj.send(); } } else { alert("Su navegador no soporta AJAX"); } }
Aquí están los atributos y métodos para la clase XMLHttpRequest.
Atributos
| readyState |
El código readyState toma valores entre 0 y 4 durante una
petición: 0: no inicializada. 1: conexión establecida. 2: petición recibida. 3: procesando. 4: petición completada y respuesta lista. |
| status |
200: "OK" 404: Página no encontrada |
| onreadystatechange | Método de retorno asignado por medio de este atributo. |
| responseText | Devuelve la respuesta como una cadena. |
| responseXml | Devuelve la respuesta como datos XML. |
Métodos
| open (mode, url, boolean) |
mode: Tipo de petición: GET o POST url: Localización del fichero remoto. boolean: true (asincrónico) o false (sincrónico). |
| send ("string") | null para un comando GET |
El siguiente ejemplo muestra una función de retorno registrada por medio del atributo onreadystatechange.
function procesaRespuesta() { // 4 significa que se ha devuelto una respuesta y está lista para ser procesada if (obj.readyState == 4) { // 200 significa "OK" if (obj.status == 200) { // cualquier operación para procesar los datos // cualquier cosa contraria significa un problema } else { alert("Ha ocurrido un problema en el retorno de datos"); } } }
El resto de las piezas
Después de haber visto las funciones que permiten hacer una petición asincrónica al servidor y luego procesarla, se presentará una aplicación simplificada para mostrar la integración de todas las piezas. Dicha aplicación simula el uso de frames. Posee un menú de navegación que tiene asociado al evento onClick la llamada a una función que activa la petición asincrónica para cada una de las opciones del menú tal como se muestra a continuación.
<body> <h2>Menú de navegación AJAX</h2> <ul id="menu"> <li onclick="generaPeticion ('pagina1.html')">Opción 1</li> <li onclick="generaPeticion ('pagina2.html')">Opción 2</li> <li onclick="generaPeticion ('pagina3.html')">Opción 3</li> <ul> <div id="contenido"></div> </body>
Véase que no se ha utilizado la etiqueta de vínculos sino que la activación de la petición se realiza cuando ocurre el evento onclick para la etiqueta li.
El resultado de la petición se encargará de procesarlo la función procesaRespuesta(), los datos recibidos serán del tipo html, de manera tal que tan sólo queda insertarlos en página.
function procesaRespuesta() { if (obj.readyState == 4) { if (obj.status == 200) { // Actualiza el contenido apoyándose en el método innerHTML document.getElementById('contenido').innerHTML = obj.responseText; } else { alert("Ha ocurrido un problema en el retorno de datos"); } } }
Descargue el ejemplo completo.
Referencias y tutoriales adicionales
2 comentarios
Deje su comentario