Tutoriales:Aprenda xajax en 10 Minutos
Tutoriales:Aprenda xajax en 10 Minutos
[edit] Usando xajax en un script PHP
xajax esta diseñado para ser extremadamente facil de implementar tanto en aplicaciones web existentes como en nuevos proyectos. Puede añadir el poder de xajax a casi cualquier script PHP en siete sencillos pasos:
- Incluya la clase xajax:
require_once("xajax.inc.php");
- Cree una instancia del objeto xajax:
$xajax = new xajax();
- Registre los nombres de las funciones PHP que usted quiere llamar atraves de
xajax:
$xajax->registerFunction("miFuncion");
- Escriba las funciones PHP que ha registrado y use el objeto xajaxResponse para que ellas retornen
comandos XML
function miFuncion($arg) { // realizar algo basado en $arg, como una consulta a una // base de datos, y volcar el valor a una variable como $nuevoContenido // Inicializar el objeto xajaxResponse $objRespuesta = new xajaxResponse(); // añadir un comando a la respuesta para asignar al atributo innerHTML // del elemento con id="IdDeAlgunElemento" qualquier cosa que sea $nuevoContenido $objRespuesta ->addAssign("IdDeAlgunElemento","innerHTML", $nuevoContenido); //devuelve la respuesta XML generada por el objeto xajaxResponse return $objRespuesta ; }
- Antes de que su script envíe cualquier salida, deje que xajax se encargue de cualquier
peticion
$xajax->processRequests();
- Entre sus etiquetas <head></head> dígale a xajax que genere el JavaScript necesario:
<?php // Incluya también el nombre del subdirectoria de Xajax como un argumento si tiene los ficheros Xajax, etc. en un subdirectorio $xajax->printJavascript(); ?>
- Llame a la funcion desde un evento JavaScript o una función de su aplicación (debes cambiar 'AlgunArgumento' por alguna variable real, una cadena, etc - se requiere algun argumento)
<div id="IdDeAlgunElemento"></div> <button onclick="xajax_miFuncion(AlgunArgumento);">
Eso es todo. Xajax se encargará de casi todo lo demás. Su mayor tarea es escribir las funciones PHP y las respuestas XML devueltas por ellas, lo cual se hace extremadamente fácil con la clase. xajaxResponse
[edit] ¿Cómo actualizo mi contenido asíncronamente?
Quizas , casi la unica caracteristica de Xajax sea la clase xajaxResponse. Otras librerias Ajax requieren que usted escriba su propia funcion de retorno en Javascript para procesar los datos devueltos por una petición asíncrona así como para actualizar el contenido. Por otro lado, Xajax permite controlar facilmente su contenido mediante PHP. La clase xajaxResponse permite crear instrucciones XML para devolver a su aplicación desde funciones PHP. El XML es analizado por el motor de mensajes de xajax y las instrucciones diran a xajax como actualizar el contenido y el estado de vuestra aplicacion. La clase xajaxResponse ofrece actualmente un gran numero de comandos útiles, tales como:
- Assign, que establece el atributo que se ha especificado de un elemento de vuestra página;
- Append, que permite añadir datos al final del atributo especificado de un elemento de vuestra página;
- Prepend, que permite de agregar datos al principio del atributo especificado de un elemento de vuestra pàgina;
- Replace, que busca y reemplaza datos en el atributo especificado de un elemento de vustra pàgina;
- Script, que ejecuta el codigo javascript especificado y
- Alert, que muestra un recuadro de alerta con el mensaje de texto especificado.
Una sola respuesta XML puede contener múltiples comandos, que seran ejecutados en el orden que han sido añadidos a la respuesta. Por ejemplo, si el usuario hace un clic en un boton de vuestra aplicacion. El evento 'onclick' llama al intérprete javascript acerca de una funcion PHP. Este intérprete envia una consulta asíncrona al servidor a traves de la funcion XMLhttpRequest donde xajax llama a la funcion PHP. La funcion PHP hace una busqueda en la base de datos , alguna manipulación de datos, o una serialización. Usted utiliza la clase xajaxResponse para generar una respuesta XML xajax que contiene múltiples comandos que seran devueltos al motor de mensajes xajax para ser ejecutados.
$objRespuesta = new xajaxResponse(); $objRespuesta->addAssign("miInput1","value",$DatosDeBasedeDatos); $objRespuesta->addAssign("miInput1","style.color","red"); $objRespuesta->addAppend("miDiv1","innerHTML",$DatosDeBasedeDatos2); $objRespuesta->addPrepend("miDiv2","innerHTML",$DatosDeBasedeDatos3); $objRespuesta->addReplace("miDiv3","innerHTML","xajax","<strong>xajax</strong>"); $objRespuesta->addScript("var x = prompt(\"Introduce tu nombre\");"); return $objRespuesta;
El motor de mensajes xajax analizará el mensaje XML y ejecutara lo que sigue:
- El valor del elemento que posee el id miInput1 va a ser asignado a los datos de $DatosDeBasedeDatos.
- El color del texto del elemento con el id miInput1 se cambiará a rojo
- Los datos en $DatosDeBasedeDatos2 van ha ser agregados al final del atributo innerHtml del elemento con el id miDiv1
- Los datos en $DatosDeBasedeDatos3 van ha ser agregadas al principio del atributo innerHtml del elemento con el id miDiv2
- Todas las coicidencias de "xajax" en el atributo innerHtml del elemento con el id miDiv3 van ha ser remplazados por "xajax"; poniendo todas las coicidencias de la palabra "xajax" en negritas
- Se va a mostrar un cuadro de dialogo pidiendo al usuario su nombre y el valor será guardado en una variable javascript llamada x.
Todo esto está implementado del lado del servidor en la funcion PHP a través de la creacion y el envio de una respuesta XML de xajax.
[edit] Pero espere, ¡aún hay más!
Continúe con Procesando Formularios con xajax (en inglés)