Como usar AJAX en PHP sin JavaScript (XAJAX)

Desde mediados de esta década, el boom de Ajax llego a la web llenando de tutoriales de frameworks como jQuery y prototype a sitios como este, en donde hasta ahora e visto varios tips y/o tutoriales acerca de los mismos, pero en ninguno hablan de cómo usar AJAX con PHP sin necesidad de saber JavaScript.

Me di a la tarea de utilizar el buscador de Cristalab para ver que tipos de temas relacionados existían, y si bien aparecieron algunos, la mayoría no tienen respuesta, por lo que decidí aportar a esta comunidad con este tutorial.

Para mí en un inicio comprender jQuery o Prototype me resulto complicado por el hecho de no manejarme bien en JavaScript y la forma en la que estos frameworks operan en el DOM.

Bueno afortunadamente conocí un framework llamado XAJAX desarrollado para utilizar AJAX básicamente con puro PHP.

Para este tutorial es importante y necesario que tengan bien en claro lo que es la programación HTML o CSS ya que no voy a entrar en detalles al respecto.

En este mismo sitio hay unos cursos muy completos en donde pueden aclarar sus dudas respecto a HTML y CSS

¿En donde encuentro la librería de XAJAX?

Para este tutorial voy a utilizar XAJAX 0.6 beta 1.

Esta versión beta se enfoca más que nada a la compatibilidad con PHP 5.3 lo cual puede llegar a ser muy útil, pero si tienes una versión anterior de PHP puedes llegar a tener un dolor de cabeza.

De ser así puedes bajar alguna versión anterior de XAJAX, pero también proporcionare la forma de hacer compatible la versión 0.6 de XAJAX con versiones anteriores a PHP 5.3

Descargar XAJAX 0.6 Beta 1

Dentro de esta carpeta podremos encontrar el siguiente contenido

./tests
./xajax_core
./xajax_js
./xajax_plugins
.copyright.inc.php

Una vez descargado y descomprimido, lo que a nosotros nos interesa son las 3 carpetas que inician con xajax_.

Estructura de nuestro proyecto

Para este tutorial crearemos 1 archivo llamado index.php y una carpeta llamada xajax con las 3 carpetas antes mencionadas dentro.

./xajax
.+ /xajax_core
.+ /xajax_js
.+ /xajax_plugins
.index.php

Nuestra vista HTML

Para este ejemplo voy a mostrar la manera de llenar una forma de login con XAJAX.

Por lo que debemos crear un formulario simple que en este caso será un formulario para hacer un login.

Código :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de formulario con XAJAX</title>
</head>
<body>
<div id="container">
  <div id="top">
    Ejemplo de formulario con XAJAX
  </div>
  <div id="content">
    <form id="formId">
      <p>
        Usuario: <input type="text" name="user" />
      </p>
      <p>
        Contrase&ntilde;a: <input type="text" name="pass" />
      </p>
      <input type="button" value="Enviar" />
    </form>
  </div>
  <div id="message"  class="message">
  &nbsp;
  </div>
</div>
</body>
</html>

Nuestro estilo CSS

Código :

.container {
width:300px;
height:150px;
color:#FFF;
font-size:12px;
font-family:Verdana, Geneva, Sans-serif;
}
.top {
padding:5px;
background-color:#066;
}
.content{
padding:5px;
background-color:#079;
}
.message{
padding:5px;
font-weight:bold;
background-color:#000;
}

Nuestro PHP

Código :

<?php
/**
 *Xajax utiliza funciones y/o métodos PHP para crear las respuestas.
 *Creamos una función llamada login($post).
 *Xajax enviará los datos del formulario dentro de nuestro parámetro   
 *$post, claro pueden llamar el parámetro como ustedes quieran.
 **/

function login($post)
 {
 // Recibimos los datos de nuestros inputs, de la misma forma que lo haríamos con un $_POST[].
 // Cabe destacar que estamos filtrando el contenido de los datos enviados por el usuario.
 // No queremos inyecciones de código verdad =).
 $user = htmlentities($post['user']);
 $pass = htmlentities($post['pass']);
 
 // Verificamos si los datos corresponden con nuestra "base de datos".
 $status = getLoginStatus($user,$pass); 

 // Creamos el mensaje de respuesta
 
 if($login)
   {
   $msg = "Haz ingresado exitosamente";   
   }
   else
   {
   $msg = "Tus datos son incorrectos"; 
   }
 }
 
 
