Xajax: una clase en PHP para AJAX

06Abr08

Qué es xajax?

Xajax es un framework (que es algo así como un entorno de trabajo) y que está escrito en PHP. Es de código abierto y con él podemos crear aplicaciones web utilizando AJAX sin la necesidad de conocer todos los detalles de la programación en JavaScript.

Para qué sirve xajax?

En una aplicación Web, el servidor crea una página que es enviada al cliente. Ésta página crea, entre otras cosas, formularios y botones que a su vez disparan ciertos eventos de JavaScript (onclick, onchange, etc) o pueden redireccionar nuestra página a otra alojada en el servidor para ejecutar código PHP, por ejemplo. Estas funciones, como acabamos de mencionar, pueden o no interactuar con el servidor (llamando a eventos JavaScript o redirigiendo la página o otra alojada en el servidor), pero según el caso, podemos necesitar invocar datos que se encuentran sólo en el servidor de forma tal que parezca como si estuviéramos disparando un evento con JavaScript y no con una función PHP alojada en el servidor. Esto último se hace con Ajax (acceso asincrónico al servidor).

Este tipo de páginas resultan muy útiles y son lo último en desarrollo web (Web 2.0). Un proyecto Ajax puede resultar muy costoso y largo; pero con Xajax no es así.

XaJax te permite escribir funciones en PHP que pueden ser accedidas cuando ya la página ha estado enviada al navegador, cuando el usuario ha disparado un evento o la función PHP ha sido llamada desde JavaScript. Éstas funciones PHP modifican el contenido o el aspecto de la página, como lo podría hacer JavaScript, pero repito que se hacen desde PHP, lo que abre un abanico de posibilidades: PHP puede acceder a bases de datos, al sistema de archivos… Y todo sin recargar la página!!!

Descarga del .zip

Para instalar la librería xaJax, debes abrir el zip que acabamos de descargar de la web y lo descomprimimos conservando la estructura de las carpetas. Lo descomprimimos dentro de la carpeta donde tienes la web en el servidor local o remoto y debes cambiarle el nombre de la carpeta (normalmente el nombre xajax seguido del nombre de la versión) por solamente xajax.

A éste momento la última versión es xajax 0.2.5 (stable). El zip consta de tres scripts PHP: xajax.inc.php, que contiene la clase xajax, xajaxResponse.inc.php, que contiene la clase xajaxResponse, y xajaxCompress.php, que es una utilidad para, de cierta manera, reducir el peso de un archivo JavaScript. Contiene también, en la carpeta xajax_js, dos archivos .js; uno que contiene el código original (el xajax_uncompressed.js) y otro que es el que está comprimido y es el que se usa para enviar al navegador (el xajax.js). Además de eso, también incorpora dos archivos .txt (la licencia y el readme) y dos carpetas más (examples, con ejemplos de utilización y tests, donde puedes probar xaJax).

Funcionamiento

Lo único que hay que hacer es escribir un require (‘xajax/xajax.inc.php’) en el archivo por defecto (index.php, por ejemplo). Obviamente, este archivo index.php está en la carpeta de nuestra web en el servidor, en donde has descomprimido el zip que ahora se ve como una carpeta de nombre “xajax”, repito.

Como he dicho antes, xaJax permitirá a una función JavaScript recibir una respuesta de una función del servidor. Dicha respuesta estará en formato XML (como es habitual en AJaX) y será interpretada por la misma función JavaScript que realizará los cambios en la página que se le piden.

El objeto xajaxResponse contiene la respuesta que realiza la función PHP y el objeto xajax es el que recibe las peticiones de que se ejecuten las funciones, el que las gestiona, al igual que todas las respuestas, y el que envia las respuestas en XML de vuelta al navegador.

Por lo tanto, se puede distinguir dos partes en una página basada en xaJax: una parte es todo el código php que contiene las funciones y los objetos xajax y xajaxResponse (además de todo el código necesario para que la web tenga un entorno dinámico) y otra parte que sería todo lo que se ejecuta en el navegador.

Bueno, basta de preliminares y vamos directamente a los hechos…

El ejemplo que a continuación les muestro, es muy sencillo. Es sólo para explicar el funcionamiento de la clase xajax. Con un poco de imaginación y de acuerdo a sus necesidades, uds. podrás complicarlo todo lo necesario de acuerdo a sus necesidades. Aquí los pasos:

1) Incluir con PHP el archivo donde está la clase xajax

//incluímos la clase ajax
require (‘xajax/xajax.inc.php’);

2) Creamos una instancia de un objeto de la clase xajax

//instanciamos el objeto de la clase xajax
$xajax = new xajax();

3) Escribimos una función en PHP, que luego llamaremos por medio de ajax

