AJAX es el acrónimo de Asynchronous Javascript And XML o Javascript y XML asíncronos dicho en nuestro idioma. Se trata de una combinación de tecnologías que se ha popularizado muchísimo desde hace unos años con la irrupción de la Web 2.0 y lo podemos encontrar en infinidad de páginas y servicios web como Gmail, Google Maps, Hotmail, Flickr y un largo etcétera.
La clave de AJAX está en que es asíncrono, es decir, permite que la página del cliente realice peticiones al servidor sin recargar la página. Sólo se actualizan las partes de la página que nos interesan pero sin tener que recargar la página entera, lo que proporciona una sensación de navegación mucho más fluida.
Para introducirnos en el mundo de AJAX vamos a utilizar una librería llamada XAJAX que nos permite aprovechar las capacidades de AJAX en nuestras páginas PHP. Podéis descargar esta librería en la página del proyecto http://xajaxproject.org/
A continuación, unos de códigos de ejemplo que se presentarán en diferentes capítulos para que sean más fáciles de leer.
Versión PDF del curso completo
Archivos PHP de ejemplo
Ejemplo 1. Introducción a la librería.
Comencemos con un simple ‘Hola mundo’ para ir calentando. En esta ocasión lo ponemos todo en el mismo archivo PHP llamado ‘holaAjax.php’.
‘holaAjax.php’
<?php
require (‘xajax/xajax.inc.php’);
$xajax = new xajax();
function cambia_texto($mensaje){
$respuesta = new xajaxResponse();
$respuesta->addAssign("mensaje","innerHTML",$mensaje);
return $respuesta;
}
$xajax->registerFunction("cambia_texto");
$xajax->processRequests();
?>
<html>
<head>
<?php
$xajax->printJavascript("xajax/");
?>
</head>
<body>
<input type="button" onclick="xajax_cambia_texto(‘Hola Ajax);" value="Pulsa" />
<div id="mensaje"></div>
</body>
</html>
Explicación:
Lo primero que debemos hacer es importar la librería de xajax y crear una instancia de xajax:
require (‘xajax/xajax.inc.php’);
xajax = new xajax();
A continuación definimos las funciones que se van a utilizar. En esta ocasión sólo tenemos la función ‘cambia_texto’. Dentro de esta función, creamos una instancia de respuesta y en esa respuesta asignamos un valor a una capa llamada ‘mensaje’ que se encuentra en el body de la página mediante el método addAssign().
Una vez definidas las funciones, las registramos en xajax y le indicamos a xajax que gestione las peticiones:
$xajax->registerFunction("cambia_texto");
$xajax->processRequests();
Es importante poner dentro de las etiquetas head de la página la instrucción que genera el código Javascript necesario para ejecutar nuestras funciones.
$xajax->printJavascript("xajax/");
Una vez hecho esto podemos asignar estas funciones a los elementos de nuestra página, normalmente a los componentes de formulario pero añadiendo el prefijo ‘xajax_’ antes del nombre de nuestra función.
Este ejemplo no hace nada especial que no podamos hacer con Javascript, así que pasaremos a algo más complejo incluyendo llamadas a una base de datos.
Descargar archivo PHP.