function getLoginStatus($user,$pass)
 { 
 // No quiero entrar en detalles de conexión con bases de datos ya que ese no es el tema.
 // Para simplificar, vamos a utilizar 2 variables con 1 usuario y 1 contraseña solo 
 // para fines ilustrativos.
 // Para crear una conexión de base de datos se haría de la misma forma como siempre lo hemos hecho.
 // Si tienes dudas acerca de cómo crear una conexión de bases de datos te recomiendo leer al respecto.
 
 $testUser = "admin";
 $testPass = "0123456";
 
 // Si los datos ingresados en el formulario corresponden con nuestra "Base de datos" retornamos cierto.
 
 if($user == $testUser && $pass == $testPass)
   {
   return true;   
   } 
   else
   {
   return false;
   }
 }
?>

Integración con XAJAX

Hasta ahora tenemos nuestro formulario, nuestro CSS y nuestras 2 funciones PHP que procesaran nuestra forma de login.

Claramente, si hacemos una prueba en este momento no funcionaria puesto que aun no hemos manejado nada respecto a AJAX y nuestro código PHP no esta unido a nuestro formulario de ninguna manera.

Para continuar, debemos llamar la librería de XAJAX y registrar nuestra función login() como una función de XAJAX.

¿Qué significa una función de xajax?

Una función de xajax, básicamente es una función PHP convertida a JavaScript con el Poder de PHP en una misma función. Lo que vendría siendo una función bilingüe que entiende tanto PHP como JavaScript. Claro siempre y cuando respetemos el ambiente de xajax.

¿Esto a mi de qué me sirve?

Esto quiere decir que entre otras cosas, si nosotros agregamos un evento onclick a nuestro botón de envío, podemos ejecutar nuestra función php tal y como si fuera JavaScript, agregándole el prefijo xajax_.

Código :

<input type="button" value="Enviar" onclick="xajax_login(xajax.getFormValues('formId'))"  />

Y podemos ejecutar código tanto de PHP como de Javascript dentro de nuestra función.

Y de esta forma es como enviamos los datos a nuestra función login(). Cabe destacar que nuestra función ya no la podemos ejecutar como función PHP, una vez registrada siempre deberá ser llamada como llamaríamos una función en JavaScript, pero si podemos mandar llamar funciones tanto de PHP como de Javascript dentro de nuestra nueva función XAJAX.

Ahora que tenemos claro como es que xajax envía los datos a nuestra función debemos entender como registrarla y crear un ambiente en xajax.

Por lo que deberemos editar nuestro código PHP para integrar xajax a nuestro proyecto.

Código :

/**
 * 1.- Incluimos nuestra libreria.
 * 2.- Instanciamos un nuevo objeto XAJAX.
 * 3.- Registramos nuestra función login().
 * 4.- Procesamos el registro.
 * 5.- Especificamos la ruta de nuestra libreria JS
 **/

include 'xajax/xajax_core/xajax.inc.php';

$xajax = new xajax();

$xajax->register(XAJAX_FUNCTION, 'login');

$xajax->processRequest();

$xajax->configure('javascript URI','xajax/');

function login($post)
 {
 // Debemos crear una respuesta a XAJAX para nuestra función de la siguiente manera.
 
 $output = new xajaxResponse();
    
 $user = htmlentities($post['user']);
 $pass = htmlentities($post['pass']);
 
 $login = getLoginStatus($user,$pass); 
 
 if($login)
   {
   $msg = "Haz ingresado exitosamente";   
   }
   else
   {
   $msg = "Tus datos son incorrectos"; 
   }
   
 // Enviamos nuestra respuesta a el DIV con ID "message" con xajax.
 
 $output->assign("message","innerHTML",$msg);
 
 // Y para finalizar debemos retornar nuestra salida XAJAX.
 
 return $output;
 }

Y entre el <head></head> de nuestro código HTML, agregamos:

Código :

<?php
$xajax->printJavascript("xajax/");
?>

Nuestro proyecto final (index.php)

Código :

<?php
/**
 * 1.- Incluimos nuestra libreria.
 * 2.- Instanciamos un nuevo objeto XAJAX.
 * 3.- Registramos nuestra función login().
 * 4.- Procesamos el registro.
 * 5.- Especificamos la ruta de nuestra libreria JS
 **/

include 'xajax/xajax_core/xajax.inc.php';

$xajax = new xajax();

$xajax->register(XAJAX_FUNCTION, 'login');

$xajax->processRequest();

$xajax->configure('javascript URI','xajax/');


/**
 *Xajax utiliza funciones y/o métodos PHP para crear las respuestas.
 *Creamos una función llamada login($post).
 *Xajax enviará los datos del formulario dentro de nuestro parámetro   
 *$post, claro pueden llamar el parámetro como ustedes quieran.
 **/

