Sofá Naranja, en su empeño por acercar la tecnología al pueblo, presenta un mini-tutorial sobre el palabro de moda: AJAX. Si andabas buscando una excusa para trastear con AJAX, la acabas de encontrar. AJAX es fácil. AJAX es potente. AJAX lava más blanco. AJAX es, en definitiva, una Cosa Guapa™
¿Qué es AJAX?
AJAX son las siglas de Asynchronous JavaScript And XML. Es una colección de tecnologías que permiten desarrollar webs altamente interactivas ahorrando ancho de banda y recargas de página.
La clave para el funcionamiento de AJAX es el objeto XMLHttpRequest (uno de los pocos inventos útiles de Microsoft, mira por dónde)
Actualmente, AJAX funciona en los siguientes navegadores:
- Mozilla y familia
- Internet Explorer Windows (a partir de la versión 5)
- Safari y familia (en teoría, no tengo un Konqueror para probar)
Más información en la Wikipedia
Qué necesitamos para este tutorial
- Un editor de texto
- Un servidor web
- Café (opcional)
- Unos 30 minutillos
Vamos a construir una página web simple, donde cargaremos datos a partir de otra sin necesidad de recargar la página actual. También veremos como darle al usuario un poco de “feedback” de qué está pasando. Con suerte, también nos tomaremos un café.
Empezamos
La cosa empieza suave. Vamos a crear un fichero HTML (que en un derroche de originalidad llamaremos ‘index.html’) con el siguiente contenido (véase que somos unos pedantes y vamos a usar sintaxis XHTML 1.1 pata negra):
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Mini-tutorial AJAX</title>
</head>
<body>
<h4>Mini-tutorial AJAX</h4>
<div id="detalles"></div>
</body>
</html>
Como vemos, nada del otro mundo. Nótese el detalle de que tenemos un DIV vacío, al que le hemos asignado un ID único. Es en este DIV donde vamos a cargar nuestro contenido dinámico.
Complicando el tema
Ahora vamos a crear el objeto XMLHttpRequest, que será el encargado de actualizar el contenido dinámico de nuestro DIV ‘detalles’.
Creamos un fichero (que, recurriendo a nuestra creatividad habitual, llamaremos ‘ajax.js’):
ajax.js
// Vamos a presuponer que el usuario es una persona inteligente...
var isIE = false;
// Creamos una variable para el objeto XMLHttpRequest
var req;
// Creamos una funcion para cargar los datos en nuestro objeto.
// Logicamente, antes tenemos que crear el objeto.
// Vease que la sintaxis varia dependiendo de si usamos un navegador decente
// o Internet Explorer
function cargaXML(url) {
// Primero vamos a ver si la URL es una URL :)
if(url==''){
return;
}
// Usuario inteligente...
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// ...y usuario de Internet Explorer Windows
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
Bien. De momento tenemos una función que crea un objeto XMLHttpRequest (con una u otra sintaxis, dependiendo del navegador) y le asigna la función ‘processReqChange’ al evento ‘onreadystatechange’ (que ahora explicaremos qué quiere decir :)
También hemos usado el método ‘open’ de XMLHttpRequest (que se usa para asignarle la dirección URL de donde va a cargar los datos) y el método ’send’ (que se usa para efectuar la llamada a la URL asignada con ‘open’)
Nos vamos a detener un poco en la sintaxis de ‘open’:
open('metodo','URL',modo-asincrono,'usuario','password');
Los dos primeros parámetros son obligatorios. ‘metodo’ puede ser GET o POST, modo-asincrono es un booleano (TRUE|FALSE) que indica si la llamada será asíncrona (se seguiran ejecutando scripts en la página mientras se cargan los datos) o no (se detendrá la ejecución de los scripts hasta que se complete la carga de datos). ‘usuario’ y ‘password’ son, sorprendentemente, el usuario y el password a usar si la URL requiere autentificación
Seguimos…
Ahora declararemos la función processReqChange:
function processReqChange(){
// Referencia a nuestro DIV con ID unica:
var detalles = document.getElementById("detalles");
// Si se ha completado la carga de datos, los mostramos en el DIV...
if(req.readyState == 4){
detalles.innerHTML = req.responseText;
} else {
// ...en caso contrario, le diremos al usuario que los estamos cargando:
detalles.innerHTML = '<img src="loading.gif" align="absmiddle" /> Cargando...';
}
}
processReqChange es una función que se ejecuta cada vez que se dispara el evento ‘onreadystatechange’ del objeto XMLHttpRequest. ¿Y cuando se dispara este evento? Pues, como su propio nombre indica, cada vez que cambia el estado del objeto. Este evento le asigna al objeto XMLHttpRequest una variable (‘readyState’) que puede tener los siguientes valores (puede tener más, pero es que si no esto no sería un mini-tutorial):
- 0 = no inicilizado (por ejemplo, cuando acabamos de crear el objeto)
- 1 = cargando datos (hemos llamado al método ’send’ del objeto)
- 4 = carga completada (ya podemos acceder a los datos que nos ha devuelto el servidor)
Entonces, cada vez que cambie la variable ‘readyState’ miramos si es igual a 4 (carga completada), y si es así metemos el contenido del objeto XMLHttpRequest
req.responseText
en nuestro DIV
detalles.innerHTML = req.responseText
Integrando el script
Ahora vamos a enlazar el JavaScript con el HTML (por aquello de que funcione, y tal… es que si no no tiene gracia…)
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Mini-tutorial AJAX</title>
<script src="ajax.js" language="JavaScript"></script>
</head>
<body>
<h4>Mini-tutorial AJAX</h4>
<div id="detalles"></div>
</body>
</html>
Bien… ahora nos falta llamar a la función ‘cargaXML’ de alguna forma. En nuestro ejemplo, vamos a usar un ’select’ más o menos de este pelaje:
<select onchange="cargaXML(this.value)">
<option value="">Elige...</option>
<option value="001.html">001</option>
<option value="002.html">002</option>
<option value="003.html">003</option>
</select>
Lo que estamos haciendo es decirle al navegador que cuando cambie la selección (‘onchange’) se ejecute la función ‘cargaXML’ con la URL que hemos puesto en el ‘value’ como parámetro’.
Nuestro ‘index.html’ definitivo quedaría tal que así (voy a añadir unos estilos para que se vea más claramente nuestro DIV ‘detalles’, y para que veamos que se puede decorar el contenido cargado dinámicamente con CSS):
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Mini-tutorial AJAX</title>
<script src="ajax.js" language="JavaScript"></script>
<style>
#detalles {
margin: 20px;
border: 1px solid #F0F0F0;
padding: 10px;
font-size: 10px;
}
</style>
</head>
<body>
<h4>Mini-tutorial AJAX</h4>
<select onchange="cargaXML(this.value)">
<option value="">Elige...</option>
<option value="001.html">001</option>
<option value="002.html">002</option>
<option value="003.html">003</option>
</select>
<div id="detalles"></div>
</body>
</html>
Lógicamente, ahora deberemos crear los ficheros ‘001.html’, ‘002.html’ y ‘003.html’. Esto, como diría mi profesor de álgebra, es trivial y se deja como ejercicio para casa.
Nota: si estás pensando en usar una URL externa a tu dominio, que se te vaya quitando la idea de la cabeza. XMLHttpRequest está sometido a las mismas restricciones de seguridad que el sandbox de JavaScript: no puedes usar el protocolo file:// y no puedes acceder a direcciones fuera de tu dominio. Ahora bien, si tu proveedor es un poco freestyle en temas de seguridad (y es un tema que, digamos, tampoco te preocupa demasiado a ti) puedes usar el viejo truco de incluir el fichero mediante PHP:
include('url-externa-de-la-que-no-sabemos-nada');
Vaya por delante que hacer esto es una locura, y que lo más probable es que tu proveedor no te deje ni intentarlo.
Chapando
Bueno, pues de momento esto es todo… aquí os dejo un ZIP con todos los ficheros, y espero vuestros comentarios.
Para más información, y un tutorial más completo sobre XMLHttpRequest (incluyendo algunas nociones de cómo parsear XML) date una vuelta por la web de Apple Developer
excelente… tutorial, encontre informacion que no hay en otras paginas, me estoy especializando en desarrollo de web con Ajax, quisiera saber si tienes mas documentacion acerca de este tema Saludos
Interesante artículo y muy bien explicado [ te lo dice alguien dedicado a la docencia ;) ] Sólo tengo una duda ¿funcionaría en Linux?
Felicitaciones..muy bueno este mini-tutorial, cosas puntuales y no tanto blablabla…espero el macro-tutorial…espero que lo publiquen
Gracias…saludos!!
Buen tutorial para empezar, felicitaciones.
hola solo quiero decir q estuvo muy bueno el tutorial
Gracias. Me ha sido de gran utilidad. Bien explicado.
Muy bueno y sencillo el tutorial, muchas gracias.
Ahora tengo una duda. He creado un sistema de “fichas” que dentro de una página web X en una capa cargo el contenido de otras paginas Y,Z,…
Pues bien, de manera sorprendente he visto que en dichas páginas Y,Z,… si intento hacer un script con un simple document.write o incluso un alert, no funciona!
De manera más curiosa he probado lo mismo con eventos (onclick) y sí funciona.
¿Puede ser posible esto? ¿Qué hago mal? ¿Tiene algo que ver que sólo lo pruebe en local?
Muchas gracias.
Holla, estoy muy alegre de haber encontrado un sitio donde explicaran tan detallado la funcionalidad del AJAX. Este mini – tutorial me ha parecido de maravilla para comprender la filosofía del AJAX. Por esto les pido que continuen sacando cosas como estas que explican la funcionalidad de las cosas y dejan al usuario en plena libertad de desarrollar con su imaginacion y potencialidad lo que desee.
!Muchisimas Gracias!
Es genial Ale pero en IE 7 no va, sin embargo en el Mozilla a mi me va perfectamente. No sé si será porque lo estoy probando en local. De todas las maneras MUCHAS GRACIAS!!!!! por compartir tu sabiduría con el resto de los mortales.
Buenas a todos, como ya lo han dicho y coincido con toda la raza, este tutorial de includes con ajax esta excelente, solo tengo una petición al creador…
Como hago para poder cargar diferentes contenidos en diferentes “div”, es decir, no solo me gustaría usar “detalles”, sino también “detalles1″, “detalles2″, etc. Será esto posible con el código que se ha mostrado aquí?
Saludos…
Excelente tuto, muy facil y buena la apliacion. Mi pregunta es cuando tu cargas un archivo que contiene una animacion flash(swf) dentro de ajax no aparece o no lo carga? como ago para q cargue el SWF
Excelente tutorial, aunque mi escases de programacion me puso una duda, ahi esta puesto para un selector, como seria el codigo para un boton?? yo tengo esto por ej como llamo al xml y como agrego lo otro para que ese boton productos cargue en el DIV detalles mi contenido?
Espero la respuesta de algun generoso y Muchas Gracias!!!
Buenisimo, super claro, asi da gusto ver tutoriales…
Hola,muy bueno el tuto, como puedo hacer para tener unos links numericos y que al presionar en cada numero se vaya cargando el contenido ?
Gracias
Muy bueno el tutorial, pero estoy probando y queria hacer algo muy sencillo y la verdad no me sale, va me sale una parte de lo que quiero hacer. creo un formulario el cual llama a una funcion para validarlo, si esta todo ok, utiliza ajax para enviarlo a una pagina.php en donde guardo todo los valores en un objeto que cree, hasta aca todo bien, devuelvo un valor OK para que cuando lo recupero desde ajax pueda redireccionarme a otra pantalla, pero no logro hacer esto ultimo, alguien tiene alguna idea de como se puede hacer, muchas gracias