Antes de empezar esta segunda parte de la introducción a AJAX donde nos meteremos de lleno en la programación en sí y dejaremos de lado la teoría, querría prevenir a los lectores que en una primera lectura el código y los ejemplos no sean comprensibles, pero se les anima a releerlos e intentar trazarlos para así llegar a una mayor comprensión del algoritmo utilizado.
Funciones comunes
Primero que nada vamos a revisar las 2 funciones que usaremos siempre en nuestro sistema AJAX.
//Funciones comunes
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
La función addEvent se encarga de ejecutar una ‘funcion’ al suceder un ‘evento’ sobre un ‘elemento’ es decir si tenemos el boton1 y queremos que en la acción ‘onclick’ se ejecute la función ‘comprobar()’, lo llamaremos de la siguiente forma:
addEvent(boton1, 'click', comprobar, false);La función crearXMLHttpRequest() es la encargada de crear nuestro módulo AJAX para hacer peticiones de fondo. Básicamente se crea una función gracias al «amado» Internet explorer que usa un ActiveX, el resto de navegadores utilizan windows.XMLHttpRequest como marcan los estándares.
Un primer ejemplo
Para un primer ejemplo vamos a utilizar un ejemplo muy básico utilizando ajax. El ejemplo contará con dos botones, uno nos dirá «Hola» y el otro «Adios». El código del HTML será el siguiente:
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX 1: Primer código con ajax</title>
<script language="javascript" src="ajax.js"></script>
</head>
<body>
<input type="button" id="bot1" value="Hola" />
<input type="button" id="bot2" value="Adios" />
<div id="contenedor" name="contenedor"></div>
</body>
</html>Como se aprecia no hay nada del otro mundo, 2 botones y un div llamado contenedor, este div es el que albergará el contenido que nos retorne AJAX en su petición. Como nota, fijense que los botones no están dentro de un formulario, así que para usarlos usaremos eventos en javascript. Nuestro index.php también será muy simple:
<?php
if ($_GET['bt'])
echo "hola!";
else
echo "adios!";
?>Como veis si la variable GET bt está definida o es 1 nos enviará «hola!» por pantalla, en caso de no estar definida o ser 0 nos enviará «adios!», es importante puntualizar que las salidas por pantalla como echo o printf son los datos que tomará AJAX y mostrará en nuestro HTML.
Este script puede ser, obviamente, una consulta SQL procesada mostrando el mensaje que queremos mostrar, haciendo un update, etc. Este ejemplo lo pongo como una idea muy básica y simple para que se pueda comprender Entonces ya solo queda revisar nuestro javascript, esta es la parte más complicada siempre y la que requiere mayor atención.
addEvent(window,'load',cargar,false);
function cargar() {
var bot1 = document.getElementById('bot1');
var bot2 = document.getElementById('bot2');
addEvent(bot1, 'click', conectarb1, false);
addEvent(bot2, 'click', conectar, false);
}
function conectarb1() {
var con = 1;
conectar(con);
}
var conexion;
function conectar(con) {
if (con != 1) {con = 0}
conexion = crearXMLHttpRequest();
conexion.onreadystatechange = procesarEventos;
conexion.open('GET', 'index.php?bt=' + con, true);
conexion.send(null);
}
function procesarEventos() {
var contenedor = document.getElementById('contenedor');
if (conexion.readyState == 4) {
contenedor.innerHTML = conexion.responseText;
}else {
contenedor.innerHTML = "loading...";
}
}
//Funciones comunes
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}En la primera línea podemos ver como se agrega un event, su tarea es llamar a una función que cargará los datos cuando el documento se termine de generar. La función que llamará es cargar() y es la que líneas más abajo vemos que recoge los dos botones y agrega dos eventos más (uno para cada botón). Que para el botón 1 llame a la función conectarb1() es por el simple motivo que no se me ocurrió un método más simple de comprobar que botón se había pulsado sin complicar el ejemplo más de lo necesario.
Lo único que hace es establecer una variable (con) en 1 en caso de que se pulse el botón uno, esta variable se enviará a nuestro index.php, por lo tanto si es 1 mostrará «hola!».
La función conectar() se encargará de crear el objeto AJAX y enviar los datos a nuestro index.php, pero antes comprueba que la variable con no sea uno, en caso de que no lo sea la establece en 0 para evitar errores.
Creamos el módulo AJAX en la variable conexión, este modulo tiene varias propiedades, entre ellas las más usadas son
- conexion.onreadystatechange = procesarEventos;
Esta propiedad se encarga de almacenar la función que se ejecutará cuando el objeto AJAX cambie de estado.
- conexion.readyState
Esta propiedad almacena el estado de la petición al servidor, los estados son 5:
— 0 No inicializado (aún no se ha realizado una petición)
— 1 Cargando (se ha llamado al método open)
— 2 Cargando (se ha llamado al método send y ya tenemos la cabecera HTTP y el status)
— 3 Interactivo (la propiedad responseText tiene datos Parciales)
— 4 Completado (la propiedad responeText tiene todos los datos devueltos por el servidor)
- conexion.responseText
Esta propiedad almacena los datos que nos da el servidor como respuesta a la conexión.
- conexion.responseXML
Funciona de manera similar pero el script ha de retornarnos un XML
También contamos con dos métodos importantes
- conexion.open
Abre la petición HTTP al servidor
- conexion.send
Envía la petición HTTP al servidor
Con estos nuevos conceptos en mente volvemos a mirar la función conectar(), ahora sabemos que la línea
conexion.onreadystatechange = procesarEventos;Llamará a dicha función cuando el readystate sufra un cambio, pero de momento no vamos a analizarla. Luego de almacenar la función procesarEventos abrimos la conexión con:
conexion.open('GET', 'index.php?bt=' + con, true)El primer parámetro puede ser GET o POST y el segundo es la página que llamamos, en el caso de GET también agregamos las variables con sus valores. Hay quienes recomiendan crear una variable random para evitar la caché, haciendo algo así
var ran = Math.random()
conexion.open('GET', index.php?bt' + con + '&' + ran + '=' + ran, true);
En la última línea de esta función, finalmente, enviamos todo al servidor junto con un null al método .send Ahora sí vamos a analizar la función procesarEventos()
Primeramente capturamos el contenedor donde vamos a mostrar los datos.
Acto seguido, comprobamos el readyState de la conexión, si este es 4 mostraremos el valor que nos devolvió el script index.php con la propiedad responseText y sinó mostraremos un mensaje personalizado, en este caso «loading…»
En localhost quizá el «loading..» casi no llega a apreciarse, por lo que resulta una buena idea poner un sleep(3); en el index.php para notar su efecto.
También podemos agregar una imagen así:
contenedor.innerHTML = '<img src="imagen.png" />';Aquí acaba la iniciación a AJAX, en un próximo capítulo hablaremos del método POST y de algún que otro ejemplo e ideas sobre donde aplicar AJAX.
Nota: el código JavaScript de este tutorial fue extraido y adaptado de ajaxya.com con algunas modificaciones de mí parte para simplificarlo.