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ña: <input type="text" name="pass" /> </p> <input type="button" value="Enviar" /> </form> </div> <div id="message" class="message"> </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ñ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">
</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.
Por Gzaloprgm el 17 de Diciembre de 2010
Un saludo,
Gonzalo
Por neohunter el 17 de Diciembre de 2010
Por Arnulfo el 17 de Diciembre de 2010
onclick="xajax_login(xajax.getFormValues('formId'))"
no es javascript ?
Excelente artículo.
Saludos.
En verdad que dado el ejemplo si es cierto que en el onclick, hay un objeto JavaScript que se ejecuta al hacer click en el boton, por lo que quiza el titulo sea incorrecto, y quiza si el termino correcto sea sin saber java script, o casi sin javascript ya que nunca declaramos ninguna funcion en javascript, pero si se ejecuta como java script.
En fin,
Sobre poner el action en el form, o poner un onsubmit, provocaría que el formularío de cierta forma se ejecute y reinice la página, lo cual es lo que no queremos.
Con xajax, no existe la necesidad de utilziar un action ya que el objeto xajax.getFormValues automaticamente envía los datos de un formulario dentro del parametro de la función que hemos creado para recibír los datos. (login)
Saludos
jOina :
Por Ben el 12 de Enero de 2011
Por Martin Gerlero el 13 de Enero de 2011
Saludos!.. Felicitaciones por el tuto!
Por Ben el 13 de Enero de 2011
Saludos
O emularlo.
Por Andres el 26 de Febrero de 2011
Saludos
Por Fcog el 15 de Marzo de 2011
Por JALF el 21 de Abril de 2011
Por David el 03 de Julio de 2011
y no se usa $_POST, sospecho de que está mal. Sería bueno revisar el código porque de funcionar es un buen ejemplo.
Por David el 03 de Julio de 2011
Por David el 06 de Julio de 2011
Por victoria el 14 de Julio de 2011
Por Eduardo el 07 de Septiembre de 2011
Por mario colocho el 25 de Septiembre de 2011
pero a mi parecer no funciona pues xajax no funciona con el atributo name sino con id y los text no lo tienen.
Debe revisarlo.
Por wesoft el 05 de Octubre de 2011