La tecnología AJAX (Asynchronous JavaScript + XML) consiste esencialmente de actualizar el contenido de una pagina accediendo al servidor pero sin recargar la página. El esquema sería el siguiente:
- Cierto código Javascript llama a un fichero del lado del servidor (fichero .php, .asp, etc) en algún momento (tras una temporización, algún evento de pantalla…) pudiéndole pasar variables.
- El fichero del lado del servidor (php, asp, etc) genera un código Javascript.
- Este código Javascript se ejecuta en la página, pudiendo modificar el HTML de la página o realizando alguna acción.
Es decir, podemos actualizar completamente el contenido de nuestra página y enviar o recibir variables al servidor (pudiendo éste acceder a base de datos), todo esto sin recargar la página. Es evidente las posibilidades que tiene esta tecnología. Como requerimentos para poder desarrollar páginas con AJAX están todos los lenguajes implicados: HTML, Javascript y algún lenguaje del lado del servidor, que en este caso será PHP.
Habitualmente todo esto se realiza usando fichero XML con lenguaje estándar para enviar/recibir información pero no es necesario. En este artículo vamos a ver como usar AJAX sin XML. Además este método es considerablemente más sencillo. Veamos todo esto con un ejemplo.
Primero creamos nuestra página HTML:
<html>
<head><title>Generador de números aleatorios mediante AJAX.</title>
<script language="JavaScript" type="text/javascript">
function genera(){}
</script>
</head>
<body>
<div id="minumero"></div>
<input type="button" onClick="genera();" value="Dame otro número aleatorio">
</body>
</html>
Vemos que tenemos un botón al cual si pinchamos en él, llamará a una función Javascript (que aún no hemos definido) llamada genera();
Esta función, en vez de realizar alguna acción visible cuando es llamada, lo que hará será cargar otro Javascript. Este Javascript se cargará desde el servidor.
Veámoslo:
<html>
<head><title>Generador de números aleatorios mediante AJAX.</title>
<script language="JavaScript" type="text/javascript">
function genera(){
var minuevoscript = document.createElement("script");
minuevoscript.src = 'generameunnumero.php';
minuevoscript.setAttribute('language', 'javascript');
minuevoscript.setAttribute('type', 'text/javascript');
document.body.appendChild(minuevoscript);
}
</script>
</head>
<body>
<div id="minumero"></div>
<input type="button" onClick="genera();" value="Dame otro número aleatorio">
</body>
</html>
La función genera() carga un nuevo script, que en vez de tener como extensión .js, como es habitual, es un .php. Creemos ese fichero .php para terminar de ver el ejemplo.
<?php
header("Content-type: text/javascript");
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
?>
document.getElementById("minumero").innerHTML=<?php echo rand(1,999);?>;
El fichero generameunnumero.php lo unico que hace es escribir un pequeño código Javascript, que escribirá (actulizará el HTML) un número aleatorio dentro de la capa «minumero».
Las primeras líneas de este fichero tienen esencialmente 2 objetivos. Por un lado, para advertir de que lo que devuelve el fichero es un archivo javascript. Esto se hace con la línea (header(«Content-type: text/javascript»);). El resto de líneas son para indicar que no cachee el fichero, es decir, que no lo guarde en la cachee del navegador, de manera que cuando lo vuelvan a llamar tengan que volver a ir al servidor.
Esto es sólo un ejemplo de cómo funciona AJAX con PHP. Con cualquier otro lenguaje (JAVA, Asp.net, Perl…) sería muy similar.
Realmente lo que hemos en este ejemplo no necesita AJAX, puesto que tan sólo generamos número aleatorios, pero os puede dar una idea de la potencia de este método. Una buena aplicación es enviar/recibiar información a/desde bases de datos sin recargar la página.