Una embarradita de Ajax
23/04/2007En estas épocas de tanto framework, lo mejor es simplemente bajarnos una libreria y empezar a utilizar sus funciones sin preocuparnos por lo que pasa detras, pero nunca esta demas aprender a hacerlo desde cero, no es tan complicado como comunmente se cree.
Introducción
La definición de Ajax según la Wikipedia:
“..es una técnica de desarrollo web para crear aplicaciones interactivas. Éstas se ejecutan en el cliente, es decir, en el navegador del usuario, y mantiene comunicación asíncrona con el servidor en segundo plano.”
Esta técnica no parte de nada nuevo, sino que se basa en las tecnologias existentes, como Javascript, DOM y sobre todo el objeto XMLHttpRequest, quien es el que se encarga de realizar las transacciones asíncronas y que el usuario no tenga que esperar por cada petición al servidor.
“..De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma.”
Un ejemplo básico de una aplicación Ajax
Este ejemplo tiene 3 campos que se utilizan para la selección de un alumno, al hacer click sobre cualquiera de los campos, se manda llamar a un script de PHP, que conectandose a una base de datos devuelve la información del individuo seleccionado sin necesidad de recargar la página.
Es un ejemplo simple y que no tiene ninguna clase de comprobaciones con el fin de que sea sencillo de entender.
Se utilizan 2 archivos que realizan todo el trabajo:
intro.html:
Un html que contiene nuestras 2 funciones básicas de javascript, con la primera función obtenerAlumno(), recibimos los datos provenientes del usuario y mandamos llamar al script de PHP que se encargara de sacar la información de la base de datos.
La segunda función callbackAlumnos(), se ejecuta solamente cuando haya recibido la señal del que archivo de PHP termino su ejecución, en este caso tomamos los datos que el script de PHP nos regreso y se los asignamos al div resultados.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <html>
<head>
<title>Introduccion a Ajax</title>
<script languague="Javascript">
/* esta funcion se encarga de iniciar la peticion asincrona */
function obtenerAlumno(id)
{
/*
* tratamos de crear un objeto XMLHttpRequest,
* si esto falla usamos ActiveX que es el caso de Internet Explorer
*/
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("oh noes! no se que navegador estas utilizando!");
}
/* cuando la peticion al script de php se complete, llamaremos a la funcion callbackAlumo */
xmlhttp.onreadystatechange = callbackAlumno;
/* abrimos y mandamos una peticion al script de php, mandandole la id del alumno por get en la url */
xmlhttp.open("GET", 'regresa_datos.php?id=' + id);
xmlhttp.send(null);
}
/* esta function se ejecuta cuando el script de php termina su labor */
function callbackAlumno() {
/* finalmente buscamos el div con id resultados y lo llenamos con la respuesta del script php */
document.getElementById("resultados").innerHTML = xmlhttp.responseText;
}
</script>
</head>
<body>
<!-- unos simples inputs que mandan la id del resgistro que queremos --!>
<input type="radio" onclick="obtenerAlumno('1')" />Primer Alumno
<input type="radio" onclick="obtenerAlumno('2')" />Segundo Alumno
<input type="radio" onclick="obtenerAlumno('3')" />Tercer Alumno
<p>
<div id="resultados"></div>
<p>
</body>
<html> |
regresa_datos.php:
Este script de PHP recibe la id de algun alumno, lo busca en la base de datos e imprime su información en pantalla.
1 2 3 4 5 6 7 8 9 10 | $id_alumno = $_REQUEST['id']; mysql_connect('localhost', 'usuario', 'password'); mysql_select_db('base_datos'); $resultado = mysql_query("select nombre, domicilio, email from alumnos where id={$id_alumno}"); $fila = mysql_fetch_object($resultado); echo "Yo soy {$fila->nombre}, y vivo en {$fila->domicilio}. Mandame un mail a {$fila->email}!"; |
Si son demasiado ociosos para crear la tabla de ejemplo, aqui les dejo la que utilize:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | DROP TABLE IF EXISTS alumnos; CREATE TABLE alumnos ( id int NOT NULL AUTO_INCREMENT, nombre varchar(50) NOT NULL, codigo varchar(10) NOT NULL, domicilio varchar(50) NOT NULL, email varchar(30) NOT NULL, nacimiento date NOT NULL, PRIMARY KEY (id) ); INSERT INTO alumnos (nombre, codigo, domicilio, email, nacimiento) VALUES('Fulanito Perez', 'FP12345678', 'Av. Fulanita #123', 'fulanito@perez.com', '1983-03-01'); INSERT INTO alumnos (nombre, codigo, domicilio, email, nacimiento) VALUES('Homero Simpson', 'HS12345678', 'Av. Siempre Viva #123', 'homer@aol.com', '1954-01-02'); INSERT INTO alumnos (nombre, codigo, domicilio, email, nacimiento) VALUES('Don Benito', 'DJ12345678', 'Don Benito Street #123', 'elbeni@benilandia.com', '1944-10-30'); |
Puedes ver este ejemplo funcionando aqui.
Conclusión
Puedes hacer tu aplicación web mucho mas interactiva con el usuario con tan solo unas líneas mas de código, a pesar de que Ajax ya tiene algunos años desde que salio, todavia muchos desarrolladores lo desconocen o aún piensan que es muy complicado, es tiempo de cambiar eso!
Hay 4 comentarios: