Páginas que utilizan Ajax.
En una página que utilice Ajax, frente a un evento determinado, por ejemplo que el usuario presione un botón o que ingrese texto en un campo, la página:
Crea un requerimiento HTTP.
Registra una función que atenderá la respuesta del requerimiento HTTP una vez que el requerimiento sea atendido.
Opcionalmente, configura un cursor de espera o algún otro mecanismo de feedback para que el usuario sepa lo que debe esperar.
Ejecuta el requerimiento HTTP.
Llama a la función que fue registrada una vez que se recibe la respuesta al requerimiento.
Ajax funciona en la mayoría de los browsers modernos, aunque la forma de crear el requerimiento es ligeramente distinta en explorer y en el resto de los browsers. Para crear el requerimiento, en vez de detectar qué tipo de browser es (que no es lo recomendado), detectamos si existe una función o no:
var req = false;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject(«Microsoft.XMLHTTP»);
}
Ahora la variable req contiene un XMLHttpRequest que usaremos para ejecutar la petición http. Para ejecutar el requerimiento podemos usar esta función:
function ajaxRequest(url, parameters, callback) {
req.open(‘GET’, url, true);
req.onreadystatechange = callback;
req.send(parameters);
}
La función que hemos creado ajaxRequest recibe una url a la que serán pasados un conjunto de parámetros contenidos en la variable parameters, estos últimos corresponden al texto que va después del signo de interrogación ‘?’ cuando usamos método GET. Además se recibe un puntero a una función (el «callback») que recibirá los resultados de la petición.
La función que usamos XMLHttpRequest.open() recibe en este caso tres parámetros:
method – El método, usualmente GET o POST.
url – La dirección de la página que queremos cargar.
sync? – Un flag que indica si la llamada es síncrona respecto al resto de los scripts que se ejecutan en la página. Si se pone en true, entonces el resto de los scripts esperarán que la petición retorne. Si se pone en false, la petición no bloqueará el resto de los scripts, ejecutandose asíncronamente.
La última pieza que falta es cómo recibir los datos. Esta es la función callback que le entregamos a ajaxRequest.
Este es un ejemplo:
function testReceiveRequest() {
if(req.readyState==4) {
alert(req.responseText);
}
}
Los estados posibles (XMLHttpRequest.readyState) son:
0: No enviado
1: Enviado
2: Encabezados HTTP recibidos
3: Recibiendo datos
4: Datos ya recibidos
Normalmente queremos ejecutar la función una vez que los datos son recibidos, por eso usamos el estado 4. Opcionalmente, si queremos ejecutar solamente en caso de éxito:
function testReceiveRequest() {
if(req.readyState==4 && (req.status>=200 && req.status<300)) {
alert(req.responseText);
}
}
Ejemplo 1: cargar una página HTML.
El siguiente es un ejemplo de una página que usa Ajax para hacer algo muy simple, y de hecho inútil, es sólo un ejemplo 🙂
Para usar este ejemplo es necesario tener un servidor corriendo en el host local, o usarlo en un sitio Web. Esto no funcionará sin un servidor Web, no se puede abrir con el método file:///.
Fichero «test1.html»
<script>
var req = false;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject(«Microsoft.XMLHTTP»);
}
function ajaxRequest(url, parameters, callback) {
req.open(‘GET’, url, true);
req.onreadystatechange = callback;
req.send(parameters);
}
// Nuestra peticion de prueba simplemente
// carga una pagina, sin pasar ningun parametro
function testRequest() {
var pagename = document.getElementById(«pagename»).value;
ajaxRequest(pagename,»,testReceiveRequest);
}
// Esta funcion es llamada cuando la peticion
// de prueba se completa
function testReceiveRequest() {
if(req.readyState==4) {
alert(req.responseText);
}
}
</script>
<input type=»text» id=»pagename» value=»test2.html»/>
<input type=»button» onclick=»testRequest()» value=»Load Page»/>
Fichero «test2.html»
<p>Esta es otra página</p>
Ejemplo 2: cargar datos de un XML
Normalmente Ajax se utiliza para cargar datos, y en ese caso los datos están en XML. En el caso de este ejemplo, los datos son fijos y están en el fichero test2.xml. En el uso real de Ajax, lo que pasará es que se hará una petición a un programa, pasando parámetros, de modo que el segundo parámetro de ajaxRequest no será vacío como en el ejemplo.
Fichero «test1.html»
<script>
var req = false;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject(«Microsoft.XMLHTTP»);
}
function ajaxRequest(url, parameters, callback) {
req.open(‘GET’, url, true);
req.onreadystatechange = callback;
req.send(parameters);
}
// Nuestra peticion de prueba carga un fichero
function testRequest() {
var pagename = document.getElementById(«pagename»).value;
// En este ejemplo no pasamos parámetros, sino un string vacío.
// Normalmente sí se pasan parámetros a la URL a la que se hace
// el request.
ajaxRequest(pagename,»,testReceiveRequest);
}
// Esta funcion es llamada cuando la petición de prueba se completa
// y extrae el primer hijo (texto) del primer tag «apellido» que aparezca
// en el XML que cargamos
function testReceiveRequest() {
if(req.readyState==4) {
var xml = req.responseXML;
var data = xml.getElementsByTagName(«apellido»)[0].childNodes[0].nodeValue;
alert(«Apellido:» + data);
}
}
</script>
<input type=»text» id=»pagename» value=»test2.xml»/>
<input type=»button» onclick=»testRequest()» value=»Load Page»/>
Fichero «test2.xml»
<?xml version=»1.0″?>
<persona>
<nombre>Juan</nombre>
<apellido>Perez</apellido>
</persona>
Usos de Ajax.
Normalmente Ajax se usa para crear interfaces en las cuales el usuario no necesita salir de una página para recibir nuevos datos. La mayoría de las APIs de mapas, por ejemplo, usan Ajax. También se usa para validar la entrada del usuario y generar sugerencias, por ejemplo sugerir tags para un objeto, o sugerir la forma correcta de escribir el nombre de un lugar, etc.
En la página de FormatoWeb hay varios ejemplos de uso de Ajax.
Nota que en una aplicación real es una buena idea cubrir la lógica de detección del tipo de XMLHttpRequest y estado de este objeto con una biblioteca, en vez de usar las funciones de bajo nivel directamente. Connection Manager es una biblioteca de Javascript especializada en Ajax, también las bibliotecas de Javascript jQuery y PrototypeJS contienen funciones para hacer más simple el código Ajax
Via: Tejedoresdelweb