function login($post)
 {
 // Debemos crear una respuesta a XAJAX para nuestra función de la siguiente manera.
 
 $output = new xajaxResponse();
    
 // Recibimos los datos de nuestros inputs, de la misma forma que lo hariamos con un $_POST[].
 // Cabe destacar que estamos filtrando el contenido de los datos enviados por el usuario.
 // No queremos inyecciones de codigo verdad =).
 $user = htmlentities($post['user']);
 $pass = htmlentities($post['pass']);
 
 // Verificamos si los datos corresponden con nuestra "base de datos".
 $login = getLoginStatus($user,$pass); 
 
 // Creamos el mensaje de respuesta
 
 if($login)
   {
   $msg = "Haz ingresado exitosamente";   
   }
   else
   {
   $msg = "Tus datos son incorrectos"; 
   }
   
 // Enviamos nuestra respuesta a el DIV con ID "message" con xajax.
 
 $output->assign("message","innerHTML",$msg);
 
 // Y para finalizar debemos retornar nuestra salida XAJAX.
 
 return $output;
 }
 
 
function getLoginStatus($user,$pass)
 { 
 // No quiero entrar en detalles de conexion con bases de datos ya que ese no es el tema.
 // Para simplificar, vamos a utilizar 2 variables con 1 usuario y 1 contraseña solo 
 // para fines ilustrativos.
 // Para crear una conexion de base de datos se haría de la misma forma como siempre lo hemos hecho.
 // Si tienes dudas acerca de como crear una conexion de bases de datos en internet hay muchos tutoriales para ello.
 
 $testUser = "admin";
 $testPass = "0123456";
 
 // Si los datos ingresados en el formulario corresponden con nuestra "Base de datos" retornamos cierto.
 
 if($user == $testUser && $pass == $testPass)
   {
   return true;   
   } 
   else
   {
   return false;
   }
 }
?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de formulario con XAJAX</title>
<?php
$xajax->printJavascript("xajax/");
?>
<style>
.container {
width:300px;
color:#FFF;
font-size:12px;
font-family:Verdana, Geneva, Sans-serif;
}
.top {
padding:5px;
background-color:#066;
}
.content{
padding:5px;
background-color:#079;
}
.message{
padding:5px;
font-weight:bold;
background-color:#000;
}
</style>
</head>
<body>
<div class="container">
  <div class="top">
    Ejemplo de formulario con XAJAX
  </div>
  <div class="content">
    <form id="formId">
      <p>
        Usuario: <input type="text" name="user" />
      </p>
      <p>
        Contrase&ntilde;a: <input type="text" name="pass" />
      </p>
      <input type="button" value="Enviar" onclick="xajax_login(xajax.getFormValues('formId'))" />
    </form>
  </div>
  <div id="message"  class="message">
  &nbsp;
  </div>
</div>
</body>
</html>

Y para resolver el problema de compatibilidad de XAJAX 0.6 con versiones anteriores a PHP 5.3, habremos que modificar estas líneas, dentro de nuestra función login().

Código :

// Este condición resuelve los problemas de compatibilidad de XAJAX 0.6 Beta 1
 // Con versiones anteriores a PHP 5.3
 if(is_array($post))
   {
   // Recibimos los datos de la misma forma que lo hariamos con un $_POST[].
   // Cabe destacar que estamos filtrando el contenido de los datos enviados por el usuario.
   // No queremos inyecciones de codigo verdad =).
   $user = htmlentities($post['user']);
   $pass = htmlentities($post['pass']);
   }
   else 
   {
   // Para versiones anteriores de XAJAX funcionan con versiones anteriores de PHP 
   $post = json_decode(str_replace('\"','"',$post));
     
   $user = htmlentities($post->user);
   $pass = htmlentities($post->pass);
   }

Ejemplo en línea

Click para ver ejemplo
user: admin
pass: 0123456

Archivos del tutorial

PHP >= 5.3
PHP < 5.3

Espero este mi primer tutorial les sea de utilidad a aquellos que no se quieren meter mucho con JavaScript.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Como usar AJAX en PHP sin JavaScript (XAJAX)

¿En donde encuentro la librería de XAJAX?

Estructura de nuestro proyecto

Nuestra vista HTML

Nuestro estilo CSS

Nuestro PHP

Integración con XAJAX

¿Qué significa una función de xajax?

¿Esto a mi de qué me sirve?

Nuestro proyecto final (index.php)

Ejemplo en línea

Archivos del tutorial

Publica tu comentario

o puedes...