|
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);?>;
|
Código de generameunnumero.php.
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.
El ejemplo de todo esto lo podéis ver aquí: Ver
ejemplo en una página aparte.
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.
Artículo escrito por Luis Ibañez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.
|
