Este artículo pretende ser una introducción a AJAX, un sistema para desarrollar aplicaciones web con procesamiento en servidor, sin necesidad de recargar la página.
Este pequeño reportaje explica cómo ganar en tiempo de respuesta del servidor y por tanto, aumentar la eficiencia en el desempeño de los desarrollos web, basado en el uso de PHP como tecnología de programación, más el uso de AJAX (Asynchronous JavaScript And XML).
Comenzaré por decir que yo no soy experto en el tema y que si bien, AJAX (anteriormente conocido como JSRS[Java Script Remote Scripting]) es un método que ya tiene varios años utilizándose. Hace unos meses que comencé a interesarme en AJAX y la información al respecto no era demasiada. Afortunadamente, para esta época, el uso de AJAX se ha extendido de forma abundante y debo decir que ya no sólo existe información, sino ejemplos y desarrollos varios basados en ella.
¿Qué es AJAX?
Bueno, como lo he dicho, a este momento ya hay mucha información técnica al respecto y muchos buenos conceptos. Creo que lo mejor será explicar en qué se diferencian los desarrollos tradicionales, con un desarrollo basado en AJAX, ya que es ahí donde radica el poder de esta combinación de tecnologías.
En un desarrollo tradicional, los clientes interactúan mediante el uso de formularios que hacen una petición. La misma es recibida por el servidor, procesada y reenviada de regreso en forma de respuesta al cliente. De esta manera, a veces se envía y reenvía toda una página web esperando tan solo regresar un dato, con lo cual, el ancho de banda se desperdicia, pues mucha de la información contenida en la respuesta, ya existía originalmente en la primera página.
En un desarrollo basado en AJAX es posible enviar peticiones al servidor enviando solo la información necesaria. El servidor recibirá la petición, la procesará y regresará sólo los datos necesarios a la página original. Con todo ello, lógicamente, ganamos bastante en ancho de banda y por tanto, en tiempo de respuesta del servidor. Al final, en el performance o funcionamiento de los desarrollos también se verá mejorado.
El ejemplo clásico, y algo que muy comúnmente se hace, es la carga de un objeto <select> con elementos determinados a partir de una elección anterior. Concretando, podemos tener dos selects uno con estados y otro con municipios. En el primero seleccionamos, por ejemplo, un estado de la República Mexicana. Una vez realizada esa elección, el segundo select se cargaría con la lista de municipios/delegaciones que hay dentro del estado seleccionado. El objetivo final es seleccionar un municipio/delegación del estado que hemos marcado antes.
Para hacernos una idea más exacta del objetivo de este ejercicio, podemos ver el ejemplo en marcha:
En este caso tendremos un archivo principal con el formulario, un archivo .js que tiene la llamada al AJAX y un archivo .php que reciba el valor del estado elegido, lo procese y devuelva el resultado. A pesar de toda la complicación de tratar con un nuevo sistema como AJAX, el ejemplo es muy simple.
Veamos el código PHP del formulario
A continuación mostramos el código completo de la página del formulario. Luego explicaremos las líneas más importantes.
<?php include("funciones.php"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/usuario.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>::: Prueba de carga de municipios:::</title>
<script language="javascript" src="ajax.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function cargarContenido(){
var d1,contenedor;
contenedor = document.getElementById('contenedor');
d1 = document.QForm.estado.options[document.QForm.estado.selectedIndex].value;
ajax=nuevoAjax();
ajax.open("GET", "procesos.php?edo="+d1,true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText
}
}
ajax.send(null)
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="center" scope="col">
<form name="QForm" method="post" action="#">
<table width="80%" border="0" align="center" cellspacing="4">
<tr>
<td width="37%" align="right">Estado </td>
<td>
<?php
$xtra ='onChange="cargarContenido();"';
impSelect("estado",$xtra,"");
?>
</td>
</tr>
<tr align="left">
<td width="37%" align="right">Municipio </td>
<td>
<div id="contenedor">
<select name="municipio" class="navLink" id="municipio">
<option value="-99"> </option>
</select>
</div>
</td>
</tr>
</table>
</body>
</html>
Hasta aquí, habría que comentar lo siguiente:
<?php include("funciones.php"); ?>
El archivo funciones.php tiene una funcion llamada impSelect(), que recibe parámetros para buscar dentro de la tabla estado y municipio. Una vez obtenidos los registros, se encarga de pintar el objeto <select> y todos sus <option>. Esta función no es nada complicada y quedará para realización del lector.
<script language="javascript" src="ajax.js" type="text/javascript"></script>
Esto realiza la inclusión de una función para realizar un AJAX.
<script language="javascript" type="text/javascript">
// esta funcion se ejecuta al elegir un estado
function cargarContenido(){
var d1,contenedor;
contenedor = document.getElementById('contenedor');
//contenedor es el <div> , donde al final pintaremos el nuevo select
d1 = document.getElementById('estado').value;
// recibimos en una variable el valor del estado elegido
ajax=nuevoAjax();
//aqui creamos una instancia del objeto ajax
ajax.open("GET", "procesos.php?edo="+d1,true);
// con esto enviamos al archivo .php el valor del estado para que sea ejecutado
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//En esta parte del código, se revisa cuando el ha sido procesada la carga del AJAX
contenedor.innerHTML = ajax.responseText
//CON en esta línea, decimos que pinte el resultado en nuestro div "contenedor"
}
}
ajax.send(null)
// aqui se hace el envio del objeto
}
</script>
$xtra ='onChange="cargarContenido();"';
impSelect("estado",$xtra,"");
Como ya habiamos explicado, el archivo funciones.php contiene una función que pinta el <select> y que es la que mandamos llamar aquí. En resumidas cuentas, al query le estoy mandando el nombre de la tabla de la cual extraer la información ("estado"), que también se utiliza para nombrar el objeto <select> y que, como vimos arriba, es lo que recibe el objeto ajax y envía para procesamiento. También le envío un dato $xtra, que es el que pintará la función onChange() en el select, para así mandar a ejecutar el AJAX una vez elegido el estado.
<div id="contenedor">
<select name="municipio" class="navLink" id="municipio">
<option value="-99"> </option>
</select>
</div>
En este trozo de código HTML vemos el segundo select, que está dentro del div="contenedor". Ya vimos arriba que este div es donde pintaremos el resultado del procesamiento de nuestro estado, recibido por el archivo procesos.php. Mientras tanto, pinto un select vacío para hacer precisamente el efecto de carga de contenido dentro de este primer select, cuando en realidad lo que hacemos es reemplazarlo por uno nuevo.
Código de ajax.js
Bien, ahora, pasemos a ver qué tiene el archivo ajax.js.
function nuevoAjax(){
var xmlhttp=false;
try {
// Creación del objeto ajax para navegadores diferentes a Explorer
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// o bien
try {
// Creación del objet ajax para Explorer
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
Bueno, no hay mucho que decir al respecto. Sólo que este código es muy típico para crear el AJAX. Aunque se podría crear de otras maneras, este código funciona muy bien para la mayoría de los casos.
Código de procesos.php
Pasemos ahora al archivo procesos.php, que es el que ejecutamos para obtener la respuesta del AJAX.
<?
// incluyo mi archivo que contiene la función que imprime el objeto select
include("funciones.php");
// recibo mi valor de estado en la variable $edo
$edo = $_GET["edo"];
//llamo a la función para imprimir el select
impSelect("municipio","",$edo);
?>
En este caso, mando el nombre de mi tabla, que se llama municipio. Ahora no mando nada en la variable extra pues no se ejecutará nada en especial al seleccionar el municipio. Finalmente mando también el valor del estado, ya que mi query tomara este valor para decirle a la tabla que sólo me traiga los municipios que pertenezcan al estado seleccionado.
Esta llamada a la función es la que devolverá el AJAX, con lo cual, encima de mi select vacío, se pintará el select nuevo lleno con los municipios pertenecientes al estado seleccionado.
Conclusión
Pues eso es todo. Como hemos visto, para pintar sólo un select lleno de municipios pertenecientes a un estado, no era necesario enviar toda la página web de nuevo con el formulario entero, sino sólo el valor del estado seleccionado...
El efecto pueden verlo funcionando.
En adelante, les dejo a ustedes la tarea de investigar más sobre AJAX. Obviamente esta fue sólo una pequeña introducción. Únicamente basta con darle en cualquier buscador la palabra AJAX para comenzar a introducirse en el uso de esta recopilación de tecnologías.
Les dejo aquí un enlace a la sección especial de AJAX en Foros del Web:
Comenzaré por decir que yo no soy experto en el tema y que si bien, AJAX (anteriormente conocido como JSRS[Java Script Remote Scripting]) es un método que ya tiene varios años utilizándose. Hace unos meses que comencé a interesarme en AJAX y la información al respecto no era demasiada. Afortunadamente, para esta época, el uso de AJAX se ha extendido de forma abundante y debo decir que ya no sólo existe información, sino ejemplos y desarrollos varios basados en ella.
¿Qué es AJAX?
Bueno, como lo he dicho, a este momento ya hay mucha información técnica al respecto y muchos buenos conceptos. Creo que lo mejor será explicar en qué se diferencian los desarrollos tradicionales, con un desarrollo basado en AJAX, ya que es ahí donde radica el poder de esta combinación de tecnologías.
En un desarrollo tradicional, los clientes interactúan mediante el uso de formularios que hacen una petición. La misma es recibida por el servidor, procesada y reenviada de regreso en forma de respuesta al cliente. De esta manera, a veces se envía y reenvía toda una página web esperando tan solo regresar un dato, con lo cual, el ancho de banda se desperdicia, pues mucha de la información contenida en la respuesta, ya existía originalmente en la primera página.
En un desarrollo basado en AJAX es posible enviar peticiones al servidor enviando solo la información necesaria. El servidor recibirá la petición, la procesará y regresará sólo los datos necesarios a la página original. Con todo ello, lógicamente, ganamos bastante en ancho de banda y por tanto, en tiempo de respuesta del servidor. Al final, en el performance o funcionamiento de los desarrollos también se verá mejorado.
El ejemplo clásico, y algo que muy comúnmente se hace, es la carga de un objeto <select> con elementos determinados a partir de una elección anterior. Concretando, podemos tener dos selects uno con estados y otro con municipios. En el primero seleccionamos, por ejemplo, un estado de la República Mexicana. Una vez realizada esa elección, el segundo select se cargaría con la lista de municipios/delegaciones que hay dentro del estado seleccionado. El objetivo final es seleccionar un municipio/delegación del estado que hemos marcado antes.
Para hacernos una idea más exacta del objetivo de este ejercicio, podemos ver el ejemplo en marcha:
| Nota: El ejemplo lo he desarrollado en PHP, pues es el lenguaje que utilizo, pero basta decir que puede usar cualquier tecnología que esté enfocada al Web. |
En este caso tendremos un archivo principal con el formulario, un archivo .js que tiene la llamada al AJAX y un archivo .php que reciba el valor del estado elegido, lo procese y devuelva el resultado. A pesar de toda la complicación de tratar con un nuevo sistema como AJAX, el ejemplo es muy simple.
Veamos el código PHP del formulario
A continuación mostramos el código completo de la página del formulario. Luego explicaremos las líneas más importantes.
<?php include("funciones.php"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/usuario.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>::: Prueba de carga de municipios:::</title>
<script language="javascript" src="ajax.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function cargarContenido(){
var d1,contenedor;
contenedor = document.getElementById('contenedor');
d1 = document.QForm.estado.options[document.QForm.estado.selectedIndex].value;
ajax=nuevoAjax();
ajax.open("GET", "procesos.php?edo="+d1,true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText
}
}
ajax.send(null)
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="center" scope="col">
<form name="QForm" method="post" action="#">
<table width="80%" border="0" align="center" cellspacing="4">
<tr>
<td width="37%" align="right">Estado </td>
<td>
<?php
$xtra ='onChange="cargarContenido();"';
impSelect("estado",$xtra,"");
?>
</td>
</tr>
<tr align="left">
<td width="37%" align="right">Municipio </td>
<td>
<div id="contenedor">
<select name="municipio" class="navLink" id="municipio">
<option value="-99"> </option>
</select>
</div>
</td>
</tr>
</table>
</body>
</html>
Hasta aquí, habría que comentar lo siguiente:
<?php include("funciones.php"); ?>
El archivo funciones.php tiene una funcion llamada impSelect(), que recibe parámetros para buscar dentro de la tabla estado y municipio. Una vez obtenidos los registros, se encarga de pintar el objeto <select> y todos sus <option>. Esta función no es nada complicada y quedará para realización del lector.
<script language="javascript" src="ajax.js" type="text/javascript"></script>
Esto realiza la inclusión de una función para realizar un AJAX.
<script language="javascript" type="text/javascript">
// esta funcion se ejecuta al elegir un estado
function cargarContenido(){
var d1,contenedor;
contenedor = document.getElementById('contenedor');
//contenedor es el <div> , donde al final pintaremos el nuevo select
d1 = document.getElementById('estado').value;
// recibimos en una variable el valor del estado elegido
ajax=nuevoAjax();
//aqui creamos una instancia del objeto ajax
ajax.open("GET", "procesos.php?edo="+d1,true);
// con esto enviamos al archivo .php el valor del estado para que sea ejecutado
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//En esta parte del código, se revisa cuando el ha sido procesada la carga del AJAX
contenedor.innerHTML = ajax.responseText
//CON en esta línea, decimos que pinte el resultado en nuestro div "contenedor"
}
}
ajax.send(null)
// aqui se hace el envio del objeto
}
</script>
$xtra ='onChange="cargarContenido();"';
impSelect("estado",$xtra,"");
Como ya habiamos explicado, el archivo funciones.php contiene una función que pinta el <select> y que es la que mandamos llamar aquí. En resumidas cuentas, al query le estoy mandando el nombre de la tabla de la cual extraer la información ("estado"), que también se utiliza para nombrar el objeto <select> y que, como vimos arriba, es lo que recibe el objeto ajax y envía para procesamiento. También le envío un dato $xtra, que es el que pintará la función onChange() en el select, para así mandar a ejecutar el AJAX una vez elegido el estado.
<div id="contenedor">
<select name="municipio" class="navLink" id="municipio">
<option value="-99"> </option>
</select>
</div>
En este trozo de código HTML vemos el segundo select, que está dentro del div="contenedor". Ya vimos arriba que este div es donde pintaremos el resultado del procesamiento de nuestro estado, recibido por el archivo procesos.php. Mientras tanto, pinto un select vacío para hacer precisamente el efecto de carga de contenido dentro de este primer select, cuando en realidad lo que hacemos es reemplazarlo por uno nuevo.
Código de ajax.js
Bien, ahora, pasemos a ver qué tiene el archivo ajax.js.
function nuevoAjax(){
var xmlhttp=false;
try {
// Creación del objeto ajax para navegadores diferentes a Explorer
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// o bien
try {
// Creación del objet ajax para Explorer
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
Bueno, no hay mucho que decir al respecto. Sólo que este código es muy típico para crear el AJAX. Aunque se podría crear de otras maneras, este código funciona muy bien para la mayoría de los casos.
Código de procesos.php
Pasemos ahora al archivo procesos.php, que es el que ejecutamos para obtener la respuesta del AJAX.
<?
// incluyo mi archivo que contiene la función que imprime el objeto select
include("funciones.php");
// recibo mi valor de estado en la variable $edo
$edo = $_GET["edo"];
//llamo a la función para imprimir el select
impSelect("municipio","",$edo);
?>
En este caso, mando el nombre de mi tabla, que se llama municipio. Ahora no mando nada en la variable extra pues no se ejecutará nada en especial al seleccionar el municipio. Finalmente mando también el valor del estado, ya que mi query tomara este valor para decirle a la tabla que sólo me traiga los municipios que pertenezcan al estado seleccionado.
Esta llamada a la función es la que devolverá el AJAX, con lo cual, encima de mi select vacío, se pintará el select nuevo lleno con los municipios pertenecientes al estado seleccionado.
Conclusión
Pues eso es todo. Como hemos visto, para pintar sólo un select lleno de municipios pertenecientes a un estado, no era necesario enviar toda la página web de nuevo con el formulario entero, sino sólo el valor del estado seleccionado...
El efecto pueden verlo funcionando.
En adelante, les dejo a ustedes la tarea de investigar más sobre AJAX. Obviamente esta fue sólo una pequeña introducción. Únicamente basta con darle en cualquier buscador la palabra AJAX para comenzar a introducirse en el uso de esta recopilación de tecnologías.
Les dejo aquí un enlace a la sección especial de AJAX en Foros del Web:
Roberto Bárcenas