PHP y Ajax, la forma más fácil y rápida de desarrollar tus aplicaciones

Asynchronous JavaScript And XML AJAX es una técnica de programación para la creación de aplicaciones dinámicas. En este tutorial aprenderemos a utilizar XAJAX para combinar PHP y Javascript de la forma más sencilla que podamos imaginar

Después de tanto tiempo tratando con PHP y Javascript un día decidí aprender una de esas técnicas a la que más miedo, infundado, tenía… AJAX, ese gran desconocido…

En esa época era un joven feliz y con mucho tiempo libre… sí, ahora soy un viejo amargado sin demasiado tiempo para dormir, que se le va a hacer, desde que no duermo 12 horas no soy el mismo.

En fin, la cuestión es que aprendí a usar ajax mediante el viejo sistema de XMLHttpRequest.. con el tiempo mi felicidad iba en aumento y aprendí un poco de jQuery… así que empecé a utilizar esos grandiosos métodos llamados $.ajax, $.post y $.get (nunca entenderé la utilidad de tener 3 de lo mismo).

Este mes pasado empecé las prácticas de grado superior en una empres de diseño la cual también se dedica a la creación de sitios web.
Allí utilizan muchísimo una clase de PHP llamada XAJAX, como yo no la había utilizado nunca el otro programador me dio unas nociones básicas y a partir de ahí todo ha sido tocar y aprender…

Sin embargo xajax me ha dejado un buen sabor de boca… lo poco que se usarla la hace especial por su simplicidad y dinamismo, adaptandose con la misma facilidad a cambiar una imagen al producirse un evento concreto o enviar 300mil trillones de datos via post… (caso medianamente real).

Bajar e iniciar XAJAX

Como no, el primer paso necesario para cualquier aplicación es bajarla y hablar de su estructura básica.

La podemos bajar de su página oficial, allí mismo hay muchísima información pero como ya es costumbre haré una introducción básica a xajax.

Estructura básica de XAJAX

La estructura básica que deberemos seguir es la siguiente:

Incluir la libreria de XAJAX e instanciar el objeto

La inclusión de la librería es obligatoria en todas las páginas que vayamos a utilizar…
Y siempre uso el mismo documento tanto para la página final como para las funciones de XAJAX, más adelante veréis porque.

include 'xajax_core/xajax.inc.php';

$xajax = new xajax();

Con esas dos complicadas lineas de código tenemos listo nuestro objeto para empezar a trabajar. Se pone difícil la cosa verdad?

Registrar las funciones de XAJAX

Algo que tenemos que hacer es registrar cada función de XAJAX para su posterior utilización.
En la página oficial hay un ejemplo en el que usa dos variables distintas para cada registro, como ese método ya está documentado en su web, yo documentaré el otro método que es registrar todo sin utilizar una variable de contenedor.

El registro se realiza de la siguiente forma:

$xajax->register(XAJAX_FUNCTION, 'EnviarForm');
$xajax->register(XAJAX_FUNCTION, 'CheckStatus);

Declaración de las funciones

Podría parecer que esta parta requiere un tratado especial pero en realidad hay que hacer lo mismo que a la hora de declarar una función de php.

Podemos imaginar que XAJAX es un contenedor gigante en el que tiene almacenadas todas las funciones que hemos registrado, en el momento en el que desde javascript llamamos a una de ellas, XAJAX cargará solo la función de la página que hemos llamado pasandole los parámetros que le hemos requerido.

Es decir, si la página pruebas.php que utiliza XAJAX tiene 2.000 lineas de código y llamamos a la función fooX que tiene 20 lineas, XAJAX solo cargará esas 20 lineas que necesitamos.

Entonces se declaran así:

 function EnviarForm($datos) {
   //acciones
 }
function CheckStatus() {
 //otras acciones
}
//importante
$xajax->processRequest();

No hay que olvidar poner la última linea al final de nuestro código!

Sigue siendo todo muy complicado verdad? Debe ser tanto concepto nuevo…

Incluir el javascript de XAJAX en la web

Esta parte difiere entre este método y el método de la web oficial.

Nota:
Mientras que en la web oficial utilizan dos variables para almacenar los registros e imprimen los métodos de la siguiente forma:

 <input type="button" onclick="printScript(); ?>" id="btnAdd" value="Click Me" />
  <input type="button" onclick="printScript(); ?>" id="btnReset" value="Reset" />

Yo considero que la siguiente forma se adapta mejor a nuestro abanico de posibilidades.

Ya terminando con la utilización básica de XAJAX vamos a ver como llamar a las funciones XAJAX desde nuestro javascript.
Lo primero es incluir todo el código Javascript que XAJAX auto genera en nuestra cabecera.

<head>
<?php echo $xajax->printScript() >
</head>

Me disculpo si esta última parte es errónea pues no recuerdo si hace falta el echo o no :P

Llamar a XAJAX

El penúltimo paso de hoy es como llamar a la función de xajax.
Es tan fácil como poner el siguiente código:

 <input type="button" onclick="xajax_EnviarForm(parametros)" >

Así de sencillo, con un poco de código en PHP y un poco de código en Javascript para recolectar los datos del formulario (en otra ocasión me extenderé en como recolectar todos los datos de un form con XAJAX) tendríamos nuestra aplicación funcionando con AJAX.

En otro post me extenderé en 3 puntos:

  • Como recoger todos los valores de un formulario
  • Como retornar variables desde el php a javascript
  • Como retornar contenido HTML o mensajes de error

A mi entender y bajo mi experiencia las tres son esenciales a la hora de trabajar con XAJAX y AJAX


Así nos han encontrado!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">