Esta función es todo lo complicado que se requiera. Realizará acciones del lado del servidor y por tanto puede acceder a bases de datos, abrir ficheros o cualquier cosa que se nos ocurra. Luego en la propia función realizaremos una instancia de un objeto AjaxResponse, que utilizaremos para mostrar resultados en la página.

function si_no($entrada){
if ($entrada==”true”){
$salida = “Marcado”;
}else{
$salida = “No marcado”;
}

//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse();
//escribimos en la capa con id=”respuesta” el texto que aparece en $salida
$respuesta->addAssign(“respuesta”,”innerHTML”,$salida);

//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;
}

El objeto xajaxResponse() se encarga de realizar acciones en la página sin tener que recargar el documento, en otras palabras, sin que veamos el refresh. Posee varios métodos o funciones. Uno de ellos es addAssign() que sirve para asignar un valor a una propiedad de un elemento HTML de la página. En este caso se asigna el valor contenido en la variable $salida al innerHTML de la capa “respuesta”, con lo que se cambia el contenido en esa capa.

4) Asociamos la función PHP al objeto xajax

//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction(“si_no”);

Esta asociación permite ejecutar la función PHP desde una llamada a una función Javascript.

5) Antes de enviar cualquier contenido a la página, tenemos que ejecutar un método del objeto xajax para procesar las peticiones del que puedan llegar a la página.

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();

Es importante tener en cuenta que esta llamada al método se tiene que hacer antes de escribir algún contenido HTML dentro del código de la página, es decir, antes de que llegue al cliente algún caracter de código HTML.

6) Luego hacemos que la clase xajax escriba todo el códogo javascript necesario para procesar las llamadas a ajax.

//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript(“xajax/”);

Lo ideal es hacer esta llamada al método printJavascript() dentro del <head> de la página.

Si nos fijamos, el método recibe un parámetro, que es la ruta relativa para acceder al directorio donde están los archivos xajax descomprimidos.

7) Podemos hacer llamadas a las funciones PHP en cualquier lugar del código, como respuesta a las acciones del usuario con javascript.

<input type=”checkbox” name=”si” value=”1″ onclick=”xajax_si_no(document.formulario.si.checked)”>
Como podemos ver, desde un elemento de la página, como en este caso una casilla de verificación, al cambiar su estado, se llama a una función javascript que ejecuta una función PHP escrita anteriormente. Es decir, al pulsar el chechbox se desencadena el evento onchange y con él se llama a la función xajax_si_no() enviándo como parámetro el estado (chequeado o no) de la casilla de verificación.

Pueden ver el código del ejemplo completo a continuación, pero hay que tener en cuenta que para que funcione tienen que disponer del código de la clase xajax, que en este caso debe estar en un subdirectorio que cuelgue del directorio donde está el archivo del ejemplo (por ejemplo index.php).

<?
//incluímos la clase ajax
require (‘xajax/xajax.inc.php’);

//instanciamos el objeto de la clase xajax
$xajax = new xajax();

function si_no($entrada){
if ($entrada==”true”){
$salida = “Marcado”;
}else{
$salida = “No marcado”;
}

//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse();
//escribimos en la capa con id=”respuesta” el texto que aparece en $salida
$respuesta->addAssign(“respuesta”,”innerHTML”,$salida);

//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;
}

//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction(“si_no”);

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>

<html>
<head>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html;charset=ISO-8859-1″>
<title>Si / No en Ajax</title>
<?
//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript(“xajax/”);
?>
</head>

<body>
<div id=”respuesta”></div>
<form name=”formulario”>
<input type=”checkbox” name=”si” value=”1″ onclick=”xajax_si_no(document.formulario.si.checked)”>
</form>

<script type=”text/javascript”>
xajax_si_no(document.formulario.si.checked); //Llamando inicialmente a la función xajax_si_no inicializamos el valor de la capa con la respuesta
</script>
</body>
</html>

Para escribir éste post me basé en un artículo publicado en www.desarrolloweb.com y en el libro “AJAX WEB 2.0 La guia total del desarrollador”, de Francisco Minera, Ed. MPEdiciones – 2007

Anuncios


3 Responses to “Xajax: una clase en PHP para AJAX”

  1. 1 Fausto Montenegro

    Esta muy chevere el articulo, pero la clase actualmente es la 0.5 y no encuentro por ningun lado 0.2.5, me la podrias hacer disponible por favor, ademas necesito saber a mas detalle como migrar un codigo 0.2.5 a 0.5, lo que he visto no me ayuda mucho de la misma web de desarrolloweb y de xajax, si tienes algo mas entendible te lo agradeceria mucho.

  2. 2 Hector

    de igual forma estoy de acuerdo con Fausto podrias dejar el link para descargar xajax te lo agradeceria

  3. Acá les dejo un repositorio de versiones descontinuadas:
    http://php-xajax.sourcearchive.com/documentation/0.2.5/main.html


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: