Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

com

Trabajo con Ajax en PHP utilizando Xajax

Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Miguel Angel Alvarez Sara Alvarez Gema Maria Molina Prados
Director de DesarrolloWeb.com http://www.desarrolloweb.com (20 capítulos) Equipo DesarrolloWeb.com http://www.desarrolloweb.com (3 capítulos) Equipo DesarrolloWeb.com http://www.desarrolloweb.com/ (1 capítulo)

Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb.com/manuales/xajax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

1

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Introducción a Xajax
Xajax es un sistema mediante el cual podemos programar aplicaciones web con PHP que hacen uso de Ajax para procesar solicitudes al servidor sin necesidad de recargar la página. Posiblemente todos los lectores ya conozcan lo que es Ajax, una tecnología que mezcla Javascript y XML para crear peticiones asíncronas al servidor. En un artículo de DesarrolloWeb.com explicamos con más detalle lo que es Ajax. Para trabajar con Ajax tenemos que saber programar con Javascript y utilizar una serie de métodos complejos que dificultan bastante el desarrollo de las páginas web. Pero por suerte, existen sistemas como Xajax que nos permiten abstraernos de las complicaciones del desarrollo de páginas web que hacen uso de Ajax. En este caso, Xajax mezcla PHP con Javascript, para el desarrollo de aplicaciones PHP avanzadas, casi sin conocimientos Javascript y sin necesidad de aprender a gestionar solicitudes al servidor por Ajax. En DesarrolloWeb.com podemos aprender todo lo necesario sobre Javascript en la sección Javascript a fondo. Como digo, casi no hacen falta conocimientos Javascript para operar con Xajax, pero necesitaremos unas nociones básicas. Por otra parte, tenemos una sección dedicada por completo a Ajax, que también nos puede servir para trabajar con Ajax sin utilizar ningún framework. En DesarrolloWeb.com ya hemos publicado en diversos artículos qué es Xajax y como trabajar con el framework y PHP, en los que hemos visto una serie de ejemplos prácticos que nos pueden ayudar. Está todo en el manual Trabajo con Ajax y PHP utilizando Xajax. Pero se hacía importante esta introducción previa para dar una serie de notas y referencias que ayudasen a los lectores a seguir los ejemplos presentados en este manual. Básicamente se trata de comentar que Xajax es un proyecto Open Source, por tanto gratuito y libre de uso. Pero es un proyecto relativamente nuevo, por lo que todavía están desarrollando, mejorando y presentando nuevas versiones. La página de inicio de este proyecto es http://xajaxproject.org/ En el momento de escribir este texto, en la página de descargas de Xajax tienen tres versiones disponibles: xajax 0.5 beta 3 xajax 0.5 beta 4 Actualizado: Ya se encuentra disponible Xajax 0.5 Release Candidate 1 xajax 0.2.5 (Estable) Las dos primeras versiones son versiones Beta, como se puede ver en el nombre de las releases, la tercera versión, aunque es menos nueva, es la única que tienen publicada como estable, es decir, la única que podemos utilizar en nuestras aplicaciones en producción con la confianza que está libre de errores. Por eso, nosotros en los artículos que venimos publicando en DesarrolloWeb.com, a menos que se especifique lo contrario, estamos utilizando la versión xajax 0.2.5. Dejo aquí un link para descarga de la versión de Xajax 0.2.5. Esta versión la podríamos
Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb.com/manuales/xajax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 2

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

descargar desde la propia página de Xajax, pero pongo este link por si acaso eliminan los archivos de esta versión y los queréis descargar para realizar los ejemplos de este manual en vuestros sistemas. Actualizado: Hemos publicado un artículo sobre cómo actualizar tus scripts PHP de Xajax 0.2 a Xajax 0.5 Si queremos utilizar las versiones más modernas de Xajax no hay problemas, pero tengo que decir que algunas cosas que hemos explicado en este manual han cambiado con respecto a las versiones más modernas, como el método $xajax->processRequests(), que en versiones más modernas se llama $xajax->processRequest() y el método $objResponse->addassign() que en las versiones nuevas se llama $objResponse->assign(). Esto es todo. Simplemente decir que Xajax es una delicia, por su facilidad, por su potencia, versatilidad, etc. Los desarrolladores de PHP podrán comprobarlo en pocos minutos y hacer ejemplos o programas con Ajax, fácilmente y casi sin más conocimientos que los que ya tienen. Sólo queda recomendar seguir la lectura de este manual para empezar a dar los primeros pasos con nuestra ayuda. Artículo por Miguel Angel Alvarez

Xajax: Ajax para PHP
Ajax es una tecnología que utiliza a su vez otra combinación de tecnologías, como XML y Javascript, para realizar peticiones de contenido o computación de servidor sin tener que recargar la página en la que está el usuario. Es una tecnología que permite una nueva gama de aplicaciones interactivas en la web, mucho más ricas y rápidas, dado que no precisamos recargar todo el contenido de una página para realizar peticiones al servidor.
Referencia: Puedes ver qué es ajax en este artículo: Qué es AJAX Tenemos otros artículos que explican Ajax, puedes buscarlos con nuestro directorio, en la categoría Ajax.

Si hemos intentado alguna vez trabajar con Ajax para programar una página web, habremos comprobado que la tarea se complica bastante, teniendo que realizar diferentes trozos de código en distintos lenguajes de programación y en distintos archivos. Todo esto puede provocar dolores de cabeza o páginas con códigos difíciles de entender y de mantener. Esta cuestión sin dudas es uno de los problemas que trae Ajax a los programadores, sobretodo a los que intentan dar sus primeros pasos. Pero herramientas como xajax pueden ayudarnos bastante. En este artículo vamos a conocer xajax, una clase realizada con PHP que nos permite utilizar Ajax, combinado con PHP, para la creación de aplicaciones interactivas, de una manera muy simplificada. Con xajax podemos fácilmente ejecutar funciones PHP, que se ejecutan en el servidor, cuando el usuario realiza acciones en la página. Luego, los resultados de esas funciones PHP se producen en la misma página, sin que se tenga que recargarse. Xajax es un producto Open Source gratuito y compatible con los navegadores más comunes, como Firefox, u otros navegadores basados en Mozilla, Internet Explorer, Opera, etc. Podemos encontrarlo en http://xajaxproject.org

Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb.com/manuales/xajax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

3

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Hacer unas primeras pruebas para comenzar a conocer la herramienta nos llevará pocos minutos. Lo veremos a continuación. Descargar e instalar xajax Para probar xajax debemos descargar la última versión de la clase, que podemos descargar directamente desde su página web: http://xajaxproject.org Obtendremos un archivo comprimido que debemos descomprimir en cualquier lugar de nuestro espacio de publicación. Por ejemplo, podemos crear un directorio llamado xajax donde podemos colocar todos los archivos del .zip descargado. No hay que hacer especiales acciones para instalar xajax, simplemente descomprimirlo en cualquier servidor Apache o IIS que tenga compatibilidad con PHP 4.3.x o PHP 5.x, o superiores. Una vez descargado podemos probar los ejemplos que vienen en el directorio examples, siempre a través de nuestro servidor web compatible con PHP, ya sea en local o en un servidor web remoto. Atención al directorio donde finalmente metemos los archivos de xajax, pues luego tendremos que incluir archivos que hay en dicho directorio, para lo cual deberemos recordar la ruta relativa desde la página donde estemos al directorio donde está xajax. Página simple con xajax y PHP Veamos ahora como realizar una página que utilice xajax, para ejecutar una sencilla función PHP como respuesta a una acción del usuario. El ejemplo es relativamente sencillo, incluso lo podemos hacer en pocos pasos, como una receta. Luego se podrá complicar todo lo necesario para realizar acciones más complejas. 1) Incluir con PHP el archivo donde está la clase xajax
//incluímos la clase ajax require ('xajax/xajax.inc.php');

2) Creamos una instancia de un objeto de la clase xajax
//instanciamos el objeto de la clase xajax $xajax = new xajax();

3) Escribimos una función en PHP, que luego llamaremos con por medio de ajax Esta función es todo lo complicado que se requiera. Realizará acciones del lado del servidor y por tanto puede acceder a bases de datos, abrir ficheros o cualquier cosa que se nos ocurra. Luego en la propia función realizaremos una instancia de un objeto AjaxResponse, que utilizaremos para mostrar resultados en la página.
function si_no($entrada){ if ($entrada=="true"){ $salida = "Marcado"; }else{ $salida = "No marcado";

Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb.com/manuales/xajax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

4

desarrolloweb. como respuesta a las acciones del usuario con javascript."innerHTML". Insistimos. 7) Podemos hacer llamadas a las funciones PHP en cualquier lugar del código. esta llamada al método se tiene que hacer antes de escribir ningún contenido dentro del código de la página. Dispone de varios métodos o funciones. es decir. //escribimos en la capa con id="respuesta" el texto que aparece en $salida $respuesta->addAssign("respuesta". En este caso se asigna el valor contenido en la variable $salida al innerHTML de la capa "respuesta". Esta asociación permitirá ejecutar la función PHP desde una llamada a una función Javascript.Tu mejor ayuda para aprender a hacer webs www. al pulsar el chechbox se desencadena el evento onchange y con él se llama a la función xajax_si_no() enviándo como parámetro el estado (chequeado o no) de la casilla de verificación.com tienen el copyright de sus autores. Es decir.desarrolloweb. 6) Escribir el código javascript necesario para procesar las llamadas a ajax. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(). con lo que se altera el texto contenido en esa capa. Podemos verlo en ejecución en una página aparte. tenemos que ejecutar un método del objeto xajax para procesar las peticiones del que puedan llegar a la página. desde un elemento de la página. como en este caso una casilla de verificación. No reproducir sin autorización.si. antes que llegue al cliente ningún carácter de código HTML. 5 .checked)"> Como podemos ver. Si nos fijamos.html © Los manuales de DesarrolloWeb. } El objeto xajaxResponse() sirve para realizar acciones en la página sin tener que recargar el documento.$salida). Trabajo con Ajax en PHP utilizando Xajax: http://www. como por ejemplo addAssign() que sirve para asignar un valor a una propiedad de un elemento de la página. el método recibe un parámetro.formulario.com } //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse(). //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/"). Lo ideal es hacer esta llamada al método printJavascript() dentro del <head> de la página. al cambiar su estado. Con esto es todo tenemos todo lo necesario para entender el ejemplo.com/manuales/xajax. se llama a una función javascript para ejecutar la función PHP escrita anteriormente. que es la ruta relativa para acceder al directorio donde están los archivos xajax descomprimidos. //tenemos que devolver la instanciación del objeto xajaxResponse return $respuesta. 5) Antes de enviar cualquier contenido a la página. <input type="checkbox" name="si" value="1" onclick="xajax_si_no(document. 4) Asociamos la función PHP al objeto xajax //asociamos la función creada anteriormente al objeto xajax $xajax->registerFunction("si_no").

?> </head> <body> <div id="respuesta"></div> <form name="formulario"> <input type="checkbox" name="si" value="1" onclick="xajax_si_no(document. 6 . Por favor.desarrolloweb. function si_no($entrada){ if ($entrada=="true"){ $salida = "Marcado". //Llamando inicialmente a la función xajax_si_no inicializamos el valor de la capa con la respuesta </script> </body> </html> Nota: Para ampliar la información de Xajax explorar el manual de Ajax para PHP. //instanciamos el objeto de la clase xajax $xajax = new xajax(). }else{ $salida = "No marcado". //escribimos en la capa con id="respuesta" el texto que aparece en $salida $respuesta->addAssign("respuesta".formulario. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(). } //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse().5 de Xajax.0 Transitional//EN" "http://www.php'). } //asociamos la función creada anteriormente al objeto xajax $xajax->registerFunction("si_no"). //tenemos que devolver la instanciación del objeto xajaxResponse return $respuesta.html © Los manuales de DesarrolloWeb.si."innerHTML".com tienen el copyright de sus autores. <? //incluímos la clase ajax require ('xajax/xajax. ?> <html> <head> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.si.2.Tu mejor ayuda para aprender a hacer webs www.com Podemos ver el código del ejemplo completo a continuación.w3.formulario. porque tiene algunos detalles sobre la versión y el trabajo con Xajax que conviene Trabajo con Ajax en PHP utilizando Xajax: http://www.charset=ISO-8859-1"> <title>Si / No en Ajax</title> <? //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/"). que en este caso debe estar en un subdirectorio que cuelgue del directorio donde está el archivo del ejemplo.checked).inc. leer la introducción al manual de Xajax.com/manuales/xajax.org/TR/xhtml1/DTD/xhtml1transitional.checked)"> </form> <script type="text/javascript"> xajax_si_no(document. No reproducir sin autorización. pero tener en cuenta que para que funcione tiene que disponer del código de la clase xajax. Nota: En estos ejemplos hemos utilizado la versión 0.$salida).dtd"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html.desarrolloweb.

5 para que podáis poner en marcha vosotros mismos estos ejemplos en vuestros servidores. así que lo invocamos: xajax. Ahora con xajax vamos a disponer de un método Javascript llamado xajax.desarrolloweb. Para ello. Esta función nos sirve generar los datos del formulario que debemos enviar para su procesamiento.getFormValues(ID_FORMULARIO). ayudándonos de la clase xajax.getFormValues('formulario') Los datos del formulario los tenemos que pasar a la función que se encarga de procesarlos. el botón tiene un comando para el evento onclick. Ahora lo que tenemos que hacer es llamar a una función PHP para que procese un formulario.com/manuales/xajax. que se encargará lanzar el proceso para enviar y procesar los datos. Aprendimos en el artículo pasado a llamar a funciones PHP desde Javascript. Veremos esa función a continuación. Enviar los datos del formulario a PHP con xajax Podemos ver aquí el código del formulario: <div id="mensaje"> <form id="formulario"> Nombre: <input type="text" name="nombre"> <br> Apellidos: <input type="text" name="apellidos"> <br> <input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax. tenemos un par de campos de texto y un botón. así como el enlace para la descarga de la librería Xajax 0.com saber.5. enviar al servidor los datos adjuntados por el usuario en el formulario. No reproducir sin autorización. procesarlos con PHP y luego devolver una salida al usuario dependiendo de los datos introducidos. La llamada la seguiremos haciendo mediante Javascript cuando el usuario pulse el botón de enviar. Trabajo con Ajax en PHP utilizando Xajax: http://www. 7 .5 de xajax: Actualizar a Xajax 0.desarrolloweb. que facilita bastante la programación. Referencia: Hemos publicado un artículo sobre cómo actualizar este y otros scripts de este manual a la versión 0. que es una función que hemos escrito con PHP y luego hemos registrado en el objeto xajax.getFormValues('formulario'))"> </form> </div> Como vemos.html © Los manuales de DesarrolloWeb. Artículo por Miguel Angel Alvarez Enviar y procesar formulario con Ajax y PHP Estamos viendo algunos ejemplos de Ajax utilizado junto con PHP para crear aplicaciones web avanzadas. Ahora vamos a ver cómo procesar un formulario en una página web sin que se tenga que recargar la página. En este caso vamos a explicar las particularidades del envío de formularios con Ajax. es decir.Tu mejor ayuda para aprender a hacer webs www. Por ello vamos a dar por entendidos esos puntos. La particularidad de este caso de envío y procesamiento de formularios con Ajax es la manera de enviar y recoger los datos del formulario.com tienen el copyright de sus autores.2. que recibe el identificador del formulario que se desean obtener los datos. Todo sin cambiar la página en la que estaba el usuario. En nuestro caso el formulario tiene el id="formulario". Vimos en un artículo pasado como realizar la página más básica para usar Ajax con PHP de una manera sencilla utilizando xajax. que trataremos de explicar.

$form_entrada["apellidos"]. //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse(). //tenemos que devolver la instanciación del objeto xajaxResponse return $respuesta. $form_entrada["apellidos"]. Para ello crea un objeto de la clase xajaxResponse y con el método addAssign("mensaje"."innerHTML". cuando programemos la función en PHP.2.inc. Como hemos visto antes.$salida). Pero si quieres saber cómo pasarlo a la versión más moderna. No hay que olvidarse de registrar la función en el objeto xajax //registramos la función creada anteriormente al objeto xajax $xajax->registerFunction("procesar_formulario"). el método de trabajo será similar al que utilizaríamos con $_POST y $_GET. //escribimos en la capa con id="respuesta" el texto que aparece en $salida $respuesta->addAssign("mensaje". 8 . por tanto. Hemos procesado esto:<p>". //instanciamos el objeto de la clase xajax $xajax = new xajax(). No reproducir sin autorización. $salida . $salida .$salida) consigue que en la capa con id="mensaje" se muestre la salida del procesamiento del formulario. function procesar_formulario($form_entrada){ $salida = "Gracias por enviarnos tus datos.5. //tenemos que devolver la instanciación del objeto xajaxResponse return $respuesta. El código completo de este ejemplo es el siguiente: Actualizado: Este código está con Xajax 0. //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse(). <? //incluímos la clase ajax require ('xajax/xajax."innerHTML".php'). Pero todas estas generalidades y códigos adicionales necesarios para utilizar xajax los hemos visto en el artículo anterior: Xajax: Ajax para PHP.Tu mejor ayuda para aprender a hacer webs www. pero ahora lo vamos a tener que hacer de una manera distinta.html © Los manuales de DesarrolloWeb.5. } La función que procesa el formulario se llama procesar_formulario() y recibe un parámetro que es el array asociativo con los datos del formulario. Pues ese mismo parámetro es el que tenemos que utilizar para recibir los datos del formulario. Trabajo con Ajax en PHP utilizando Xajax: http://www.= "<br>Apellidos: " .desarrolloweb.desarrolloweb.= "Nombre: " .= "<br>Apellidos: " .com tienen el copyright de sus autores. function procesar_formulario($form_entrada){ $salida = "Gracias por enviarnos tus datos. $form_entrada["nombre"]. que también son arrays asociativos. tienes que entrar en: Actualiza tu framework a Xajax 0. $form_entrada["nombre"].com Recibir los datos del formulario enviado con xajax Desde PHP estaríamos acostumbrados a recoger los datos de un formulario con $_POST o $_GET. //escribimos en la capa con id="respuesta" el texto que aparece en $salida $respuesta->addAssign("mensaje".com/manuales/xajax. Esa función compone una salida y luego la devuelve con Ajax. $salida .= "Nombre: " . $salida .$salida). a la función que procesa los el formulario se le envía un parámetro con los datos. Los datos del formulario nos llegan como un array asociativo. Hemos procesado esto:<p>"."innerHTML".

podríamos insertar la información recibida por el formulario en una base de datos. Si quisiéramos. que quería insertar en una base de datos la información recibida de un formulario con Ajax.com tienen el copyright de sus autores. pues no varía nada que estemos realiando las acciones a través de Ajax. puede ser de utilidad explicarlo.com } //registramos la función creada anteriormente al objeto xajax $xajax->registerFunction("procesar_formulario"). por lo que será necesario leer el artículo anterior para entender bien las generalidades del envío de formularios con Ajax. 9 . La duda surgió a partir del artículo Enviar y procesar formulario con Ajax y PHP. Si necesitásemos insertar estos datos en una base de datos no variaría mucho el ejemplo. Esto sólo implicaría un pequeño cambio en la función procesar_formulario() (ver artículo Trabajo con Ajax en PHP utilizando Xajax: http://www. ?> <html> <head> <title>Enviar y procesar un formulario con Ajax y PHP</title> <? //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/").com/manuales/xajax. Pero bueno. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequest().Tu mejor ayuda para aprender a hacer webs www. Artículo por Miguel Angel Alvarez Recibir formulario con Ajax e insertar información en base de datos En este artículo vamos a resolver la duda de un usuario.desarrolloweb. lo hemos contado en el artículo: Recibir formulario con Ajax e insertar información en base de datos.html © Los manuales de DesarrolloWeb.desarrolloweb. Nota: En esta serie de artículos estamos utilizando la librería xajax.getFormValues('formulario'))"> </form> </div> </body> </html> Podemos verlo en funcionamiento en una página aparte. No obstante. En realidad es un tema que no revierte ninguna complicación. ?> </head> <body> <h1>Recibir y procesar formulario con Ajax y PHP</h1> <div id="mensaje"> <form id="formulario"> Nombre: <input type="text" name="nombre"> <br> Apellidos: <input type="text" name="apellidos"> <br> <input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax. si ya conocemos el modo de trabajo de PHP con bases de datos. Las generalidades del uso de xajax las comentamos en el artículo xajax: Ajax y PHP. que sirve para trabajar con Ajax en PHP de una manera muy simplificada. No reproducir sin autorización.

"root".com anterior). $form_entrada["nombre"] . En un supuesto que nuestra página realice accesos a base de datos en diversos lugares del código. para que realice el insert. de enviar datos de un formulario por Ajax e insertar el contenido en una base de datos MySQL. Trabajo con Ajax en PHP utilizando Xajax: http://www. function procesar_formulario($form_entrada){ $ssql = "insert into pais (nombre_pais) values ('" . Este es el error: " . //instanciamos el objeto de la clase xajax $xajax = new xajax().com/manuales/xajax."innerHTML". //escribimos en la capa con id="respuesta" el texto que aparece en $salida $respuesta->addAssign("mensaje". $connectid = mysql_connect("localhost". Este es el error: " . if (mysql_query($ssql)){ $salida = "Insertado correctamente". En este pequeño código de la función procesar_formulario() se muestra como podría ser el proceso de inserción de la información en una base de datos MySQL: function procesar_formulario($form_entrada){ $connectid = mysql_connect("localhost".html © Los manuales de DesarrolloWeb. Esta conexión podríamos hacerla dentro de la misma función o fuera.$salida). así podríamos utilizar esa misma conexión en otros lugares del código PHP de la página. ""). mysql_error(). if (mysql_query($ssql)){ $salida = "Insertado correctamente". En este caso hemos hecho una variación en el código para que la conexión a la base de datos se realice como variable global a la página y no local a la función. mysql_select_db("nombre_base_datos". ""). mysql_select_db("guiarte_backup"."innerHTML". 10 . //tenemos que devolver la instanciación del objeto xajaxResponse return $respuesta. nos convendría realizar una conexión a la base de datos de manera global. //escribimos en la capa con id="respuesta" el texto que aparece en $salida $respuesta->addAssign("mensaje".inc. "')". que podamos utilizar desde cualquier parte del código. Tendríamos también que realizar una conexión con la base de datos donde queremos hacer el insert.$salida).$connectid).$connectid).Tu mejor ayuda para aprender a hacer webs www. tendría que generar una sentencia SQL con el insert y ejecutarla. No reproducir sin autorización. } Pero la sentencia de conexión con la base de datos podría estar en otro lugar del código de la página.desarrolloweb. A continuación se muestra el ejemplo completo. <? //incluímos la clase ajax require ('xajax/xajax. $form_entrada["nombre"] . } //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse(). }else{ $salida = "No se ha insertado. } //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse(). En lugar de mostrar los datos por pantalla como hace en el ejemplo anterior. "root".com tienen el copyright de sus autores. }else{ $salida = "No se ha insertado.desarrolloweb.php'). "')". mysql_error(). $ssql = "insert into pais (nombre_pais) values ('" .

com tienen el copyright de sus autores. Sólo le hemos añadido un campo más. Veamos antes. creando un formulario que tiene distintas validaciones en el servidor. <div id="mensaje"> Rellena los datos de este formulario y pulsa "Enviar" </div> <br /> Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb.com/manuales/xajax.desarrolloweb. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(). el resultado buscado en este ejemplo. Ahora vamos a complicar ese ejemplo. Además. de tipo checkbox. ?> </head> <body> <h1>Recibir y procesar formulario con Ajax y PHP</h1> <div id="mensaje"> <form id="formulario"> Nombre de país: <input type="text" name="nombre"> <br> <input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax. El formulario y la zona de mensajes El formulario que hemos utilizado es muy parecido al anterior. si se desea. devolviendo los resultados sin que se tenga que recargar la página.getFormValues('formulario'))"> </form> </div> </body> </html> Artículo por Miguel Angel Alvarez Procesar formulario con Ajax y PHP con validación Estuvimos haciendo en un artículo anterior una página que envía un formulario con PHP y Ajax y lo procesa. ?> <html> <head> <title>Enviar y procesar un formulario con Ajax y PHP</title> <? //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/").html © Los manuales de DesarrolloWeb.Tu mejor ayuda para aprender a hacer webs www.com } //registramos la función creada anteriormente al objeto xajax $xajax->registerFunction("procesar_formulario"). para realizar una validación un poco más compleja. //tenemos que devolver la instanciación del objeto xajaxResponse return $respuesta. El formulario no se procesa hasta que no se valide correctamente la información y se muestran los posibles errores dentro de la propia página. hemos incorporado una capa más para mostrar mensajes. Hay un artículo publicado anteriormente que habría que leer para poder entender este nuevo ejemplo: Recibir y procesar formulario con Ajax y PHP. 11 . No reproducir sin autorización.

//validación $error_form = "". procesará el formulario.. Muchas gracias! </span>")."<span style='color:blue. Si se produjeron errores en la validación actualizará la capa "mensaje" para mostrar el error.com tienen el copyright de sus autores. muestro el error $respuesta->addAssign("mensaje".html © Los manuales de DesarrolloWeb. por lo que se podrá entender. elseif ($form_entrada["apellidos"] == "") $error_form = "Debes escribir tus apellidos". que sólo actualizaremos si finalmente se realiza el procesamiento de sus datos. $form_entrada["apellidos"].$salida).'>$error_form</span>"). $form_entrada["nombre"].getFormValues('formulario'))" /> </form> </div> La capa de mensajes nos servirá para mostrar textos.= "<br>Apellidos: " .desarrolloweb. if ($form_entrada["nombre"] == "") $error_form = "Debes escribir tu nombre". Si todo es correcto. //escribimos en la capa con id="capaformulario" el texto que aparece en $salida $respuesta->addAssign("capaformulario".desarrolloweb. como errores de validación. elseif (!isset($form_entrada["acepto"])) $error_form = "Debes aceptar los términos y condiciones".Tu mejor ayuda para aprender a hacer webs www. 12 . cuando se produzcan. $salida . //tenemos que devolver la instanciación del objeto xajaxResponse } return $respuesta."innerHTML"."innerHTML".com/manuales/xajax. //compruebo resultado de la validación if ($error_form != ""){ //Hubo un error en el formulario //en la capa donde se muestran mensajes. //mostramos en capa mensaje el texto que está todo correcto $respuesta->addAssign("mensaje". } La función está comentada. $salida . }else{ //es que no hubo error en el formulario $salida = "Hemos procesado esto:<p>". Luego está el tema de las validaciones y la comprobación para saber si hubo un error o no en Trabajo con Ajax en PHP utilizando Xajax: http://www.com <div id="capaformulario"> <form id="formulario"> Nombre: <input type="text" name="nombre" /> <br /> Apellidos: <input type="text" name="apellidos" /> <br /> <input type="checkbox" name="acepto" value="1" /> Acepto los términos y condiciones .) <br /> <input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax."innerHTML". mostrará un mensaje de confirmación en la capa "mensaje" y el resultado de procesar el formulario en la capa "capaformulario".'>Todo correcto.= "Nombre: " . Lo importante es fijarse en cómo se instancia el objeto de la clase xajaxResponse y cómo se invocan los distintos métodos para actualizar el contenido de las capas "mensaje" y "capaformulario". Ahora veamos la función PHP que realizará la validación.. El formulario está en una capa independiente. No reproducir sin autorización. Es una función un poco larga: function procesar_formulario($form_entrada){ //creo el xajaxResponse para generar una salida $respuesta = new xajaxResponse('ISO-8859-1')."<span style='color:red.

php'). pero tema de las validaciones cada persona lo tendrá que implementar según sus necesidades. $xajax->decodeUTF8InputOn() Luego.desarrolloweb. que nos resolverán más de un dolor de cabeza. y nosotros hemos implementado una de ellas en este ejemplo. podemos decirle con qué juego de caracteres queremos trabajar. o en otros anteriores de Ajax. 13 .inc. Este podría servir de esquema general. Primero. $respuesta = new xajaxResponse('ISO-8859-1'). convertidos en algún carácter raro.desarrolloweb. podemos decirle que cualquier cadena que nos envíen por POST o GET se convierta automáticamente al juego de caracteres que estamos usando. si no podría dar problemas. elseif ($form_entrada["apellidos"] == "") $error_form = "Debes escribir tus apellidos". Ya habíamos visto anteriormente el código de esta función. //validación $error_form = "".com/manuales/xajax. cuando se crea la instancia del objeto xajax. //compruebo resultado de la validación if ($error_form != ""){ //Hubo un error en el formulario Trabajo con Ajax en PHP utilizando Xajax: http://www. //instanciamos el objeto de la clase xajax $xajax = new xajax(). function procesar_formulario($form_entrada){ //creo el xajaxResponse para generar una salida $respuesta = new xajaxResponse('ISO-8859-1'). elseif (!isset($form_entrada["acepto"])) $error_form = "Debes aceptar los términos y condiciones". Posiblemente hayamos podido comprobar en este ejemplo. también tenemos que indicar en qué juego de caracteres estamos trabajando.com los datos.html © Los manuales de DesarrolloWeb. Así quedaría el código completo de este ejemplo: <? //incluímos la clase ajax require ('xajax/xajax. $xajax->setCharEncoding('ISO-8859-1'). $xajax->setCharEncoding('ISO-8859-1'). $xajax->decodeUTF8InputOn(). Solución para los acentos en xajax También vamos a ver un par de detalles acerca de los acentos en Ajax. No reproducir sin autorización. cuando hacemos las instancias del objeto de la clase xajaxResponse para generar la salida. que los acentos muchas veces se ven mal. //instanciamos el objeto de la clase xajax $xajax = new xajax().Tu mejor ayuda para aprender a hacer webs www. if ($form_entrada["nombre"] == "") $error_form = "Debes escribir tu nombre".com tienen el copyright de sus autores. Esto se hace en la función PHP que procesa los datos y genera la salida. Y además. Esto lo podemos solucionar de varias maneras con xajax.

$salida).Tu mejor ayuda para aprender a hacer webs www. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(). } //registramos la función creada anteriormente al objeto xajax $xajax->registerFunction("procesar_formulario").com tienen el copyright de sus autores. ?> <html> <head> <title>Enviar y procesar un formulario con Ajax y PHP</title> <? //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/"). Artículo por Miguel Angel Alvarez Trabajo con Ajax en PHP utilizando Xajax: http://www."innerHTML".'>Todo correcto.com/manuales/xajax.'>$error_form</span>"). $form_entrada["apellidos"]. //mostramos en capa mensaje el texto que está todo correcto $respuesta->addAssign("mensaje"."innerHTML". $form_entrada["nombre"]..getFormValues('formulario'))" /> </form> </div> </body> </html> Podemos ver el resultado final de este ejercicio.html © Los manuales de DesarrolloWeb..) <br /> <input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax."<span style='color:red. }else{ //es que no hubo error en el formulario $salida = "Hemos procesado esto:<p>". Muchas gracias! </span>")."<span style='color:blue. //tenemos que devolver la instanciación del objeto xajaxResponse } return $respuesta. No reproducir sin autorización.desarrolloweb. $salida .= "Nombre: " . 14 . muestro el error $respuesta->addAssign("mensaje"."innerHTML". //escribimos en la capa con id="capaformulario" el texto que aparece en $salida $respuesta->addAssign("capaformulario".= "<br>Apellidos: " . $salida .desarrolloweb.com //en la capa donde se muestran mensajes. ?> </head> <body> <h1>Recibir y procesar formulario con Ajax y PHP</h1> <div id="mensaje"> Rellena los datos de este formulario y pulsa "Enviar" </div> <br /> <div id="capaformulario"> <form id="formulario"> Nombre: <input type="text" name="nombre" /> <br /> Apellidos: <input type="text" name="apellidos" /> <br /> <input type="checkbox" name="acepto" value="1" /> Acepto los términos y condiciones .

2.formulario. por medio de xajax.provincia. Nota: en este artículo presentamos una manera de hacer los selects combinados con Ajax y PHP utilizando Xajax versión 0. que actualizaremos luego con Ajax. Veamos el ejemplo que vamos a desarrollar en este artículo.provincia. Con ese identificador de provincia generará el código del select con todas las poblaciones de esa provincia. que llama con Ajax. donde uno tiene las posibles opciones en función de lo que se haya elegido en el otro. Además. No reproducir sin autorización. porque estas se deben incluir en función de la provincia escogida en el primer campo. <form name="formulario"> Provincia: <br> <select name="provincia" onchange="xajax_generar_select(document. 15 . Ahora vamos a ver una función PHP que generaría el código de un select en función de un parámetro que recibirá: la provincia. Veremos como hacer este sistema en PHP y Ajax. Vemos que el segundo select está metido en una capa con id="selectcombinado". el primero para las provincias y el segundo para las poblaciones. Este artículo viene a continuar una serie de artículos sobre el uso de xajax.html © Los manuales de DesarrolloWeb. El primer campo tiene todas las opciones posibles. es decir. Hemos publicado unas notas para actualizar este código a la versión 0.5. hay que fijarse en el atributo onchange del primer select.5. que nos facilitará bastante las cosas.formulario.5. function select_combinado($id_provincia){ //función para crear el select combinado //debe extraer las opciones de un select a partir de un parámetro Trabajo con Ajax en PHP utilizando Xajax: http://www. una estructura de dos selects. por lo que os recomendamos leer el artículo Actualizar a Xajax 0.value)"> <option value="999">Selecciona provincia</option> <option value=0>Madrid</option> <option value=1>Valencia</option> <option value=2>Barcelona</option> <option value=3>León</option> </select> <br> <br> Población: <div id="seleccombinado"> <select name="poblaciones"> <option value=0>Elegir provincia</option> </select> </div> </form> Vemos que se tiene dos campos select.com Selects combinados con Ajax y PHP Un ejemplo típico de las prestaciones de Ajax es la creación de selects combinados. con la ayuda de la librería xajax. que comenzamos en el artículo Xajax: Ajax para PHP.desarrolloweb. El segundo select inicialmente no tiene ninguna opción.selectedIndex ]. Para empezar veremos el formulario inicial con el primer select y el segundo sin opciones.Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com/manuales/xajax. a la función PHP que se encargará de generar las opciones del segundo select.options[document.com tienen el copyright de sus autores.

$leon).com tienen el copyright de sus autores.= "</select>". la función recibe un identificador de provincia. que se utiliza para recorrer el array asociado a la provincia y generar un campo select con una opción por cada población. '</option>'. '">' . Para escribirlo utilizamos el método addAssign() del objeto de la clase xajaxResponse que ya conocíamos de anteriores ejercicios. $barcelona = array("Barcelona". } $nuevo_select .com //generamos unos arrays con distintas poblaciones de varias provincias //estos valores en un caso práctico seguramente se extraerán de base de datos //no habría que cargar todos en memoria.com/manuales/xajax. Ahora vamos a ver la función que hace uso de xajax para procesar y actualizar la página con Ajax para cambiar las opciones del segundo select. $poblaciones[$id_provincia][$i] . "Móstoles".$nuevo_select). No reproducir sin autorización. $poblaciones = array($madrid. //creo las distintas opciones del select $nuevo_select = "<select name='poblaciones'>".desarrolloweb. } Lo primero es instanciar un objeto de la clase xajaxResponse para generar la respuesta. "San Sebastián de los Reyes"). $leon = array ("León".html © Los manuales de DesarrolloWeb. "Astorga". porque es un caso especial (no se ha seleccionado ninguna provincia) y tenemos que generar el select de provincias vacío. "La Eliana". $i<count($poblaciones[$id_provincia]). 16 . } //escribimos en la capa con id="seleccombinado" $respuesta->addAssign("seleccombinado". En ese caso lo que tendríamos que hacer es simplemente es una consulta y recorrer un conjunto de registros."innerHTML". "Las Rozas". En caso que el código de la provincia sea otra cosa entonces se lo pasamos a la función select_combinado(). $valencia = array("Valencia". $i++){ $nuevo_select . "Cullera").desarrolloweb. "Badalona"). En definitiva. vista anteriormente. } La función anterior tiene poco de interés para lo que es el manejo de Ajax. Comprobamos si ese código de la provincia es 999. $barcelona. pero en nuestras aplicaciones posiblemente tengamos las poblaciones en una base de datos. }else{ $nuevo_select = select_combinado($cod_provincia). escribimos en la capa con id="selectcombinado" la cadena con el select que hemos generado. sólo hacer el select de las poblaciones de la provincia deseada $madrid = array("Madrid". function generar_select($cod_provincia){ //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse('ISO-8859-1'). "Villamejil"). Como se puede ver.Tu mejor ayuda para aprender a hacer webs www. Trabajo con Ajax en PHP utilizando Xajax: http://www. "Paterna". para generar el select con las poblaciones de la provincia dada. recibimos el código de la provincia como parámetro. $i . for ($i=0. Para acabar.= '<option value="' . //tenemos que devolver la instancia del objeto xajaxResponse return $respuesta. Aquí hemos creado unos arrays para almacenar las poblaciones de las distintas provincias. $valencia. return $nuevo_select. if ($cod_provincia==999){ //escribimos el select de poblaciones vacío $nuevo_select = '<select name="poblaciones"> <option value=0>Elegir provincia</option> </select> '.

No reproducir sin autorización. } $nuevo_select ."innerHTML". $i++){ $nuevo_select . } //escribimos en la capa con id="seleccombinado" $respuesta->addAssign("seleccombinado". "Cullera").desarrolloweb.desarrolloweb. return $nuevo_select. } function generar_select($cod_provincia){ //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse('ISO-8859-1'). //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(). "Las Rozas". $barcelona. $valencia = array("Valencia". }else{ $nuevo_select = select_combinado($cod_provincia). $xajax->setCharEncoding('ISO-8859-1'). $barcelona = array("Barcelona". "Villamejil"). '">' . $poblaciones = array($madrid. sólo hacer el select de las poblaciones de la provincia deseada $madrid = array("Madrid". $xajax->decodeUTF8InputOn(). function select_combinado($id_provincia){ //función para crear el select combinado //debe extraer las opciones de un select a partir de un parámetro //generamos unos arrays con distintas poblaciones de varias provincias //estos valores en un caso práctico seguramente se extraerán de base de datos //no habría que cargar todos en memoria. "Badalona"). "La Eliana". $poblaciones[$id_provincia][$i] . "San Sebastián de los Reyes").Tu mejor ayuda para aprender a hacer webs www. $leon). for ($i=0.$nuevo_select). "Paterna". ?> <html> <head> Trabajo con Ajax en PHP utilizando Xajax: http://www.= '<option value="' . $i<count($poblaciones[$id_provincia]). 17 . $i++){ //for ($i=0. } //asociamos la función creada anteriormente al objeto xajax $xajax->registerFunction("generar_select"). $i<2. "Astorga".com tienen el copyright de sus autores. //creo las distintas opciones del select $nuevo_select = "<select name='poblaciones'>". "Móstoles". //instanciamos el objeto de la clase xajax $xajax = new xajax(). '</option>'. $valencia.com/manuales/xajax.= "</select>". $leon = array ("León". $i .php').inc.com El código completo es el siguiente: <? //incluímos la clase ajax require ('xajax/xajax.html © Los manuales de DesarrolloWeb. if ($cod_provincia==999){ //escribimos el select de poblaciones vacío $nuevo_select = '<select name="poblaciones"> <option value=0>Elegir provincia</option> </select> '. //tenemos que devolver la instanciación del objeto xajaxResponse return $respuesta.

Tu mejor ayuda para aprender a hacer webs www. Primero vamos a Trabajo con Ajax en PHP utilizando Xajax: http://www. Cuando un visitante escribe un nombre de usuario en un formulario tenemos que comprobar si el nombre de usuario es válido y no ha sido repetido por otra persona que se registró anteriormente. Este ejemplo pertenece a una serie de ejercicios que tratan de enseñar el trabajo con xajax. No reproducir sin autorización. Para hacernos una idea exacta del objetivo de este artículo podemos ver el ejemplo en marcha.com tienen el copyright de sus autores. El ejemplo en si es sencillo.w3.formulario.dtd"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html. En este caso vamos a implementar una utilidad típica de los formularios de registro de usuarios en una web: validar un nombre de usuario.provincia. podemos ver ejemplo en marcha aquí. que comenzó en el artículo Xajax: Ajax para PHP.charset=ISO-8859-1"> <title>Validar usuario en Ajax</title> <? //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/"). Esto se puede hacer con Ajax de una manera muy usable para el visitante.formulario. una librería que nos permite trabajar con Ajax y PHP de una manera sencilla. ?> </head> <body> <form name="formulario"> Provincia: <br> <select name="provincia" onchange="xajax_generar_select(document.com/manuales/xajax.desarrolloweb. Artículo por Miguel Angel Alvarez Comprobar si un usuario es válido con Ajax y PHP Veamos otro ejemplo de uso de xajax.options[document. de modo que se pueda comprobar el usuario antes de enviar el formulario para su procesamiento y sin que tenga que recargarse la página.provincia.value)"> <option value="999">Selecciona provincia</option> <option value=0>Madrid</option> <option value=1>Valencia</option> <option value=2>Barcelona</option> <option value=3>León</option> </select> <br> <br> Población: <div id="seleccombinado"> <select name="poblaciones"> <option value=0>Elegir provincia</option> </select> </div> </form> </body> </html> Finalmente. pero requerirá de realizar unos cuantos pasos.com <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.org/TR/xhtml1/DTD/xhtml1transitional. 18 .desarrolloweb.html © Los manuales de DesarrolloWeb.0 Transitional//EN" "http://www.selectedIndex ].

return false.desarrolloweb. porque lo que nos interesa es entender cómo trabajar con xajax.html © Los manuales de DesarrolloWeb. y un botón que habrá que pulsar para que se llame a la función que se encargará de comprobar el correo. Veamos ahora un par de funciones PHP que utilizaremos para las validaciones: function comprobar_permitidos($cadena){ $permitidos = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_".com/manuales/xajax. porque ya está comentada en el artículo Comprobar en PHP si una cadena tiene sólo el conjunto de caracteres permitido function comprobar_repetidos($cadena){ //esta función comprueba si se ha repetido un nombre de usuario //se supone que aquí se debería hacer una búsqueda en base de datos para ver si hay repetidos //nosotros para este ejemplo no vamos a conectar con base de datos //simplemente comprobamos si la cadena es igual a unos valores literales if ($cadena == "pepe" || $cadena == "jose" || $cadena == "juan"){ return false. No reproducir sin autorización. function validar_usuario($entrada){ //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse('ISO-8859-1'). como ya aparece comentado en el código de la propia función. Lo lógico. Sólo se permiten alfanuméricos y el signo "-". } return true. es que hubiéramos realizado un acceso a base de datos para comprobar si el usuario está o no ya en uso en la base de datos.usuario. Ahora vamos con lo importante.desarrolloweb. Esta función no la voy a explicar. Trabajo con Ajax en PHP utilizando Xajax: http://www. sólo hemos comprobado si el usuario es igual a los valores "pepe". 19 . substr($cadena.$i.1))===false){ //no es válido. En este ejemplo.formulario. } Esta otra función realiza una comprobación para ver si un usuario está repetido anteriormente. que es la función PHP que se encargará de comprobar la validez de un usuario y mostrar con Ajax los mensajes correspondientes. sin embargo. "jose" y "juan". $i++){ if (strpos($permitidos. según el usuario sea válido o no. } } //si estoy aqui es que todos los caracteres son validos return true.value)"> </form> Tiene un campo de texto donde se debe escribir el nombre de usuario.com ver el formulario donde el usuario escribirá el nombre de usuario. Una capa con id="mensaje" donde mostraremos mensajes de error o validez.Tu mejor ayuda para aprender a hacer webs www. } Esta función comprueba si los caracteres de un nombre de usuario son válidos.com tienen el copyright de sus autores. <form name="formulario"> <input type="text" name="usuario" size="20"> <div id="mensaje"></div> <br> <input type="button" value="Comprobar validez de usuario" onclick="javascript:xajax_validar_usuario(document. Será suficiente para por el momento. $i<strlen($cadena). for ($i=0.

background"."style."innerHTML".desarrolloweb.com tienen el copyright de sus autores."red"). Pero claro."innerHTML"."innerHTML"."Todo correcto")."red"). Esta es una utilidad interesante de xajax que todavía no habíamos visto anteriormente. } Como podemos ver. Luego."Debes escribir algo como nombre de usuario"). Con esto ya tenemos hecho todo lo que habría que ver de este ejemplo."Debes escribir algo como nombre de usuario"). que no era nada difícil.com if ($entrada == ""){ //escribimos en la capa con id="mensaje" que no se ha escrito nombre de usuario $respuesta->addAssign("mensaje"."red")."red").color". Si el usuario era válido simplemente mostramos otro mensaje. En cada comprobación que ha ido mal se hacen dos cosas: Primero se muestra un mensaje de error en la capa que tiene como identificador "mensaje"."El nombre de usuario tiene caracteres no permitidos"). //Cambiamos a rojo el color del texto de la capa mensaje $respuesta->addAssign("mensaje"."blue"). $respuesta->addAssign("mensaje"."style. necesitaremos entender perfectamente algunas de las particularidades de xajax que ya se explicaron en artículos anteriores. $respuesta->addAssign("mensaje". esta vez con un "Todo correcto" y actualizamos el color del texto a azul. en realidad con xajax podemos acceder y modificar cualquier atributo de estilo de una capa desde PHP. //Cambiamos a azul el color del texto de la capa mensaje $respuesta->addAssign("mensaje". }elseif (!comprobar_permitidos($entrada)){ //escribimos en la capa con id="mensaje" el error que el usuario tiene caracteres permitidos $respuesta->addAssign("mensaje"."style."innerHTML". Trabajo con Ajax en PHP utilizando Xajax: http://www. } //tenemos que devolver la instanciación del objeto xajaxResponse return $respuesta.html © Los manuales de DesarrolloWeb. 20 . Como podemos entender por la anterior instrucción. comenzando con la verificación de que el usuario no sea la cadena vacía.color". }elseif (!comprobar_repetidos($entrada)){ //escribimos en la capa con id="mensaje" el error que el usuario está repetido $respuesta->addAssign("mensaje"."style."black").com/manuales/xajax."innerHTML". se cambia el color de la capa a rojo para que el error se visualice en rojo y sea fácil de identificar.desarrolloweb.Tu mejor ayuda para aprender a hacer webs www."style. Por ejemplo."El nombre de usuario escrito ya está en uso"). }else{ //es que todo ha ido bien //escribimos en la capa con id="mensaje" que todo ha ido bien $respuesta->addAssign("mensaje".color". para enviar respuestas Ajax a la página.color". //Cambiamos a rojo el color del texto de la capa mensaje $respuesta->addAssign("mensaje". Luego realiza varias comprobaciones de cosas que podrían fallar en un nombre de usuario. para cambiar el color de fondo de una capa podríamos escribir esto: $respuesta->addAssign("mensaje".color". No reproducir sin autorización. primero creamos una instancia de xajaxResponse."style. //Cambiamos a rojo el color del texto de la capa mensaje $respuesta->addAssign("mensaje".

= "Nombre: " . No reproducir sin autorización.com Podemos ver el código fuente completo aquí: <? //incluímos la clase ajax require ('xajax/xajax.. } //registramos la función creada anteriormente al objeto xajax $xajax->registerFunction("procesar_formulario"). }else{ //es que no hubo error en el formulario $salida = "Hemos procesado esto:<p>". //instanciamos el objeto de la clase xajax $xajax = new xajax(). $form_entrada["apellidos"]. if ($form_entrada["nombre"] == "") $error_form = "Debes escribir tu nombre". ?> </head> <body> <h1>Recibir y procesar formulario con Ajax y PHP</h1> Trabajo con Ajax en PHP utilizando Xajax: http://www. //validación $error_form = "". $form_entrada["nombre"].'>Todo correcto. $salida .com tienen el copyright de sus autores. muestro el error $respuesta->addAssign("mensaje"."innerHTML". elseif ($form_entrada["apellidos"] == "") $error_form = "Debes escribir tus apellidos".. $xajax->setCharEncoding('ISO-8859-1').= "<br>Apellidos: " . $xajax->decodeUTF8InputOn(). //escribimos en la capa con id="capaformulario" el texto que aparece en $salida $respuesta->addAssign("capaformulario".$salida). $salida .php')."innerHTML". //compruebo resultado de la validación if ($error_form != ""){ //Hubo un error en el formulario //en la capa donde se muestran mensajes. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(). elseif (!isset($form_entrada["acepto"])) $error_form = "Debes aceptar los términos y condiciones".desarrolloweb. 21 . function procesar_formulario($form_entrada){ //creo el xajaxResponse para generar una salida $respuesta = new xajaxResponse('ISO-8859-1').com/manuales/xajax.html © Los manuales de DesarrolloWeb.Tu mejor ayuda para aprender a hacer webs www.inc.desarrolloweb.'>$error_form</span>"). //mostramos en capa mensaje el texto que está todo correcto $respuesta->addAssign("mensaje". ?> <html> <head> <title>Enviar y procesar un formulario con Ajax y PHP</title> <? //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/"). Muchas gracias! </span>")."<span style='color:red."innerHTML"."<span style='color:blue. //tenemos que devolver la instanciación del objeto xajaxResponse } return $respuesta.

Lo nuevo en este artículo es la parte de mostrar un formulario en la misma página al pulsar un enlace. Para explicar este ejercicio tenemos que basarnos en otro ejercicio anterior.com/manuales/xajax. Al pulsar el enlace se muestra el formulario en la página (siempre sin recargar el contenido de la página entera).com <div id="mensaje"> Rellena los datos de este formulario y pulsa "Enviar" </div> <br /> <div id="capaformulario"> <form id="formulario"> Nombre: <input type="text" name="nombre" /> <br /> Apellidos: <input type="text" name="apellidos" /> <br /> <input type="checkbox" name="acepto" value="1" /> Acepto los términos y condiciones . con Ajax y PHP Este ejercicio viene a continuar el manual de utilización de xajax para programar aplicaciones Ajax con PHP. de modo que el usuario no tenga que recargar la página para comentar el artículo. en el que enviábamos y procesábamos un formulario con Ajax y PHP. <div id="mensaje"></div> <br /> <div id="capaformulario"> <a href="#" onclick="xajax_muestra_formulario()">Escribe un comentario del artículo</a>. sino un enlace.Tu mejor ayuda para aprender a hacer webs www. No reproducir sin autorización. Lo que vamos a hacer es un sencillo ejemplo para crear un sistema por el que los visitantes puedan comentar un artículo de una página web. En un principio en la página no aparece el formulario para comentar el artículo. Luego se envía el formulario y se procesa. 22 . Vamos a tener este HTML.desarrolloweb.desarrolloweb. Artículo por Miguel Angel Alvarez Mostrar un formulario al pulsar un enlace. La idea es que todo el proceso de comentar el artículo permanezca en la misma página. también en la misma página.html © Los manuales de DesarrolloWeb. pero tenemos el enlace para mostrarlo. </div> El enlace llama a una función PHP que se ejecutará por medio de Ajax: function muestra_formulario(){ //creo el xajaxResponse para generar una salida $respuesta = new xajaxResponse('ISO-8859-1').com tienen el copyright de sus autores.getFormValues('formulario'))" /> </form> </div> </body> </html> Podemos ver el ejemplo en marcha en una página aparte. $codigo_formul = '<form id="formulario"> Trabajo con Ajax en PHP utilizando Xajax: http://www. donde inicialmente no está el formulario.) <br /> <input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax.

if ($form_entrada["nombre"] == "") $error_form = "Debes escribir tu nombre". Luego.html © Los manuales de DesarrolloWeb. elseif ($form_entrada["apellidos"] == "") $error_form = "Debes escribir tus apellidos". return $respuesta.inc.com/manuales/xajax.getFormValues(\'formulario\'))" /> </form> '. //mostramos en capa capaformulario el texto código HTML del formulario $respuesta->addAssign("capaformulario". } function procesar_formulario($form_entrada){ //creo el xajaxResponse para generar una salida $respuesta = new xajaxResponse('ISO-8859-1'). <? //incluímos la clase ajax require ('xajax/xajax.com Nombre: <input type="text" name="nombre" /> <br /> Apellidos: <input type="text" name="apellidos" /> <br /> <textarea name="cuerpo"></textarea> <br /> <input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax.desarrolloweb. //validación $error_form = "". Podemos ver el código completo a continuación. } En esta función se crea en una variable cadena.com tienen el copyright de sus autores. $codigo_formul = '<form id="formulario"> Nombre: <input type="text" name="nombre" /> <br /> Apellidos: <input type="text" name="apellidos" /> <br /> <textarea name="cuerpo"></textarea> <br /> <input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax. $xajax->setCharEncoding('ISO-8859-1'). para mostrar en la página el formulario. con el método addAssign() del objeto clase xajaxResponse se actualiza la capa "capaformulario". Trabajo con Ajax en PHP utilizando Xajax: http://www. //mostramos en capa capaformulario el texto código HTML del formulario $respuesta->addAssign("capaformulario"."$codigo_formul").getFormValues(\'formulario\'))" /> </form> '. donde se introduce el código del formulario. 23 . return $respuesta."innerHTML". $xajax->decodeUTF8InputOn(). No reproducir sin autorización.Tu mejor ayuda para aprender a hacer webs www.php'). function muestra_formulario(){ //creo el xajaxResponse para generar una salida $respuesta = new xajaxResponse('ISO-8859-1'). El resto del ejercicio es exactamente el mismo que para el artículo enviar y procesar un formulario con Ajax y PHP."$codigo_formul")."innerHTML".desarrolloweb. //instanciamos el objeto de la clase xajax $xajax = new xajax().

'>$error_form</span>"). </div> </body> </html> El ejemplo puede verse en marcha en este enlace. } //registramos la función creada anteriormente al objeto xajax $xajax->registerFunction("muestra_formulario"). $form_entrada["cuerpo"]. Muchas gracias! </span>"). $salida . <div id="mensaje"></div> <br /> <div id="capaformulario"> <a href="#" onclick="xajax_muestra_formulario()">Escribe un comentario del artículo</a>. <p> En este ejemplo vamos a hacer un sistema para que se puedan realizar comentarios al artículo.com tienen el copyright de sus autores.com elseif (strlen($form_entrada["cuerpo"]) < 10) $error_form = "El comentario debe tener al menos 10 caracteres". 24 ."innerHTML"."<span style='color:blue."<span style='color:red. $xajax->registerFunction("procesar_formulario").."innerHTML".."innerHTML". //tenemos que devolver la instanciación del objeto xajaxResponse } return $respuesta. Tiene principalmente texto. <p> Utilizaremos Ajax para mostrar el formulario de contacto para escribir el formulario y también a la hora de recibir y procesar datos del formulario de alta del comentario. pero estos comentarios los vamos a recoger con Ajax. //mostramos en capa mensaje el texto que está todo correcto $respuesta->addAssign("mensaje".= "Nombre: " .= "<br>Apellidos: " . $salida .Tu mejor ayuda para aprender a hacer webs www.'>Todo correcto.desarrolloweb. $form_entrada["apellidos"]. con muchas informaciones de lo que sea.com/manuales/xajax. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(). ?> <html> <head> <title>Enviar y procesar un formulario con Ajax y PHP</title> <? //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/"). muestro el error $respuesta->addAssign("mensaje". No reproducir sin autorización.html © Los manuales de DesarrolloWeb. //escribimos en la capa con id="capaformulario" el texto que aparece en $salida $respuesta->addAssign("capaformulario". }else{ //es que no hubo error en el formulario $salida = "Hemos procesado esto:<p>". $salida .$salida). Artículo por Miguel Angel Alvarez Trabajo con Ajax en PHP utilizando Xajax: http://www.= "<br>Comentario: " . //compruebo resultado de la validación if ($error_form != ""){ //Hubo un error en el formulario //en la capa donde se muestran mensajes. ?> </head> <body> <h1>Recibir y procesar formulario con Ajax y PHP</h1> Esto se supone que es un artículo. $form_entrada["nombre"].desarrolloweb.

php'). "microperforado".inc. Para realizar el ejemplo hemos construido un juego del ahorcado. "deshidratación". los aciertos. //creo variable de sesión con la palabra Trabajo con Ajax en PHP utilizando Xajax: http://www. Esta función la llamaremos al terminar de cargar la página y cuando el usuario pulse el botón "Reiniciar". Tenemos dos funciones principales: 1) La función para iniciar el juego. "laboratorio". por lo que se guardan en variables de sesión. Podemos ver el ejemplo en marcha.Tu mejor ayuda para aprender a hacer webs www. //incluímos la clase ajax require ('xajax/xajax. "otorrinolaringologo". • 2) Tenemos que acceder a variables de sesión a través de $_SESSION. En el juego tendremos que meter varias variables en la sesión. inicializa los fallos. Todas esas variables que se inicializan se tienen que conservar durante todo el juego.desarrolloweb. por lo que vamos a iniciar el código con la apertura de la sesión. 25 . <? session_start(). Se gana cuando se han adivinado todas las letras de la palabra y se pierde si se llega al máximo de los fallos permitidos. no difiere del que ya conocemos para aplicaciones PHP generales. en resumen: • 1) Tenemos que iniciar la sesión antes de enviar ninguna información o texto al navegador. me figuro que es de sobra conocido por todos. $_SESSION["nombre_variable"] = "valor cualquiera".com Manejo de sesión con PHP y Ajax Siguiendo con nuestro manual de Ajax y PHP utilizando las librerías Xajax. "constitución". "acomodarse". //instanciamos el objeto de la clase xajax $xajax = new xajax(). El trabajo con sesiones en Ajax y en concreto utilizando el framework de Xajax."descontrolados". Consiste en adivinar una palabra. etc. $indice_aleatorio = mt_rand(0.count($palabras)-1). Luego tendremos que crear una serie de funciones PHP. Elige una palabra aleatoriamente. $xajax->setCharEncoding('ISO-8859-1'). En Xajax podremos utilizar variables de sesión de manera normal.com/manuales/xajax. session_start().desarrolloweb. function iniciar(){ $palabras = array("murciélago". "superproducción"). $xajax->decodeUTF8InputOn(). para adivinar palabras. No reproducir sin autorización. En cuanto al juego del ahorcado.html © Los manuales de DesarrolloWeb. se descubre y si la letra no estaba en la palabra se apunta un fallo. Luego meteremos el include con la librería xajax y la instanciación del objeto. Si la letra está en la palabra. Tenemos que asegurarnos que la sesión se abra. algunas para llamar como respuesta a acciones del usuario por medio de Ajax.com tienen el copyright de sus autores. como la palabra a adivinar o los fallos que lleva el jugador. //defino un número aleatorio para sacar una palabra entre las posibles mt_srand(time()). probando letra a letra. vamos a ver como hacer aplicaciones web que utilicen variables de sesión.

26 . 2) La función para probar una letra. $respuesta->addAssign("fallos". le muestro la palabra $palabra_entera = "Has perdido! la palabra era: <b>" . $respuesta->addAssign("palabra". $respuesta->addAssign("palabra".com tienen el copyright de sus autores. $fallos_actuales = genera_fallos_actuales(). //creo variable de sesión con los aciertos $_SESSION["aciertos"] = array().html © Los manuales de DesarrolloWeb."innerHTML". de la manera habitual que venimos trabajando. //creo la variable para decir que no ha perdido $_SESSION["sin_jugar"] = false.$letra) === false){ //es que no estaba $_SESSION["fallos"] ++.Tu mejor ayuda para aprender a hacer webs www. genera_fallos_actuales(). "". para ver si está en la palabra buscada. }elseif (strlen($letra)!=1){ $envia_letra = "<span style='color:red'>No he recibido una letra!</span><br>" ."innerHTML". No reproducir sin autorización. Las particularidades de xajax las venimos comentando en artículos anteriores del manual de Xajax. Veremos que hace uso de las variables de sesión creadas en la función anterior.$palabra_vista).$palabra_vista). con el array asociativo $_SESSION.$advierte_perdido).desarrolloweb. $respuesta->addAssign("fallos". Luego nos fijamos en que se genera la palabra con los aciertos y los fallos actuales y se meten por ajax como contenidos de las capas. //compruebo que no me haya pasado de fallos if ($_SESSION["fallos"] == $fallos_permitidos){ //si ha perdido.$fallos_actuales). //compruebo que he recibido una letra if($_SESSION["sin_jugar"]){ $advierte_perdido = "<span style='color:red'>Ya has terminado!</span><br>" . Trabajo con Ajax en PHP utilizando Xajax: http://www."innerHTML". con el array asociativo $_SESSION["indice_de_variable"]. }else{ //miro si la letra está entre las de la palabra if (strpos($_SESSION["palabra"].$fallos_actuales). Esta función la llamaremos desde Javascript con Ajax cuando el usuario escriba una letra y pulse el botón para probarla.com/manuales/xajax. function probar_letra($letra){ global $fallos_permitidos. //actualizo los fallos $fallos_actuales = genera_fallos_actuales(). tal como estamos acostumbrados a hacer habitualmente. return $respuesta.com $_SESSION["palabra"] = $palabras[$indice_aleatorio].desarrolloweb.$fallos_actuales). genera_fallos_actuales() . $respuesta->addAssign("fallos". $respuesta = new xajaxResponse('ISO-8859-1'). } Hay que fijarse en el momento que se crean las variables de sesión."innerHTML"."innerHTML". $respuesta->addAssign("fallos". //genero lo que se verá de la palabra $palabra_vista = genera_palabra_aciertos(). $respuesta->addAssign("fallos". genera_palabra_entera() . //creo una variable con el número de fallos $_SESSION["fallos"] = 0. con el método addAssign() de xajax. "</b>". $respuesta = new xajaxResponse('ISO-8859-1')."innerHTML"."innerHTML".$envia_letra).

com tienen el copyright de sus autores.$palabra_vista).com } } return $respuesta. cuando el usuario pruebe si hay una vocal.inc."innerHTML"."innerHTML". porque implementa casi toda la lógica del juego. $fallos_permitidos=5. La función es un poco larga.desarrolloweb. en la que no hemos querido ahondar demasiado.desarrolloweb. si es que la hay. Las variables de sesión almacenan sus valores y los recuerdan sin problemas durante toda la ejecución de la aplicación.$palabra_entera). No reproducir sin autorización. nos muestre la vocal tanto si está acentuada como si no. } $respuesta->addAssign("palabra". $xajax->setCharEncoding('ISO-8859-1'). } }else{ //es que la letra está en la cadena $_SESSION["aciertos"][count($_SESSION["aciertos"])] = $letra.com/manuales/xajax. "</b>". } $respuesta->addAssign("palabra". Ahora no vamos a dar explicaciones sobre la lógica del juego del ahorcado.html © Los manuales de DesarrolloWeb. por ejemplo la "e" no nos mostraría la "é" (e con tilde). Comprobaremos que se van accediendo a las variables de sesión y que se van generando respuestas a través de los métodos del objeto xajaxResponse. Todavía habría que hacer cosas importantes para que fuera totalmente funcional.php'). Conclusión sobre variables de sesión en Ajax Es indiferente que estemos trabajando dentro de Ajax por lo que respecta al manejo de la sesión con PHP. $palabra_vista . en las distintas llamadas generadas a PHP a través de Ajax El juego del ahorcado tiene cierta complejidad. pero podemos ver que la función está comentada. $_SESSION["sin_jugar"] = true. En el juego actual si probamos. $xajax->decodeUTF8InputOn(). $_SESSION["sin_jugar"] = true. //genero lo que se verá de la palabra $palabra_vista = genera_palabra_aciertos(). Veremos aquí el código completo del juego. function iniciar(){ Trabajo con Ajax en PHP utilizando Xajax: http://www. así se pueda entender qué se hace en cada paso. //instanciamos el objeto de la clase xajax $xajax = new xajax(). //compruebo si has ganado ya if (strpos($palabra_vista."_")===false){ //si no hay un "_" en la palabra vista es que ya ha visto todas las letras $palabra_vista = "Has ganado! la palabra es: <b>" . Una vez más mostramos el ejemplo en marcha pulsando este enlace. como la gestión de acentos para asegurarse que.Tu mejor ayuda para aprender a hacer webs www. que nos puede dar más pistas sobre el trabajo con PHP y Xajax. <? session_start(). 27 . //incluímos la clase ajax require ('xajax/xajax.

$indice_aleatorio = mt_rand(0.com $palabras = array("murciélago". Trabajo con Ajax en PHP utilizando Xajax: http://www.= " _ ". } function genera_fallos_actuales(){ global $fallos_permitidos.$i. }else{ //si la letra no está en el array de aciertos.$fallos_actuales). return $respuesta. "/" . ""."innerHTML". } } return $cadena_palabra.$palabra_vista). } function genera_palabra_aciertos(){ $cadena_palabra="".desarrolloweb. 28 . $_SESSION["aciertos"])){ //si la letra actual está en el array de aciertos. } return $cadena_palabra. $fallos_actuales = genera_fallos_actuales(). substr($_SESSION["palabra"]. "laboratorio".Tu mejor ayuda para aprender a hacer webs www. la muestro if (in_array(substr($_SESSION["palabra"]. genera_fallos_actuales() . no la muestro $cadena_palabra .= " " . $respuesta = new xajaxResponse('ISO-8859-1'). $i++){ $cadena_palabra . "superproducción"). //creo la variable para decir que no ha perdido $_SESSION["sin_jugar"] = false. $fallos_permitidos.html © Los manuales de DesarrolloWeb.1) .desarrolloweb.count($palabras)-1). "deshidratación". substr($_SESSION["palabra"]. $respuesta->addAssign("fallos". "acomodarse". $i++){ //si la letra está en los aciertos. //defino un número aleatorio para sacar una palabra entre las posibles mt_srand(time()). $_SESSION["fallos"] .$advierte_perdido). $respuesta->addAssign("fallos".1) . //creo variable de sesión con la palabra $_SESSION["palabra"] = $palabras[$indice_aleatorio]. //genero lo que se verá de la palabra $palabra_vista = genera_palabra_aciertos(). "otorrinolaringologo".$i. la muestro $cadena_palabra . "constitución". $factuales = "Fallos: " .1). $respuesta->addAssign("palabra". } function probar_letra($letra){ global $fallos_permitidos. $respuesta = new xajaxResponse('ISO-8859-1'). " ". //creo una variable con el número de fallos $_SESSION["fallos"] = 0. //para cada una de las letras de la palabra a buscar for ($i=0. return $factuales.com/manuales/xajax. No reproducir sin autorización."descontrolados". //compruebo que he recibido una letra if($_SESSION["sin_jugar"]){ $advierte_perdido = "<span style='color:red'>Ya has terminado!</span><br>" .= " " ."innerHTML". $i<strlen($_SESSION["palabra"]).com tienen el copyright de sus autores. //para cada una de las letras de la palabra a buscar for ($i=0. $i<strlen($_SESSION["palabra"]). " ". "microperforado". } function genera_palabra_entera(){ $cadena_palabra="". //creo variable de sesión con los aciertos $_SESSION["aciertos"] = array().$i."innerHTML".

Tu mejor ayuda para aprender a hacer webs www. No reproducir sin autorización.html © Los manuales de DesarrolloWeb.letra.form. $_SESSION["sin_jugar"] = true. } $respuesta->addAssign("palabra". genera_palabra_entera() . "</b>".$palabra_vista).com tienen el copyright de sus autores. le muestro la palabra $palabra_entera = "Has perdido! la palabra era: <b>" . $respuesta->addAssign("fallos". $respuesta->addAssign("fallos". //compruebo si has ganado ya if (strpos($palabra_vista.$letra) === false){ //es que no estaba $_SESSION["fallos"] ++.value=''"> </form> </div> <br> Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb. }else{ //miro si la letra está entre las de la palabra if (strpos($_SESSION["palabra"]."> Escribe una letra: <input type="text" name="letra" size=2 maxlength="1"> <br> <input type="button" value="Probar letra" onclick="xajax_probar_letra(this. } }else{ //es que la letra está en la cadena $_SESSION["aciertos"][count($_SESSION["aciertos"])] = $letra.com/manuales/xajax."innerHTML".value)."innerHTML". ?> <html> <head> <title>Ahorcado Ajax</title> <? //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/"). "</b>".$palabra_entera). $xajax->registerFunction("probar_letra"). $respuesta->addAssign("palabra".com }elseif (strlen($letra)!=1){ $envia_letra = "<span style='color:red'>No he recibido una letra!</span><br>" . $_SESSION["sin_jugar"] = true.this. } } return $respuesta.letra."_")===false){ //si no hay un "_" en la palabra vista es que ya ha visto todas las letras $palabra_vista = "Has ganado! la palabra es: <b>" . //actualizo los fallos $fallos_actuales = genera_fallos_actuales(). //compruebo que no me haya pasado de fallos if ($_SESSION["fallos"] == $fallos_permitidos){ //si ha perdido.desarrolloweb."innerHTML".$envia_letra). } //registramos funciones $xajax->registerFunction("iniciar"). //genero lo que se verá de la palabra $palabra_vista = genera_palabra_aciertos(). $palabra_vista .$fallos_actuales)."innerHTML". 29 . genera_fallos_actuales().form. ?> </head> <body onload="xajax_iniciar()"> <h1>Ahorcado en Ajax</h1> <div id="palabra"> </div> <br> <div id="formulario"> <form id="formulario" onsubmit="return false. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests().

com <div id="fallos"> </div> <br> <form id="reiniciar" onsubmit="return false. Podemos ver el ejemplo en funcionamiento para hacernos una idea más concreta del objetivo de este taller. Mediante xajax conseguimos que se pueda ejecutar con una llamada desde Javascript a esta función PHP. Con Ajax comprobaremos su validez. function comprobar_url($miurl){ Trabajo con Ajax en PHP utilizando Xajax: http://www. En este caso vamos a realizar una comprobación de la validez de una URL escrita por el usuario. El último campo de texto no lo utilizamos para nada.desarrolloweb. De nuevo comento que este ejercicio lo hemos creado ayudándonos de las librerías Xajax."> <input type="button" value="reiniciar" onclick="xajax_iniciar()"> </form> </body> </html> Artículo por Miguel Angel Alvarez Comprobar la validez de una URL con Ajax Seguimos presentando artículos que ilustran el trabajo con PHP y Ajax. desde el punto de vista sintáctico (tiene que empezar por http://) y luego haremos una pequeña utilidad para que el visitante pueda ver el sitio web que se proporciona dentro de un iframe.value)"> <div id="comprobacion"></div> <br> Título: <input type="text" name="titulo"> </form> Simplemente tiene un campo de texto de la URL y un botón.Tu mejor ayuda para aprender a hacer webs www.com/manuales/xajax. Luego encontramos un <div id="comprobacion">.formulario.url. donde mostraremos el resultado de la validación por medio de Ajax. se llama a una función que hace uso de Ajax. por lo que no explicaré los detalles del uso de Xajax. para nuestro manual Trabajo con Ajax en PHP utilizando Xajax. Al pulsar el botón. evento onclick.desarrolloweb. No reproducir sin autorización.html © Los manuales de DesarrolloWeb. que al pulsarlo se lanza la comprobación. Si el sitio web se ve correctamente dentro del iframe es que la URL es correcta. Vamos a empezar viendo el formulario HTML que hemos creado: <form name="formulario"> URL: <input type="text" name="url"> <input type="button" name="comprobar_url" value="Comprobar URL" onclick="xajax_comprobar_url(document. Esta función está escrita en PHP. En este ejemplo tendremos un formulario donde el usuario podrá escribir la URL de un sitio web.com tienen el copyright de sus autores. 30 .

$xajax->setCharEncoding('ISO-8859-1').</a>'. Ese enlace llama a otra función por medio de Ajax que borra de la página el <iframe>. function comprobar_url($miurl){ if($miurl == ""){ $texto_result = "Debes escribir una URL". }elseif(substr($miurl. No reproducir sin autorización. $miurl .$texto_result).com/manuales/xajax. Dejamos el código fuente completo de este taller de Ajax y PHP con Xajax. 0. } $respuesta = new xajaxResponse('ISO-8859-1'). Luego."innerHTML". $respuesta->addAssign("comprobacion". return $respuesta. }else{ $texto_result = '<iframe width="600" height="200" src="' . <? session_start(). return $respuesta.desarrolloweb.. $xajax->decodeUTF8InputOn(). Primero realiza un par de validaciones simples. $respuesta->addAssign("comprobacion".. que generan mensajes de error si no la URL es un string vacío o si la URL no comienza por "http://". si hemos seguido el manual Trabajo con Ajax en PHP utilizando Xajax.$texto_result). para que el usuario valide visualmente que la dirección que ha escrito corresponde con la URL que quería enviar. para comodidad del usuario. function NO_comprobar_url(){ $texto_result = ''.com } if($miurl == ""){ $texto_result = "Debes escribir una URL". }else{ $texto_result = '<iframe width="600" height="200" src="' . no será muy difícil poner en marcha este ejercicio por nuestra cuenta. //incluímos la clase ajax require ('xajax/xajax.html © Los manuales de DesarrolloWeb. hemos puesto debajo un enlace para ocultar el <iframe>.Tu mejor ayuda para aprender a hacer webs www. Además.$texto_result). 31 . } Trabajo con Ajax en PHP utilizando Xajax: http://www. 7) != "http://"){ $texto_result = "La URL debe comenzar por http://"."innerHTML". return $respuesta. $respuesta = new xajaxResponse('ISO-8859-1'). } $respuesta = new xajaxResponse('ISO-8859-1'). $respuesta->addAssign("comprobacion".."innerHTML".desarrolloweb.. 7) != "http://"){ $texto_result = "La URL debe comenzar por http://".com tienen el copyright de sus autores. }elseif(substr($miurl. '"></iframe> <br> <a href="#" onclick="xajax_NO_comprobar_url()">Ocultar. se muestra un <iframe> con la URL de la página que ha escrito en el formulario.php'). 0. $miurl . //instanciamos el objeto de la clase xajax $xajax = new xajax(). La función recibe en el parámetro $miurl la URL que se desea validar. } En realidad.inc. Si la URL estaba bien escrita el usuario podrá verla dentro del <iframe>.</a>'. '"></iframe> <br> <a href="#" onclick="xajax_NO_comprobar_url()">Ocultar.

Posiblemente ya hemos visto alguno de estos controles personalizados en alguna página web. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(). return $respuesta. Este componente de formulario. para explicar lo que vamos a hacer. No obstante.$texto_result). cuando aprieta el enlace de validar.formulario.desarrolloweb. lo valide apretando un botón para ver si existe o se ha escrito correctamente. } $xajax->registerFunction("comprobar_url"). por ejemplo "es". el componente busca todos los países que tienen ese texto y los muestra para que el usuario elija el que desea. Antes de continuar conviene decir que este taller está creado como continuación de una serie de artículos sobre la librería Xajax para el trabajo con Ajax y PHP. $respuesta->addAssign("comprobacion". sirve para que un visitante que escribe un nombre de país.Tu mejor ayuda para aprender a hacer webs www.com/manuales/xajax. Hay temas importantes que no vamos a explicar porque ya se vieron en capítulos anteriores.com tienen el copyright de sus autores. que incorpora Javascript + Ajax + PHP + Base de datos MySQL. $xajax->registerFunction("NO_comprobar_url"). No reproducir sin autorización. es una buena idea ver el ejemplo en marcha. ?> </head> <body> <form name="formulario"> URL: <input type="text" name="url"> <input type="button" name="comprobar_url" value="Comprobar URL" onclick="xajax_comprobar_url(document.url. 32 . En caso que el usuario escriba sólo unas letras del nombre del país.com function NO_comprobar_url(){ $texto_result = ''. ?> <html> <head> <title>Comprobar URL por iframe y ajax</title> <? //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/"). Trabajo con Ajax en PHP utilizando Xajax: http://www.value)"> <div id="comprobacion"></div> <br> Título: <input type="text" name="titulo"> </form> </body> </html> Artículo por Miguel Angel Alvarez Validación previa de un campo de texto con Ajax y PHP A veces las páginas utilizan interfaces complejas para validar campos de un formulario antes de enviarlo."innerHTML". $respuesta = new xajaxResponse('ISO-8859-1').desarrolloweb.html © Los manuales de DesarrolloWeb.

com tienen el copyright de sus autores. $rs = mysql_query($ssql).nombre_pais. $campo_validacion .com El formulario HTML Comenzamos mostrando el formulario que hemos utilizado para construir el ejemplo: <div id="todo_formulario"> <form action="#" method="post" name="f1" id="f1"> <div id="input_pais"> Nombre país: <input type="text" name="nombre_pais"> <a style='cursor:pointer.text-decoration:underline."innerHTML".text-decoration:underline. '</div>'. Si no encuentra ninguno se muestra un mensaje de error. lo que haya escrito en el momento de pulsar el enlace. " posibles países. color:#0000ff. font-size: 8pt. "\").desarrolloweb. $campo_validacion . xajax_validar_pais(document. Luego se hace una consulta en la base de datos para seleccionar todos los países que tienen el texto escrito en el campo.' onclick='selecciona_pais(\"" .$campo_validacion). $respuesta->addAssign("validador_pais".= $fila->nombre_pais .value). Luego hay un botón para enviar el formulario.</i>".html © Los manuales de DesarrolloWeb.". es decir. Si Trabajo con Ajax en PHP utilizando Xajax: http://www. La llamada Ajax para validar el país Tenemos una función creada con PHP.f1.= '<div style="margin:3px. }else{ $campo_validacion = "<i>Se encontraron " .= "<a style='cursor:pointer. $fila->nombre_pais . color:#0000ff. que es la que se encarga de validar lo que haya escrito el usuario en el campo país. } Lo primero que se comprueba es que el usuario haya escrito al menos dos caracteres en el campo país. No reproducir sin autorización. while ($fila = mysql_fetch_object($rs)){ $campo_validacion . que hace uso de XajaX para poder procesarla con Ajax. un enlace al lado para validarlo y unas capas o etiquetas <div> que delimitan ciertas áreas donde vamos a mostrar datos desde Ajax.">' . padding:5px. } $campo_validacion .getFormValues('f1'))" value="Enviar"> </form> </div> Tenemos un campo de texto donde el usuario escribe el país.nombre_pais.">'.com/manuales/xajax. if (mysql_num_rows($rs)==0){ $campo_validacion = "No he encontrado países con ese nombre". }else{ $ssql = "select * from pais where nombre_pais like '%$nombre_pais%'".= '</div>'. $campo_validacion .value). margin-top:10px. } } $campo_validacion = '<div style="border: 2px solid #0000cc.' onclick="xajax_validar_pais(document. mysql_num_rows($rs) .">Validar pais</a> </div> <div id="validador_pais"></div> <p> Año de visita: <input type="text" name="ano" size="8"> <p> <input type="button" onclick="xajax_procesar_formulario(xajax. function validar_pais($nombre_pais){ if (strlen($nombre_pais)<2) { $campo_validacion = "Debes escribir al menos dos letras del campo país.desarrolloweb.f1.'>". width: 300px. return $respuesta. $respuesta = new xajaxResponse('ISO-8859-1').Tu mejor ayuda para aprender a hacer webs www. La función recibe el value del campo input nombre_pais. que también se procesa con una llamada a una función Javascript que hace uso de Ajax. 33 . '</a><br>'.

$xajax->setCharEncoding('ISO-8859-1'). El código completo lo mostramos a continuación: <? //incluímos la clase ajax require ('xajax/xajax.com encuentra uno o más países se muestra el listado de naciones encontradas para que el usuario seleccione cuál es la que le interesa. $xajax->decodeUTF8InputOn(). que es una función Javascript pura.</div>').desarrolloweb. } El formulario comprueba que se haya validado anteriormente el país. //conecto con la base de datos $connectid = mysql_connect("localhost".Tu mejor ayuda para aprender a hacer webs www.innerHTML='<input type="hidden" name="nombre_validado" value="' + nombre + '">' + nombre } </script> Esta función se ejecuta al pulsar cualquier país de la lista de países encontrados y actualiza el contenido HTML de un par de capas. 34 . Función para procesar el formulario con Ajax y PHP Para procesar el formulario utilizamos también Ajax y PHP.html © Los manuales de DesarrolloWeb.innerHTML='<div style="border: 2px solid #00cc00. font-size: 8pt.getElementById("validador_pais").com tienen el copyright de sus autores.'Todo correcto!'). Trabajo con Ajax en PHP utilizando Xajax: http://www. }else{ $respuesta->addAssign("todo_formulario". para mostrar el resultado en la interfaz de usuario y generar un campo hidden con el nombre del país ya validado.nombre_pais. ""). que se procesa totalmente en el cliente. mysql_select_db("xajax".". function validar_pais($nombre_pais){ if (strlen($nombre_pais)<2) { $campo_validacion = "Debes escribir al menos dos letras del campo país. } return $respuesta. pero no lo es tanto si conocemos de antemano el funcionamiento de las librerías Xajax.f1. Javascript para escoger el país deseado Luego hay una función que también se debe comentar. margin-top:10px. "root". document.'<div style="border: 2px solid #cc0000.php'). para que permita procesarlo. padding:5px.">Validado correctamente</div>'. //instanciamos el objeto de la clase xajax $xajax = new xajax(). width: 300px.inc. <script> function selecciona_pais(nombre){ document.desarrolloweb.">Tienes que validar el país. if (!isset($formulario["nombre_validado"])){ $respuesta->addAssign("validador_pais". No reproducir sin autorización.getElementById("input_pais").com/manuales/xajax. Para ello hemos realizado la siguiente función PHP que se ejecuta por medio de Ajax: function procesar_formulario($formulario){ $respuesta = new xajaxResponse('ISO-8859-1').value=nombre document.$connectid). Se utilizan las funciones proporcionadas por un objeto del framework xajax (de la clase xajaxResponse) para mostrar los resultados en la página si refrescar el documento. margin-top:10px. cuando el usuario selecciona el país que desea de los países encontrados al validar el país. width: 300px."innerHTML". font-size: 8pt. El ejercicio puede resultar complejo."innerHTML". padding:5px.

} } $campo_validacion = '<div style="border: 2px solid #0000cc.'Todo correcto!'). font-size: 8pt.value=nombre document.= "<a style='cursor:pointer. $respuesta->addAssign("validador_pais". if (mysql_num_rows($rs)==0){ $campo_validacion = "No he encontrado países con ese nombre".">'.com/manuales/xajax.">Validado correctamente</div>'.= '<div style="margin:3px.' onclick='selecciona_pais(\"" . $xajax->registerFunction("procesar_formulario"). $campo_validacion . "\").$campo_validacion). ?> <script> function selecciona_pais(nombre){ document. font-size: 8pt. verdana.f1. }else{ $respuesta->addAssign("todo_formulario".text-decoration:underline.</i>"."innerHTML".html © Los manuales de DesarrolloWeb.nombre_pais. ?> <html> <head> <title>Validador campo formulario online</title> <? //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/"). width: 300px. '</div>'.= '</div>'.innerHTML='<input type="hidden" name="nombre_validado" value="' + nombre + '">' + nombre } </script> </head> <body style="font-family: arial. $campo_validacion .com }else{ $ssql = "select * from pais where nombre_pais like '%$nombre_pais%'".text-decoration:underline. mysql_num_rows($rs) . } function procesar_formulario($formulario){ $respuesta = new xajaxResponse('ISO-8859-1'). margin-top:10px.getElementById("validador_pais"). 35 .'<div style="border: 2px solid #cc0000. No reproducir sin autorización. font-size: 8pt. color:#0000ff. Trabajo con Ajax en PHP utilizando Xajax: http://www.innerHTML='<div style="border: 2px solid #00cc00. }else{ $campo_validacion = "<i>Se encontraron " . //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests().Tu mejor ayuda para aprender a hacer webs www."innerHTML". return $respuesta. width: 300px.'>". document. $campo_validacion . " posibles países.= $fila->nombre_pais ."> <div id="todo_formulario"> <form action="#" method="post" name="f1" id="f1"> <div id="input_pais"> Nombre país: <input type="text" name="nombre_pais"> <a style='cursor:pointer. padding:5px. } return $respuesta. $fila->nombre_pais .">' .getElementById("input_pais"). padding:5px. '</a><br>'.desarrolloweb. padding:5px. if (!isset($formulario["nombre_validado"])){ $respuesta->addAssign("validador_pais"."innerHTML". margin-top:10px. $respuesta = new xajaxResponse('ISO-8859-1'). } $campo_validacion . width: 300px. margin-top:10px. while ($fila = mysql_fetch_object($rs)){ $campo_validacion . } //registramos funciones $xajax->registerFunction("validar_pais"). $rs = mysql_query($ssql).</div>').desarrolloweb.">Tienes que validar el país.com tienen el copyright de sus autores.

">Validar pais</a> </div> <div id="validador_pais"></div> <p> Año de visita: <input type="text" name="ano" size="8"> <p> <input type="button" onclick="xajax_procesar_formulario(xajax. Las funciones no las voy a escribir en el texto de este artículo. ActiveXEnabledOrUnnecessary() Esta función detecta si el navegador soporta ActiveX o bien si ActiveX es innecesario para la ejecución de Ajax. 36 . para estar seguros que la web que estamos desarrollando se va a poder mostrar correctamente en cualquier cliente web que tenga el usuario. devuelve true si es así y false si no soporta Ajax por cualquier cuestión. browserSupportsAjax() Comprueba si el navegador tiene compatibilidad con la tecnología Ajax. simplemente voy a poner un link al lugar donde se muestran las funciones en la página de Xajax Project: http://xajaxproject. En el navegador Internet Explorer 6 Ajax se ejecuta a través de ActiveX. ya sea porque el navegador del usuario no las soporte o porque estén deshabilitadas.getFormValues('f1'))" value="Enviar"> </form> </div> <? mysql_close($conn).com/manuales/xajax. Así que esta función devolverá false sólo si el navegador es Internet Explorer 6 y tiene inhabilitado ActiveX.nombre_pais. ?> </body> </html> Para acabar.com color:#0000ff.html © Los manuales de DesarrolloWeb. Cookies y ActiveX El sitio de Xajax Project ha publicado unos scripts interesantes para poder detectar si un navegador es compatible con la tecnología Ajax. El script contiene tres funciones: browserSupportsCookies() Detecta si el navegador soporta cookies y devuelve true en caso que estén soportadas y false si no es así.com tienen el copyright de sus autores.value).org/wiki/Xajax_%28any%29:_Tips_and_Tricks:_Detecting_Support Trabajo con Ajax en PHP utilizando Xajax: http://www. podemos ver el ejemplo en marcha. No reproducir sin autorización. así que necesita disponer ActiveX para que todo funcione. Además estos scripts sirven para mostrar mensajes de error si el navegador no tiene soporte a Ajax.desarrolloweb. Estos scripts detectan las capacidades del navegador y se pueden ejecutar para mostrar mensajes de alerta si no están disponibles ciertas funcionalidades. de modo que el usuario sea consciente que no va a poder ver esa web convenientemente.' onclick="xajax_validar_pais(document.f1.desarrolloweb.Tu mejor ayuda para aprender a hacer webs www. Artículo por Miguel Angel Alvarez Script para detección de soporte a Ajax.

Maquetación de la interfaz con CSS y HTML Para maquetar previamente el sistema de pestañas vamos a utilizar por un lado HTML y por otro CSS para definir el aspecto. podéis ver el código fuente de la página para ver la implementación de los scripts que hemos hecho en DesarrolloWeb.com tienen el copyright de sus autores. Pero podéis conocer Los cambios entre versiones de xajax los comentamos en el artículo Actualiza tu framework y tus scripts PHP y Ajax a Xajax 0. para que se soliciten los contenidos de cada pestaña al servidor y se muestren sin necesidad de recargar la página.com/articulos/ejemplos/ajax/xajax/pestanas.5. todos en el mismo espacio.org en el momento de escribir el artículo.html © Los manuales de DesarrolloWeb. Nuestro HTML en este ejercicio quedará así: <div class="pestanas"> <ul> <li id="pestana0" class="pestanainactiva"><a href="javascript:void(xajax_cambia_contenido(0))">Intereses</a></li> <li id="pestana1" class="pestanainactiva"><a href="javascript:void(xajax_cambia_contenido(1))">Portfolio</a></ li> <li id="pestana2" class="pestanainactiva"><a Trabajo con Ajax en PHP utilizando Xajax: http://www. con interacción de usuario. Nosotros vamos a realizarla con PHP y Ajax.php Nota: En este ejercicio estamos utilizando la versión 0. El esquema es exactamente el mismo ahora.Tu mejor ayuda para aprender a hacer webs www. Es una interfaz que habremos podido ver en varias páginas web.com explicamos como maquetar la interfaz de pestañas.com donde hemos implementado estos scripts. En la interfaz habrá varias pestañas y pulsando cada una se mostrarán unos contenidos específicos de esa solapa. que nos permite programar fácilmente páginas con Ajax usando PHP.desarrolloweb.desarrolloweb.desarrolloweb.desarrolloweb.5. Actualizado: Ahora la versión más actual es la Xajax 0.com y obtener el código de las funciones en caso que cambien la URL en la página de Xajax. que es la estable que hay publicada en el sitio de xajaxproject. El único cambio es que hemos tenido que crear otra clase (class de CSS) para definir el aspecto de las pestañas que están inactivas. Para cuando se pulse una pestaña o solapa se muestren los contenidos asociados a esa pestaña.5.2. http://www. Utilizaremos el framework Xajax. No reproducir sin autorización. El objetivo final del ejercicio lo podemos ver en: http://www.com Pero también voy a dejar un enlace a una página en DesarrolloWeb.com/manuales/xajax. Así mismo.html Artículo por Miguel Angel Alvarez Interfaz de navegación por pestañas con Ajax y PHP Continuamos con el manual de PHP y Ajax con Xajax esta vez mostrando como se haría una interfaz de navegación de pestañas. para que los podáis ver en funcionamiento en vuestros navegadores. En un artículo anterior de DesarrolloWeb.com/articulos/ejemplos/comprobar-compatibilidad-ajax. 37 . Y además hemos creado unas declaraciones de estilos para forzar el color de los enlaces.

$contenido_pestanas[$num_pestana]).pestanainactiva. que luego vamos a necesitar. que en realidad es una función. //defino contenidos de las pestañas $contenido_pestanas = array( 'Texto 0'. 'Texto solapa 2'. No reproducir sin autorización. Tenemos que hacer lo siguiente: • • • Conseguir el contenido de la pestaña pulsada y colocarlo en la capa "cuerpopestanas". con los estilos CSS de las pestañas cuando sí que están pulsadas.pestanaseleccionada. li. como decía. que es el número de la pestaña pulsada.com tienen el copyright de sus autores. Otra cosa con respecto al HTML. cambiar la clase de CSS que hemos indicado en li.html © Los manuales de DesarrolloWeb.pestanaseleccionada. llamada cambia_contenido().desarrolloweb. 38 . //Pongo el texto nuevo en el cuerpo de la interfaz de pestañas $respuesta->addAssign("cuerpopestanas". Cambiar la clase CSS (class de CSS) de la pestaña pulsada a aquella donde habíamos guardado el estilo de las solapas cuando están pulsadas li. es que en la capa con id="cuerpopestanas" es donde vamos a mostrar los distintos contenidos de las solapas.desarrolloweb. conviene percatarse de que cada pestaña construida tiene un identificador. 'Texto de la pestana 3').pestanainactiva. con los estilos CSS de las pestañas cuando no están pulsadas. os habréis fijado que en el HTML están todas las solapas inactivas y ningún contenido en el cuerpo de las pestañas. Para las pestañas que quedan inactivas. en el CSS del ejemplo vamos a tener dos clases que merece la pena que recordemos: li. para referirnos a estas pestañas y cambiarles el aspecto al ser pulsadas. Por último.com href="javascript:void(xajax_cambia_contenido(2))">Contacto</a></li> </ul> <div id="cuerpopestanas" class="cuerpopestanas"> </div> </div> Leer el artículo Maquetación de un recuadro con pestañas con CSS para más información. Además. La función es la siguiente: function cambia_contenido($num_pestana){ //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse('ISO-8859-1'). que hemos definido con PHP y registrado con Xajax para poder invocarla desde Javascript. por ejemplo pestana0 o pestana1. Esto es porque el contenido del cuerpo de la interfaz lo vamos a inicializar desde Javascript cuando se termine de cargar la página. para que en ese momento se conecte por ajax al servidor y se traiga los contenidos de la pestaña que queramos que aparezca seleccionada por defecto.com/manuales/xajax. Aparte. Código PHP de la función para cambiar la pestaña pulsada Con PHP y ayudándonos de Xajax vamos a definir el comportamiento de pulsar una de las pestañas de la interfaz. En el HTML ya podemos ver llamadas a una función Javascript xajax_cambia_contenido().Tu mejor ayuda para aprender a hacer webs www. en nuestra función PHP cambia_contenido()."innerHTML". //Pongo el estilo (de una class de css) en la pestaña pulsada Trabajo con Ajax en PHP utilizando Xajax: http://www. Estas llamadas a xajax_cambia_contenido() envían un parámetro.

$xajax->setCharEncoding('ISO-8859-1'). El primer valor pasado a este método es el identificador del elemento al que queremos cambiar la class. $i++){ if ($i != $num_pestana){ $respuesta->addAssign("pestana" . <? //incluímos la clase ajax require ('xajax/xajax. podemos ejecutarla como hemos visto en el HTML al principio del artículo.com tienen el copyright de sus autores. • • Con esa función registrada mediante xajax. //función para cambiar el contenido de las pestañas function cambia_contenido($num_pestana){ //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse('ISO-8859-1'). "className". } } return $respuesta. $contenido_pestanas = array( 'Esto es el cuerpo de las pestañas. el segundo valor "className" para decirle que queremos cambiar el nombre de la clase CSS y el tercer valor el nombre de la clase que queremos asociar a ese elemento.onload = xajax_cambia_contenido(0). $i.desarrolloweb. "className". Puede ser tan largo como desees. que le pondremos unas barras de desplazamiento para que no se desborde. "pestanainactiva"). $num_pestana. Trabajo con Ajax en PHP utilizando Xajax: http://www. Código completo de la interfaz de pestañas Para acabar. Los contenidos son textos que me he inventado y he metido directamente en el Array.com/manuales/xajax. Los contenidos de las pestañas los hemos metido en un array creado en la propia función.php'). $xajax->decodeUTF8InputOn(). //Pongo la class css de las pestañas sin pulsar for ($i=0. Al final se hace un bucle para cada una de las pestañas. "pestanaseleccionada"). Para cambiar la clase (class de CSS) de un elemento de la página tenemos que utilizar la el método addAssign(). al terminarse de cargar la página se mostrarán los contenidos de la pestaña 0. El código está comentado para una fácil comprensión. en $num_pestana. $i<count($contenido_pestanas).com } $respuesta->addAssign("pestana" . el número de la pestaña pulsada. aquí queda el código completo de este ejercicio.desarrolloweb. //instanciamos el objeto de la clase xajax $xajax = new xajax(). </script> Con esto. menos la que ha sido pulsada. que tiene muchos otros detalles que no vamos a comentar porque ya se conocieron en artículos anteriores de el presente manual. para cambiarles la clase a la class CSS que hemos creado para las pestañas inactivas. No obstante podemos decir: • • Recibo como parámetro de la función. pero en realidad estos contenidos los podríamos haber generado de cualquier otra forma o seleccionarlos de una base de datos.Tu mejor ayuda para aprender a hacer webs www.html © Los manuales de DesarrolloWeb. Para inicializar la estructura de pestañas una vez cargada la página llamaremos a esta función PHP de la siguiente manera: <script> window.inc. No reproducir sin autorización. 39 .

dapibus vel. <br> <br> Existe una pestaña seleccionada. '. <br> <br> Etiam sit amet dui vitae elit facilisis gravida.. Ejemplo funcionando en el que podrás ver como se maqueta con CSS para crear un estilo para un recuadro con diversas pestañas que podrán mostrar distintos contenidos. } } return $respuesta. $num_pestana. 40 .. mauris. Curabitur tempor sem ac mauris. Proin eu quam sed velit convallis malesuada.01 Transitional//EN"> <html> <head> Trabajo con Ajax en PHP utilizando Xajax: http://www. Etiam suscipit lectus vitae eros. Donec velit enim. } //asociamos la función creada anteriormente al objeto xajax $xajax->registerFunction("cambia_contenido"). Suspendisse potenti. tortor at ultrices rutrum. magna. accumsan eu. Nam quis ipsum. ornare vitae.$contenido_pestanas[$num_pestana]). "className". enim. consequat nec. //coloco el texto nuevo en el cuerpo de la interfaz de pestañas $respuesta->addAssign("cuerpopestanas". "className". tellus non eleifend pellentesque. aliquam aliquam felis arcu eget purus. cursus sed. que siempre es interesante probarlo todo bien. bibendum sit amet. adipiscing nec. auctor ultricies. '). Duis tincidunt odio. tempor sit amet. Raesent massa diam. Phasellus mi tellus. $i<count($contenido_pestanas). <br> <br> Estilos CSS para las pestañas. No reproducir sin autorización. <br> <br> Gracias por tu atención y por darle al scroll hacia abajo. Integer nisi lectus. Aliquam turpis arcu. porttitor non.Tu mejor ayuda para aprender a hacer webs www.desarrolloweb. tempus at. neque. viverra in."innerHTML". //coloco la class css de las pestañas sin pulsar for ($i=0. "pestanaseleccionada"). eros eros ornare nibh. Nam hendrerit facilisis lectus. pretium eget pede. Sed vitae turpis. <br> <br> Etiam tincidunt pede eu elit. $i++){ if ($i != $num_pestana){ $respuesta->addAssign("pestana" .com <br> <br> Lo que tengo es que poner más texto para las pestañas para probar que pasa cuando el texto es grande. id egestas nunc quam quis neque. pharetra sed. Nunc libero. Nulla facilisi. En el ejemplo que muestra sólo los CSS las pestañas no las hemos hecho pinchables.desarrolloweb. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(). gravida ac. auctor id. Pellentesque at arcu. Aliquam felis velit. "pestanainactiva").com/manuales/xajax. Mauris tortor. <br> <br> Praesent vestibulum euismod turpis. hendrerit eu.html © Los manuales de DesarrolloWeb. Sed sed ipsum vel augue dignissim tempor. venenatis ut. Sed molestie rhoncus sem. <br> <br> Praesent sed ipsum. Phasellus eget pede. Aenean tempus. que es la que muestra los contenidos que se van a ver en este momento. Curabitur nec justo. 'Vestibulum ac pede vitae risus pharetra vulputate. ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. cursus ut. consectetuer sed. elit.com tienen el copyright de sus autores. Maecenas volutpat. Sed quis mi. '. $i. 'Quisque quam dui. lacus. //Coloco el estilo (de una class de css) en la pestaña pulsada $respuesta->addAssign("pestana" . scelerisque eu. <br> <br> Nulla nulla consequat ipsum. Ut commodo. Vestibulum consectetuer sapien et erat.

La particularidad de este sistema es que lo vamos a realizar con ajax para que la página no tenga que cargar cada vez que un usuario vote. podemos ver el ejercicio en una página aparte. Por lo que es aconsejable que antes de empezar con este taller tengáis los aspectos básicos del funcionamiento de xajax bien aprendidos. programado con Ajax y PHP para traer los contenidos de cada pestaña.com <title>Interfaz de Pestañas Ajax y PHP</title> <link rel="STYLESHEET" type="text/css" href="estilo-pestanas3. <br> <br> <div class="pestanas"> <ul> <li id="pestana0" class="pestanainactiva"><a href="javascript:void(xajax_cambia_contenido(0))">Intereses</a></li> <li id="pestana1" class="pestanainactiva"><a href="javascript:void(xajax_cambia_contenido(1))">Portfolio</a></ li> <li id="pestana2" class="pestanainactiva"><a href="javascript:void(xajax_cambia_contenido(2))">Contacto</a></li> </ul> <div id="cuerpopestanas" class="cuerpopestanas"> </div> </div> <script> window. Este artículo hace continuación de una serie de talleres y ejemplos que hemos visto anteriormente en el manual Trabajo con Ajax en PHP utilizando Xajax.html © Los manuales de DesarrolloWeb. 41 . pues cualquier cosa que quieras.desarrolloweb. Esta es una opción muy útil para que el visitante vote por los artículos publicados sin tener que estar esperando a que la página se cargue.desarrolloweb.onload = xajax_cambia_contenido(0).css"> <? //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/"). además la página queda mucho más elegante y da la sensación de estar bien programada. Artículo por Miguel Angel Alvarez Sistema de votación con Xajax Vamos a crear un sistema para que los usuarios puedan votar artículos o si se modifica. Seguro que es una opción que habremos visto en un montón de sitios web y que hasta ahora no sabias como hacerlo.com tienen el copyright de sus autores. ?> </head> <body> Sistema de navegación con diversas pestañas.com/manuales/xajax. </script> </body> </html> Si lo deseamos. Creación del recuadro de votación Trabajo con Ajax en PHP utilizando Xajax: http://www. No reproducir sin autorización.Tu mejor ayuda para aprender a hacer webs www.

margin-top:3px.html © Los manuales de DesarrolloWeb. xajax_votar(id_articulo."> <div ><b>Participa:</b></div> <table cellspacing="2" cellpadding="2" border="0" width="190"> <tr> <td width="130" align=center class=fuente8> <div id="votar_articulo"> <? /*if ($respuesta!="") echo " <i>$respuesta</i> <br> ". Una vez que tenemos creado el recuadro tenemos que irnos a la pagina donde vamos a colocar el recuadro y empezar a construir las funciones xajax.font-size:12pt.puntos.votar. No reproducir sin autorización. 42 . ?> Puntua el artículo: <br> <form action="sistema_votacion.com/manuales/xajax.com tienen el copyright de sus autores. Trabajo con Ajax en PHP utilizando Xajax: http://www. la cual va a cambiar en el momento en que el usuario haga su votación. Un ejemplo de recuadro sería el siguiente: <script> function votar_articulo(id_articulo){ var puntos = document.*/ //muestra_media_votos_pagina($id_breve).puntos) } </script> <div style="width:192px."> <select name="puntos"> <option value=1>1 <option value=2>2 <option value=3>3 <option value=4>4 <option value=5>5 </select> <input type='button' name='votar' value='Votar' onClick='votar_articulo(1)'> </form> </div> </div> </td> </tr> <tr><td class=fuente8 align=center><div id=actualizar></div></td></tr> </table> </div> El único punto importante a comentar es que hemos utilizado una función javascript para llamar a la función xajax que vamos a crear después.desarrolloweb.value.Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.php" method="post" name=votar style="margin:0px. Este recuadro es bastante sencillo y lo único que tenemos que tener en cuenta es que hay que crear una capa.com Lo primero que vamos a crear es el recuadro donde se va a mostrar la posibilidad de votar y las votaciones realizadas.

return $respuesta. //echo $ssql. $act . } if($decimal>=0. $respuesta->addAssign("actualizar"./. $votacion){ global $raiz.. function votar($id_articulo. $respuesta = new xajaxResponse('ISO-8859-1').='<img src=".. Os pongo la función construida y luego pasamos a explicarla./images/estrella./.="<br>". if($absoluto>0){ for ($x = 1.= "<i>Nadie ha votado por este artículo</i>". $respuesta->addAssign("votar_articulo". $id_articulo)". mysql_query($ssql).. $fila_media=mysql_fetch_object($rs_media). //echo "prueba". 43 . } } }else{ $act .='<img src=".Tu mejor ayuda para aprender a hacer webs www. Esta función lo que tiene que hacer es recoger la votación del usuario. //saco la votacion media del articulo $ssql_media="select avg(votacion) as media from articulo_voto where id_articulo=".html © Los manuales de DesarrolloWeb./images/estrellamitad. } $act .$act). $fila_voto=mysql_fetch_object($rs_voto). //Saco el número de votos de este articulo $ssql_voto="select count(id_voto) as 'cuantos' from articulo_voto where id_articulo=$id_articulo". $decimal=$fila_media->media-$absoluto. actualizar en la base de datos el campo de votaciones y mostrar un mensaje al usuario dándole las gracias por votar.desarrolloweb.gif" width=14 height=13>'.desarrolloweb. if (!is_null($fila_media->media)){ $absoluto=intval($fila_media->media). $rs_media=mysql_query($ssql_media). $x <= $absoluto.com Antes de empezar tenemos que tener creadas ciertas tablas en nuestra base de datos.. //insertamos el voto $ssql= "insert into articulo_voto (votacion../."innerHTML"./.. Principalmente tendremos que tener una tabla articulo_voto donde se almacenara la información del artículo y del voto. Sería algo como esto: Para ello primero vamos a construir la función y luego ya la implementaremos en el archivo.5){ $act ."innerHTML".$res).com tienen el copyright de sus autores. No reproducir sin autorización. } Trabajo con Ajax en PHP utilizando Xajax: http://www."<br>". $x++){ $act . $act="<b>Número de votos</b>:".="<b>Votación media</b>: <br>".com/manuales/xajax.gif" width=14 height=13>'. id_articulo) values ($votacion.$fila_voto->cuantos.$id_articulo. $rs_voto=mysql_query($ssql_voto).

/images/estrellamitad. $x <= $absoluto././.. //instanciamos el objeto de la clase xajax $xajax = new xajax().com tienen el copyright de sus autores.. $act . //conecto con la base de datos $conn = mysql_connect("servidor".5){ $act .inc. 44 ."usuario".='<img src=". $act="<b>Número de votos</b>:". $votacion){ global $raiz. function votar($id_articulo. $xajax->decodeUTF8InputOn().gif" width=14 height=13>'. } if($decimal>=0. A continuación ponemos el código completo para que veáis como quedaría."<br>". } } Trabajo con Ajax en PHP utilizando Xajax: http://www. //echo "prueba"./.$fila_voto->cuantos.. //insertamos el voto $ssql= "insert into articulo_voto (votacion..desarrolloweb. if (!is_null($fila_media->media)){ $absoluto=intval($fila_media->media)./. $fila_media=mysql_fetch_object($rs_media).. $respuesta = new xajaxResponse('ISO-8859-1')./images/estrella.='<img src=".$conn). id_articulo) values ($votacion. Una vez introducido el voto pasamos a averiguar el número de votos realizados para luego mostrarlo en el recuadro de votación./xajax/xajax. //echo $ssql.. $rs_voto=mysql_query($ssql_voto). $fila_voto=mysql_fetch_object($rs_voto). //selecciono la BBDD mysql_select_db("bbdd". $xajax->setCharEncoding('ISO-8859-1').. $decimal=$fila_media->media-$absoluto. $x++){ $act .$id_articulo.com/manuales/xajax.com Explicación del código Lo primero que hacemos es insertar el voto en la base de datos con la primera sentencia sql.html © Los manuales de DesarrolloWeb.gif" width=14 height=13>'. $rs_media=mysql_query($ssql_media).php'). if($absoluto>0){ for ($x = 1. Si nadie a votado por el artículo mostraríamos un mensaje diciendo que nadie ha votado todavía. No reproducir sin autorización. Para finalizar asignamos a la respuesta de la función las dos variables que hemos utilizado para almacenar lo que queremos mostrar en el recuadro de votación. //saco la votacion media del articulo $ssql_media="select avg(votacion) as media from articulo_voto where id_articulo=". //Saco el número de votos de este articulo $ssql_voto="select count(id_voto) as 'cuantos' from articulo_voto where id_articulo=$id_articulo". mysql_query($ssql).. <? require ($raiz .Tu mejor ayuda para aprender a hacer webs www.. Una vez creado el código que vamos a sustituir en el recuadro de votación averiguamos la votación media para mostrarla también en el recuadro añadiendo estrellitas (aquí puedes simplemente mostrar el numero resultante y sería más fácil de realizar).desarrolloweb.="<b>Votación media</b>: <br>". './."clave"). $id_articulo)"./.

"innerHTML".$act). } //asociamos la función creada anteriormente al objeto xajax $xajax->registerFunction("votar").desarrolloweb.votar.php" method="post" name=votar style="margin:0px.Tu mejor ayuda para aprender a hacer webs www...value.puntos. 45 . //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests()."> <div ><b>Participa:</b></div> <table cellspacing="2" cellpadding="2" border="0" width="190"> <tr> <td width="130" align=center class=fuente8> <div id="votar_articulo"> <? /*if ($respuesta!="") echo " <i>$respuesta</i> <br> ".desarrolloweb. $respuesta->addAssign("votar_articulo".html © Los manuales de DesarrolloWeb.com }else{ $act ./.="<br>". $xajax->printJavascript(".puntos) } </script> <div style="width:192px. xajax_votar(id_articulo.. } $act . return $respuesta.*/ //muestra_media_votos_pagina($id_breve).$res). margin-top:3px././xajax/").com tienen el copyright de sus autores. No reproducir sin autorización. ?> <script> function votar_articulo(id_articulo){ var puntos = document."innerHTML"."> <select name="puntos"> <option value=1>1 <option value=2>2 <option value=3>3 <option value=4>4 <option value=5>5 </select> <input type='button' name='votar' value='Votar' onClick='votar_articulo(1)'> </form> </div> </div> </td> </tr> <tr><td class=fuente8 align=center><div id=actualizar></div></td></tr> </table> </div> Trabajo con Ajax en PHP utilizando Xajax: http://www. $respuesta->addAssign("actualizar".com/manuales/xajax.= "<i>Nadie ha votado por este artículo</i>". ?> Puntua el artículo: <br> <form action="sistema_votacion.font-size:12pt.

Para encontrar el procedimiento para actualizar a la versión siguiente del framework Xajax.com/manuales/xajax. que va a ser el mismo y una función que realizaba las acciones necesarias.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. por lo que tenemos que crear otra tabla en nuestra base de datos. leer: Cómo pasar a Xajax 0. Esta vez vamos a comprobar si el que vota ya ha votado anteriormente.desarrolloweb.//tabla que controla las ip de las votaciones $identificador='id_articulo'. Para los que se incorporan nuevos a este artículos os recomiendo que leáis el articulo de Sistema de votación con xajax para que puedan entender este ya que no vamos a repetir los pasos nuevamente.desarrolloweb.com Por último. Como podréis comprobar actualmente no es muy optimo el sistema ya que alguien podría votar varias veces seguidas.5. Los primero es crear unas variables de configuración al inicio de la función.//tabla con el log de los votos $id_cookie='rating_articulo'. en el próximo articulo lo optimizaremos para solucionar este tema.//nombre del campo en la tabla que controle las votaciones $tabla_votos='articulo_voto'. No reproducir sin autorización.5. así como una tabla en la base de datos.2. //CONFIGURACION $tabla_control='articulo_ip'. Nota: Este script fue realizado con Xajax versión 0. Después tenemos que crearnos una función que nos devuelva la ip real del visitante para ello utilizaremos esta función que ya tenemos construida y comentada. function getRealIP() { if( $_SERVER['HTTP_X_FORWARDED_FOR'] != '' ) { $client_ip = ( !empty($_SERVER['REMOTE_ADDR']) ) ? Trabajo con Ajax en PHP utilizando Xajax: http://www. Podéis continuar leyendo otro artículo en el que implementamos mejoras en el sistema de votación Ajax-PHP.Tu mejor ayuda para aprender a hacer webs www. $dias_votar_misma_ip = 2. Artículo por Sara Alvarez Sistema de votación con XAJAX mejorado Para empezar tenemos que recordar que para este ejemplo ya creamos un formulario de votación. 46 . dejamos un enlace para ver el código en funcionamiento. para ello utilizaremos las ips. La tabla la vamos a llamar articulo_ip y va a tener el siguiente aspecto: Una vez que tenemos la tabla vamos a modificar la función que tenemos creada llamada votar.

Trabajo con Ajax en PHP utilizando Xajax: http://www.168.Tu mejor ayuda para aprender a hacer webs www. //controlamos que vote una sola vez //controlamos si hay una cookie que impida la votacion $nombre_cookie=$id_cookie.*/'. '/^172.faqs.com tienen el copyright de sus autores. '/^10. '/^192.1/'. $client_ip.*/'.[0-9]+.((1[6-9])|(2[0-9])|(3[0-1])). } Una vez que tenemos la función la añadimos a nuestro archivo antes de la función de votar para así poder trabajar con ella y pasamos a modificar la función votar comprobando si hay cookies creadas o si tenemos la ip del usuario en nuestra tabla almacenada. $entry. if ( preg_match("/^([0-9]+.$id_articulo. // // // // // los proxys van añadiendo al final de esta cabecera las direcciones ip que van "ocultando".html $private_ip = array( '/^0. reset($entries). $ip_list) ) { // http://www. En caso de no encontrarse ninguna se toma como valor el REMOTE_ADDR $entries = split('[. } return $client_ip./'. $_SERVER['HTTP_X_FORWARDED_FOR']).. $found_ip = preg_replace($private_ip.html © Los manuales de DesarrolloWeb. Para ello creamos el siguiente código. No reproducir sin autorización. while (list(.org/rfcs/rfc1918.com/manuales/xajax. break.[0-9]+.desarrolloweb. ]'.'_'.com $_SERVER['REMOTE_ADDR'] : ( ( !empty($_ENV['REMOTE_ADDR']) ) ? $_ENV['REMOTE_ADDR'] : "unknown" ). $entry) = each($entries)) { $entry = trim($entry).[0-9]+)/". } } } } else { $client_ip = ( !empty($_SERVER['REMOTE_ADDR']) ) ? $_SERVER['REMOTE_ADDR'] : ( ( !empty($_ENV['REMOTE_ADDR']) ) ? $_ENV['REMOTE_ADDR'] : "unknown" ). $ip_list[1]).desarrolloweb.0. Para localizar la ip real del usuario se comienza a mirar por el principio hasta encontrar una dirección ip que no sea del rango privado. '/^127.0. if ($client_ip != $found_ip) { $client_ip = $found_ip. if ($_COOKIE[$nombre_cookie]){ //si hay cookie no permitimos la votacion $res="Ya has votado".*/').. 47 ..

if(!$ip){ $res= "Incapaz de contabilizar"."contraseña"). primero comprueba que no haya ninguna cookie./.com //return $salida = false. Nota: Este script se ha creado con la sintaxis de la versión 0..com tienen el copyright de sus autores. ip. mysql_query($ssql). no permitimos el voto }else{ $segundos_votar_misma_ip = 86400 * $dias_votar_misma_ip. }else{ $res="Ya has votado".com/manuales/xajax. //return false. mysql_free_result($rs). //return $salida = false. '. No reproducir sin autorización.. y si no lo hay inserta el voto. fecha) values ($id_articulo.5 de Xajax. //colocamos una cookie //setcookie($nombre_cookie. $xajax->decodeUTF8InputOn().html © Los manuales de DesarrolloWeb. //echo $ssql. sino nos muestra un mensaje de que ya ha votado. time(). $xajax->setCharEncoding('ISO-8859-1')./. //instanciamos el objeto de la clase xajax $xajax = new xajax().5 de Xajax. } } Este código esta explicado para que vayáis viendo que hemos en cada momento pero básicamente lo que hace es. mysql_query($ssql). $rs = mysql_query($ssql). unix_timestamp())".inc. $id_breve)"./xajax/xajax. //return true.2. //si no ha votado lo incorporamos en la tabla de control y creamos el voto if (mysql_num_rows($rs) == 0) { //metemos la ip en la tabla de control de voto $ssql = "insert into articulo_ip (id_articulo. leer las notas: Actualiza tu framework y los scripts a Xajax 0. 48 . Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb. //echo $ssql. }else{//si no hay cookie //miramos si muestra ip $ip=getRealIP(). //miramos si esta IP ya ha votado este recurso ultimamente (1 dia) $ssql = "select * from articulo_ip where (id_articulo=$id_articulo and ip = '$ip' and unix_timestamp()fecha<$segundos_votar_misma_ip)". <? require ($raiz . ) values ($votacion. //insertamos el voto $ssql= "insert into articulo_voto (votacion. $rs = mysql_query($ssql).Tu mejor ayuda para aprender a hacer webs www.//si no la muestra la ip. id_articulo.desarrolloweb.php'). si no la hay pues pasa a comprobar si hay algún registro en la tabla de ips. '$ip'. $res="Gracias por tu voto".5. A continuación pongo el código completo de la función para que os quede del todo claro. //conecto con la base de datos $conn = mysql_connect("servidor". //borramos los registros de los dias de antiguedad que deseamos $ssql= "delete from articulo_ip where fecha+$segundos_votar_misma_ip < unix_timestamp()". Para hacerlo funcionar si trabajáis con la nueva versión 0."usuario".. time() + $segundos_votar_misma_ip).

'/^10. } } } } else { $client_ip = ( !empty($_SERVER['REMOTE_ADDR']) ) ? $_SERVER['REMOTE_ADDR'] : ( ( !empty($_ENV['REMOTE_ADDR']) ) ? $_ENV['REMOTE_ADDR'] : "unknown" ). '/^192. $votacion){ Trabajo con Ajax en PHP utilizando Xajax: http://www. '/^172.. ////////////////////////////////////////////////////////////////////////////////////////////////// //OBTIENE Y DEVUELVE LA IP REAL DE UN VISITANTE ////////////////////////////////////////////////////////////////////////////////////////////////// function getRealIP() { if( $_SERVER['HTTP_X_FORWARDED_FOR'] != '' ) { $client_ip = ( !empty($_SERVER['REMOTE_ADDR']) ) ? $_SERVER['REMOTE_ADDR'] : ( ( !empty($_ENV['REMOTE_ADDR']) ) ? $_ENV['REMOTE_ADDR'] : "unknown" )./'.Tu mejor ayuda para aprender a hacer webs www. if ($client_ip != $found_ip) { $client_ip = $found_ip.168. $found_ip = preg_replace($private_ip.*/'.*/'..$conn).[0-9]+. $client_ip.[0-9]+.html $private_ip = array( '/^0.*/'). Para localizar la ip real del usuario se comienza a mirar por el principio hasta encontrar una dirección ip que no sea del rango privado. } return $client_ip. $_SERVER['HTTP_X_FORWARDED_FOR']). $ip_list[1]). $entry) = each($entries)) { $entry = trim($entry). No reproducir sin autorización. reset($entries).com/manuales/xajax.[0-9]+)/".com //selecciono la BBDD mysql_select_db("base de datos". if ( preg_match("/^([0-9]+. ]'.. 49 . break. '/^127.org/rfcs/rfc1918.0.html © Los manuales de DesarrolloWeb. $entry.0.desarrolloweb. $ip_list) ) { // http://www.1/'. En caso de no encontrarse ninguna se toma como valor el REMOTE_ADDR $entries = split('[. // // // // // los proxys van añadiendo al final de esta cabecera las direcciones ip que van "ocultando".com tienen el copyright de sus autores.desarrolloweb.faqs.((1[6-9])|(2[0-9])|(3[0-1])). } function votar($id_articulo. while (list(.

time(). no permitimos el voto }else{ $segundos_votar_misma_ip = 86400 * $dias_votar_misma_ip. //return $salida = false. //insertamos el voto $ssql= "insert into articulo_voto (votacion. mysql_query($ssql). //return false. //return $salida = false.desarrolloweb. }else{ $res="Ya has votado".'_'. $rs = mysql_query($ssql). if(!$ip){ $res= "Incapaz de contabilizar". //controlamos que vote una sola vez //controlamos si hay una cookie que impida la votacion $nombre_cookie=$id_cookie.//tabla que controla las ip de las votaciones $identificador='id_articulo'. //echo $ssql. $res="Gracias por tu voto". mysql_query($ssql). $respuesta = new xajaxResponse('ISO-8859-1'). unix_timestamp())". //si no ha votado lo incorporamos en la tabla de control y creamos el voto if (mysql_num_rows($rs) == 0) { //metemos la ip en la tabla de control de voto $ssql = "insert into articulo_ip (id_articulo. } } } //Saco el número de votos de este articulo $ssql_voto="select count(id_voto) as 'cuantos' from articulo_voto where id_articulo=$id_articulo". time() + $segundos_votar_misma_ip).com global $raiz.//nombre del campo en la tabla que controle las votaciones $tabla_votos='articulo_voto'.$id_articulo. $fila_voto=mysql_fetch_object($rs_voto). $dias_votar_misma_ip = 2. Trabajo con Ajax en PHP utilizando Xajax: http://www. //echo "prueba". No reproducir sin autorización. $rs_voto=mysql_query($ssql_voto). '$ip'. fecha) values ($id_articulo. mysql_free_result($rs). ip.//tabla con el log de los votos $id_cookie='rating_articulo'.html © Los manuales de DesarrolloWeb. }else{//si no hay cookie //miramos si muestra ip $ip=getRealIP(). //return true. //colocamos una cookie //setcookie($nombre_cookie.desarrolloweb.Tu mejor ayuda para aprender a hacer webs www. ) values ($votacion.com tienen el copyright de sus autores. //CONFIGURACION $tabla_control='articulo_ip'.com/manuales/xajax. 50 . //borramos los registros de los dias de antiguedad que deseamos $ssql= "delete from articulo_ip where fecha+$segundos_votar_misma_ip < unix_timestamp()".//si no la muestra la ip. $id_breve)". //echo $ssql. id_articulo. //miramos si esta IP ya ha votado este recurso ultimamente (1 dia) $ssql = "select * from articulo_ip where (id_articulo=$id_articulo and ip = '$ip' and unix_timestamp()fecha<$segundos_votar_misma_ip)". $rs = mysql_query($ssql). if ($_COOKIE[$nombre_cookie]){ //si hay cookie no permitimos la votacion $res="Ya has votado".

. $xajax->printJavascript("."<br>"./images/estrellamitad. $fila_media=mysql_fetch_object($rs_media).gif" width=14 height=13>'. return $respuesta. } //asociamos la función creada anteriormente al objeto xajax $xajax->registerFunction("votar")..= "<i>Nadie ha votado por este artículo</i>"."> <div ><b>Participa:</b></div> <table cellspacing="2" cellpadding="2" border="0" width="190"> <tr> <td width="130" align=center class=fuente8> <div id="votar_articulo"> <? /*if ($respuesta!="") echo " <i>$respuesta</i> <br> "./.value.php" method="post" name=votar style="margin:0px.. $x++){ $act .="<b>Votación media</b>: <br>"./xajax/").$fila_voto->cuantos... //saco la votacion media del articulo $ssql_media="select avg(votacion) as media from articulo_voto where id_articulo="..Tu mejor ayuda para aprender a hacer webs www.puntos.$res). $act . margin-top:3px."innerHTML". $respuesta->addAssign("actualizar".desarrolloweb. $rs_media=mysql_query($ssql_media). if (!is_null($fila_media->media)){ $absoluto=intval($fila_media->media).='<img src="./.font-size:12pt. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests().com tienen el copyright de sus autores."innerHTML". if($absoluto>0){ for ($x = 1.*/ //muestra_media_votos_pagina($id_breve).='<img src=".$id_articulo.com $act="<b>Número de votos</b>:".votar.="<br>". ?> <script> function votar_articulo(id_articulo){ var puntos = document. No reproducir sin autorización./.. xajax_votar(id_articulo. ?> Puntua el artículo: <br> <form action="sistema_votacion.5){ $act ."> <select name="puntos"> <option value=1>1 Trabajo con Ajax en PHP utilizando Xajax: http://www./images/estrella.html © Los manuales de DesarrolloWeb./.$act).. 51 ./. $decimal=$fila_media->media-$absoluto.com/manuales/xajax.desarrolloweb.puntos) } </script> <div style="width:192px.. } $act . $x <= $absoluto. } if($decimal>=0.gif" width=14 height=13>'./. } } }else{ $act . $respuesta->addAssign("votar_articulo".

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

<option value=2>2 <option value=3>3 <option value=4>4 <option value=5>5 </select> <input type='button' name='votar' value='Votar' onClick='votar_articulo(1)'> </form> </div> </div> </td> </tr> <tr><td class=fuente8 align=center><div id=actualizar></div></td></tr> </table> </div>

Para finalizar os dejamos un enlace a un ejemplo funcionando. Artículo por Sara Alvarez

Incluir un archivo de texto o HTML a través de una llamada a xajax
Para comenzar, os recuerdo que como en artículos anteriores ya no vamos a poner todos los pasos necesarios para que funcione una función en xajax, si alguien anda un poco perdido en este tema le recomiendo que se lea el artículo Xajax: Ajax para PHP. Después de este pequeño inciso pasamos directamente a construir la función.
Actualizado: Este script utiliza la versión 0.2.5 de Xajax. Pero podéis ver como pasarlo a la versión 0.5 del framework (que acaba de salir) en Actualización a Xajax 0.5.

La función es bastante sencilla tan solo tenemos que pasarle por parámetro el nombre del archivo y el id de la capa donde queremos colocar el contenido del archivo. De esta forma la cabecera de la función sería algo así.
function anadir_codigo($archivo,$id){

Ahora pasamos a escribir el código de la función: Para ello lo primero que tenemos que hacer es meter una variable global con la raíz para que busque bien los archivos. Y después tan solo tenemos que abrir el archivo y pasarlo a una variable la cual es el valor devuelto por la función.
global $raiz; $respuesta = new xajaxResponse('ISO-8859-1'); $path = $raiz . $archivo; $fp = fopen ($path,'r'); $codigo=""; while ($linea = fgets($fp,1024)) { if ($linea) $codigo .= $linea;

Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb.com/manuales/xajax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

52

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

} fclose($fp); //$codigo=htmlspecialchars($codigo); //$codigo=htmlentities($codigo); //$codigo=str_replace(">",">",$codigo); $res=$codigo; //echo $res; $respuesta->addAssign($id,"innerHTML",$res); //echo $res; return $respuesta;

De esta forma tenemos la función xajax creada. Ya solo nos queda incluirla en un contexto para que veáis como funciona. Para ello vamos a crear un archivo de ejemplo. Dejo el código completo y a continuación lo explicamos.
<? $raiz = "../../../"; //empieza en . termina en / //include ("../librerias/principales.php"); require ($raiz. 'xajax/xajax.inc.php'); //instanciamos el objeto de la clase xajax $xajax = new xajax(); $xajax->setCharEncoding('ISO-8859-1'); $xajax->decodeUTF8InputOn(); function anadir_codigo($archivo,$id){ global $raiz; $respuesta = new xajaxResponse('ISO-8859-1'); $path = $raiz . $archivo; $fp = fopen ($path,'r'); $codigo=""; while ($linea = fgets($fp,1024)) { if ($linea) $codigo .= $linea; } fclose($fp); $res=$codigo; $respuesta->addAssign($id,"innerHTML",$res); return $respuesta; } //registramos la función creada anteriormente al objeto xajax $xajax->registerFunction("anadir_codigo"); //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(); $xajax->printJavascript($raiz . "xajax/"); ?> <html> <head> <script> function llamar_codigo(archivo,id_capa){ xajax_anadir_codigo(archivo,id_capa) } </script> </head> <body> <div id="mensaje">Si pulsamos <a href="javascript:llamar_codigo('articulos/ejemplos/ajax/codigo_formulario.html', 'mensaje')">aqui</a> nos va cambiar esto por lo que tengamos en el código del archivo que le pasamos.</div> Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb.com/manuales/xajax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 53

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

</body>

Lo único que hemos construido aquí es crear un archivo donde hemos colocado la función xajax y la hemos llamado desde un simple div para sustituir el texto por un pequeño formulario. El código que contiene el archivo código_formulario.html es el siguiente:
<form action="#" method="post"> <input type="text" name="nombre" value="nombre"> <input type="submit" name="enviar" value="enviar"> </form>

Como podéis comprobar es muy sencillito pero resulta realmente útil a la hora de crear nuestras páginas web. Os dejo un link al ejemplo funcionando. Artículo por Sara Alvarez

Mensaje de carga con ajax usando xajax
Vamos a ver una de las utilidades de xajax para mostrar un mensaje de carga, para advertir al usuario mientras se procesa una solicitud ajax. Como habremos visto en casi todas las aplicaciones que utilizan Ajax, cuando se está procesando una solicitud, suele aparecer un mensaje de carga, para que el usuario sepa que se está llevando a cabo su solicitud, mientras que los resultados no se muestran en la página. Este es un punto muy interesante, porque a menudo los procesamientos de Ajax tardan en presentarse al usuario y mientras tanto, si no se le informa que se está cargando la página, puede parecer que no se está efectuando ninguna acción. Este artículo se engloba dentro del manual de Ajax en PHP utilizando Xajax. Es importante que se sepa que hasta el momento en este manual estamos tratando siempre la versión 0.2.5 de Xajax, que es la que está publicada como estable y, por tanto, es la que se aconseja en el momento de escribir este artículo para entornos en producción. Para versiones posteriores de Xajax (en concreto la 0.5) estas indicaciones cambian, pero podéis ver cómo hacerlo en Update de script a Xajax 0.5. Primero veamos una función de PHP que se invocaría por Ajax que tardaría en procesarse un cierto tiempo:
function funcion_lenta() { //retenemos el procesamiento por 3 segundos sleep(3); $objResponse = new xajaxResponse(); $objResponse->addAssign("capa_actualiza","innerHTML","Finalizado"); return $objResponse; }

Esta función, que sería la más simple que se podría hacer, tardará al menos 3 segundos en procesarse. Para asegurarnos de ello hemos hecho que el procesamiento de PHP se detenga

Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb.com/manuales/xajax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

54

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

por 3 segundos con la función sleep(3). Para llamar a esta función por medio de xajax haremos algo como esto:
<a href="javascript:void(xajax_funcion_lenta())">Llamar por ajax a una función lenta usando xajax</a>! Nota: hay una serie de líneas de código que serían necesarias para que esto funcionase con xajax, como el processRequests() o el printJavascript(), que no estoy comentando porque hemos visto en capítulos anteriores del manual. De todos modos muestro el código completo de este ejemplo previo, que es sólo una prueba para enseñar el efecto producido por una espera en el procesamiento ajax. <? require ('xajax/xajax.inc.php'); function funcion_lenta() { sleep(3); $objResponse = new xajaxResponse(); $objResponse->addAssign("capa_actualiza","innerHTML","Finalizado"); } return $objResponse;

$xajax = new xajax(); $xajax->registerFunction('funcion_lenta'); $xajax->processRequests(); ?> <html> <head> <title>Ejemplo de mostrar un aviso de carga de la página</title> <? $xajax->printJavascript("xajax/"); ?> </head> <body> <div id="capa_actualiza"> <a href="javascript:void(xajax_funcion_lenta())">Llamar por ajax a una función lenta usando xajax</a>! </div> </body> </html>

Ahora podemos ver como funciona este ejemplo en una página aparte. Código para mostrar un mensaje de carga con Xajax Xajax tiene unas utilidades específicas en la versión 0.2.5 para mostrar los mensajes de "Cargando" que vamos a utilizar, que nos van a simplificar bastante la vida. Para crear el mensaje de carga primero debemos colocar una capa donde aparecerá el texto "Cargando…" o la típica imagen de carga, esa que es como una rueda que va moviéndose.
<div id="MensajeCarga" style="display: none;"> Cargando!... </div>

Hay que señalar que la cama tiene el estilo display: none; para que no se muestre en la página, en un principio y hasta que no lo indiquemos con xajax. Ahora, en el framework Xajax simplemente tenemos que especificar con Javascript dos propiedades del objeto xajax, que se ha instanciado implícitamente al hacer el $xajax>printJavascript(). Son las siguientes:
xajax.loadingFunction = [function para mostrar el mensaje de carga]; xajax.doneLoadingFunction = [function para ocultar el mensaje de carga];

A ambas propiedades debemos asignarles como valores sendas funciones javascript que serán
Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb.com/manuales/xajax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 55

En la versión Xajax 0.global. Esto lo podremos hacer con un código como este. $objResponse = new xajaxResponse(). } xajax.style."Finalizado").loadingFunction = muestra_cargando. Luego hemos asignado esas funciones a xajax.$('MensajeCarga'). } return $objResponse.desarrolloweb.01 Transitional//EN"> Trabajo con Ajax en PHP utilizando Xajax: http://www.com/manuales/xajax.$('MensajeCarga'). También automáticamente se invocará a xajax.html © Los manuales de DesarrolloWeb. $xajax->processRequests().onComplete = oculta_cargando.doneLoadingFunction = oculta_cargando.display='none'. a las que hemos colocado dos códigos para cambiar la propiedad display de los estilos CSS de la capa "MensajeCarga".callback.style. xajax.doneLoadingFunction.5. El código PHP del ejemplo completo lo podemos ver a continuación: <? require ('xajax/xajax. } function oculta_cargando(){ xajax.callback."innerHTML".loadingFunction automáticamente cuando se realice una llamada a Ajax por medio de Xajax.doneLoadingFunction cuando se termine de procesar la solicitud Ajax.desarrolloweb. // --></script> Como se puede ver. En muestra_cargando() hacemos display='block' para que se muestre la capa y en oculta_cargando() hacemos display='none' para ocultarla. se deben utilizar otras propiedades de otros objetos: xajax.onResponseDelay = muestra_cargando. tal como habíamos especificado. No reproducir sin autorización. function funcion_lenta() { sleep(3). 56 .global. que tendremos que colocar después del printJavascript().5. para indicar lo que se debe hacer al iniciar la solicitud por Ajax y al completarla.php'). Podemos ver la funcionalidad completa en marcha en una página aparte.com tienen el copyright de sus autores. Actualizado: Gracias al comentario de Jose Luis Larios (Ver los comentarios más abajo en esta página) sabemos otros detalles necesarios para actualizar este código para Xajax 0. $objResponse->addAssign("capa_actualiza".inc. $xajax = new xajax(). <script type="text/javascript"> <!-function muestra_cargando(){ xajax.Tu mejor ayuda para aprender a hacer webs www. hemos creado dos funciones muestra_cargando() y oculta_cargando(). Eso es todo! Ahora se invocará xajax.display='block'. xajax.loadingFunction y xajax. ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.com las encargadas de mostrar y ocultar el mensaje de carga. $xajax->registerFunction('funcion_lenta').

5 y que en el manual de Ajax para PHP con Xajax ya vimos las particularidades de esta librería. } xajax.doneLoadingFunction = oculta_cargando. Artículo por Miguel Angel Alvarez Sistema de ordenación de elementos con Ajax y PHP Vamos a crear un ordenador de elementos con Ajax y PHP. // --></script> </head> <body> <div id="capa_actualiza"> <a href="javascript:void(xajax_funcion_lenta())">Llamar por ajax a una función lenta usando xajax</a>! </div> <div id="MensajeCarga" style="display: none.html © Los manuales de DesarrolloWeb. pero antes tenemos que recalcar que este ejemplo utiliza Xajax 0.com tienen el copyright de sus autores. 57 .display='block'. } function oculta_cargando(){ xajax. Podemos ver lo que es un ordenador de elementos viendo el ejemplo en funcionamiento en una página aparte.style. el ordenador de elementos funcionará dinámicamente. un sistema para cambiar el orden de los registros de una tabla de una base de datos con funciones Xajax. dejo el enlace para ver el ejemplo completo en funcionamiento. ?> <script type="text/javascript"> <!-function muestra_cargando(){ xajax. A continuación veamos los pasos para la creación de este sistema de ordenación de elementos.2. sin necesidad de que se recargue la página.. Como utilizamos Ajax.$('MensajeCarga').Tu mejor ayuda para aprender a hacer webs www.com/manuales/xajax.com <html> <head> <title>Ejemplo de mostrar un aviso de carga de la página</title> <? $xajax->printJavascript("xajax/"). xajax. Esto es.$('MensajeCarga').5.desarrolloweb.desarrolloweb."> Cargando!.style. Trabajo con Ajax en PHP utilizando Xajax: http://www.5 de xajax: Aviso de cargando para Ajax con Xajax 0..display='none'. No reproducir sin autorización. una librería para hacer Ajax cómodamente en PHP. con lo que no nos vamos a detener para dar mayores explicaciones sobre Xajax. </div> </body> </html> De nuevo.loadingFunction = muestra_cargando. Referencia: Hemos publicado un artículo sobre cómo actualizar este script de este manual a la versión 0.

while($fila=mysql_fetch_object($rs)){ if($fila->orden==0){ echo' <input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.'). while($fila=mysql_fetch_object($rs)){ if($fila->orden==0){ $contenido."> <input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('. $ssql="select * from color order by orden".$fila->id_color. //actualizo el registro actual $ssql="update color set orden=".com/manuales/xajax. $num=1. hemos creado unos botones para poder cambiar el orden de los elementos que queremos ordenar.'. echo 'ordenar colores<br> <br> '.$fila->nombre_color. No reproducir sin autorización. }else{ echo ' <input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$orden_siguiente.$fila>orden.$fila>orden. $contenido.desarrolloweb."> '."> '. $rs=mysql_query($ssql).').'.$fila->id_color.$fila->id_color.Tu mejor ayuda para aprender a hacer webs www. $rs=mysql_query($ssql).com tienen el copyright de sus autores. $num=1. Las funciones reciben el id del elemento que se quiere cambiar de orden y la posición que tiene actualmente.'.$fila->nombre_color.$fila->id_color. //muestro todos los registros actualizados $ssql="select * from color order by orden".'. En este caso.=' '.'.$fila>orden. 58 . actualiza los registros de la tabla y vuelve a mostrar los elementos en el orden actualizado.'). $cont=mysql_num_rows($rs). } echo '<br>'. function aumentar($id_color. echo '<div id="colores">'.'.desarrolloweb.$fila->nombre_color. $cont=mysql_num_rows($rs). Trabajo con Ajax en PHP utilizando Xajax: http://www. $num++." where orden=".='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.$fila>orden.'. //actualizo el registro siguiente $ssql="update color set orden=orden+1 where id_color=". $rs=mysql_query($ssql).'.html © Los manuales de DesarrolloWeb.'.com Primero mostramos los datos de la tabla ordenados por el campo orden de la base de datos. }elseif($num==$cont){ echo '<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('. $rs=mysql_query($ssql).$fila->id_color.$orden.$id_color. } echo '</div>'.')."> '.'.$orden){ $orden_siguiente=$orden+1.

').">'./.'.">'. Trabajo con Ajax en PHP utilizando Xajax: http://www.$id_color. return $respuesta. $contenido. $num=1.">'.'). $contenido. $contenido.'.'). $rs=mysql_query($ssql)./." where orden=". $xajax->setCharEncoding('ISO-8859-1').=' '..desarrolloweb.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('. $contenido.='<br>'.$orden_siguiente.">'. $rs=mysql_query($ssql).=$fila->nombre_color.$fila->id_color.$contenido).inc. //actualizo el registro siguiente $ssql="update color set orden=orden+1 where id_color=". '.">'. $fila->orden. $fila->orden.').php').$fila->id_color.=$fila->nombre_color.Tu mejor ayuda para aprender a hacer webs www. $contenido.'.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.').$fila->id_color."clave"). 59 . function aumentar($id_color. $contenido. } Lo primero que hace la función es actualizar el registro que queremos ordenar y cambia el orden del registro anterior o posterior al registro actualizado.'. //conecto con la base de datos $conn = mysql_connect("servidor".$conn). $contenido.'."innerHTML". dependiendo de si lo que queremos es aumentar o disminuir una posición. $fila->orden.">'. }elseif($num==$cont){ $contenido.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('. $respuesta->addAssign("colores". No reproducir sin autorización.=$fila->nombre_color. $contenido.=$fila->nombre_color. }elseif($num==$cont){ $contenido.'.'. $contenido..$orden. } $respuesta = new xajaxResponse('ISO-8859-1')./xajax/xajax.'). A continuación mostramos el código completo para ver cómo quedaría.. $fila->orden. <? require ($raiz .com/manuales/xajax."usuario".com tienen el copyright de sus autores.=$fila->nombre_color. //actualizo el registro actual $ssql="update color set orden=". $xajax->decodeUTF8InputOn(). Por último muestra los registros de la tabla en el orden actualizado.desarrolloweb. while($fila=mysql_fetch_object($rs)){ if($fila->orden==0){ $contenido. //instanciamos el objeto de la clase xajax $xajax = new xajax().='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.=' '. $fila->orden.html © Los manuales de DesarrolloWeb. //muestro todos los registros actualizados $ssql="select * from color order by orden". $rs=mysql_query($ssql).$fila->id_color.'.'. $contenido. }else{ $contenido. } $num++. $cont=mysql_num_rows($rs). //selecciono la BBDD mysql_select_db("bbdd".=' '.com $fila->orden.$orden){ $orden_siguiente=$orden+1.$fila->id_color.'.

'.'.=' '.com }else{ $contenido. } //asociamos la función creada anteriormente al objeto xajax $xajax->registerFunction("aumentar"). $contenido.'.$id_color. $rs=mysql_query($ssql).$fila->id_color.='<br>'. $contenido. //actualizo el registro actual $ssql="update color set orden=". $cont=mysql_num_rows($rs).$fila->id_color. $fila->orden. //muestro los datos actualizados $ssql="select * from color order by orden".'). $contenido.=' '. $respuesta->addAssign("colores". $rs=mysql_query($ssql).').='<br>'. $fila->orden. $fila->orden.'). } $respuesta = new xajaxResponse('ISO-8859-1'). $contenido. $rs=mysql_query($ssql). } $num++.html © Los manuales de DesarrolloWeb.$contenido).">'.=$fila->nombre_color.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('. return $respuesta.">'. $contenido.com tienen el copyright de sus autores.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('. $fila->orden.'. 60 .'. $num=1. $contenido. while($fila=mysql_fetch_object($rs)){ if($fila->orden==0){ $contenido.'.$fila->id_color.').=$fila->nombre_color. $respuesta->addAssign("colores".'. function disminuir($id_color. $fila->orden.'.">'."innerHTML".">'.desarrolloweb. Trabajo con Ajax en PHP utilizando Xajax: http://www. }elseif($num==$cont){ $contenido.desarrolloweb. $contenido.$orden_anterior.=$fila->nombre_color. } $respuesta = new xajaxResponse('ISO-8859-1'). return $respuesta.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('."innerHTML".$orden){ $orden_anterior=$orden-1. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(). $contenido.$orden.='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('." where orden=". //actualizo el registro anterior $ssql="update color set orden=orden-1 where id_color=".='<input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('. } $num++.='<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.com/manuales/xajax.=$fila->nombre_color. } //asociamos la función creada anteriormente al objeto xajax $xajax->registerFunction("disminuir").$fila->id_color. $contenido.$contenido).'.'.$fila->id_color. }else{ $contenido.">'.').Tu mejor ayuda para aprender a hacer webs www.'.').$fila->id_color. $fila->orden.'. No reproducir sin autorización. $contenido.">'.

Artículo por Gema Maria Molina Prados Actualizar Xajax 0.desarrolloweb.'. Afortunadamente.. $num++. Podemos ver esas referencias. echo '<div id="colores">'. } echo '</div>'. }elseif($num==$cont){ echo '<input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.$fila->id_color. while($fila=mysql_fetch_object($rs)){ if($fila->orden==0){ echo' <input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('.5 del framework Xajax.'.'."> <input type="Button" name="orden" value="Bajar" onclick="xajax_aumentar('. }else{ echo ' <input type="Button" name="orden" value="Subir" onclick="xajax_disminuir('.').com.com //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript(".desarrolloweb. a principios de agosto de 2008 se ha publicado la "release candidate" de Xajax 0.$fila->id_color. dado que era la que se ofrecía como "estable" para descarga desde la web de Xajax. $ssql="select * from color order by orden"./.').'. } echo '<br>'..5.$fila->nombre_color. con lo que llega la hora de ponerse manos a la obra a actualizar nuestros scripts realizados con Xajax. ?> Puedes ver el ejemplo en una página aparte.'). 61 . estábamos trabajando con la versión 0.'.'.2 a Xajax 0.."> '././xajax/").$fila>orden. echo '<b>Ordenar colores</b><br> <br> '. $cont=mysql_num_rows($rs). hasta el momento de escribir este artículo. Pues bien.Tu mejor ayuda para aprender a hacer webs www.$fila->nombre_color.$fila>orden. en la propia web de Xajax han publicado una receta con una serie de referencias adicionales sobre métodos que han cambiado de nombre o de manera de acceder a ellos. $rs=mysql_query($ssql). $num=1.com/manuales/xajax.5 En el manual de Xajax publicado en DesarrolloWeb.com tienen el copyright de sus autores. Así pues.html © Los manuales de DesarrolloWeb. vamos a publicar a continuación unas indicaciones para hacer el upgrade de versiones.').2.'.'. No reproducir sin autorización.$fila>orden.$fila>orden.$fila->id_color. aunque en inglés en esta página: Trabajo con Ajax en PHP utilizando Xajax: http://www."> '.$fila->nombre_color.$fila->id_color."> '.

La mayoría de cambios de sintaxis que tendremos que hacer de cara a actualizar a la versión 0. no va a revestir cambios significativos.com aquí los principales puntos. y $xajax->outputEntitiesOn(). puesto que la estructura de directorios del framework ha cambiado en la versión 0. para el caso de registrar una función se haría: $xajax->register(XAJAX_FUNCTION. Por ejemplo. Todas las configuraciones boleanas como $xajax->debugOn(). para separar los códigos PHP de los códigos Javascript.desarrolloweb.com/manuales/xajax.5 RC1 es ya la versión definitiva que se va a presentar. 1. En su lugar debemos poner luego los archivos de la nueva versión Xajax 0. Luego.5 son relativos a funciones. debemos borrar los archivos y el directorio. No reproducir sin autorización. Métodos de la clase xajaxResponse Trabajo con Ajax en PHP utilizando Xajax: http://www. Instalar Xajax 0. 2.true). Esta nueva función register recibe dos parámetros.5. El primero es el tipo de aquello que queremos registrar y el segundo es su nombre. se han transformado en $xajax->setFlag('debug'. Los archivos PHP están ahora en xajax_core y los Javascript en xajax_js.php No obstante.2-to-xajax-0. y $xajax>setFlag('outputEntities'. Esas referencias debemos actualizarlas.5.org/docs/upgrading-from-xajax-0.5 en ningún caso sobre el directorio donde tuviéramos las librerías de la versión anterior. nos informan que debemos hacer una copia de seguridad de la distribución de Xajax que tuviésemos trabajando anteriormente en nuestro servidor.true).desarrolloweb. en la página web de Xajax. 'nombre_de_la_funcion'). Insisten en que se debe borrar la instalación antigua. El método $xajax->registerFunction se ha marcado como obsoleto por la existencia de la nueva función $xajax->register(). ahora se llama $xajax->processRequest(). ahora también puede recibir arrays como $xajax>setFlags(array('debug'=>true. $xajax->setFlags().com tienen el copyright de sus autores. Los métodos más destacables que tienen nuevos nombres: Métodos de la clase xajax El antiguo método $xajax->processRequests(). que se han quedado obsoletas y ahora llevan otros nombres o dependen de otras clases. resumimos en este artículo de desarrollo web . 3. puesto que en el futuro van a desaparecer las funciones marcadas como obsoletas. Actualiza la sintaxis La versión Xajax 0.Tu mejor ayuda para aprender a hacer webs www. y no instalar xajax 0.5. aunque se encuentre en Release Candidate aun. Actualizar los includes Debemos revisar los includes para incluir Xajax en nuestros scripts PHP.com http://xajaxproject.'outputEntities'=>true)). 62 .html © Los manuales de DesarrolloWeb.5 Como primera recomendación. de modo que.

com La mayoría de los métodos de xajaxResponse han cambiado. } function generar_select($cod_provincia){ $respuesta = new xajaxResponse(). Es un script para hacer selects combinados que vimos en el artículo Selects combinados con Ajax y PHP.com/manuales/xajax. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequest(). "Badalona"). <? //incluímos la clase ajax require ('xajax/xajax_core/xajax.= '<option value="' . $leon = array ("León". ?> Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb. return $respuesta. No reproducir sin autorización. "Astorga". $i++){ $nuevo_select . Por ejemplo xajaxResponse->addAssign() ahora es xajaxResponse->assign(). $i<2. $xajax->configure('decodeUTF8Input'.com tienen el copyright de sus autores. $barcelona. Resulta que muchos comenzaban por add y se ha quitado. return $nuevo_select. "Móstoles". "Cullera"). } $nuevo_select . "San Sebastián de los Reyes"). $poblaciones = array($madrid. function select_combinado($id_provincia){ $madrid = array("Madrid". 63 . for ($i=0.html © Los manuales de DesarrolloWeb. //instanciamos el objeto de la clase xajax $xajax = new xajax(). "Paterna". "La Eliana". $barcelona = array("Barcelona".Tu mejor ayuda para aprender a hacer webs www. $xajax->setCharEncoding('ISO-8859-1').desarrolloweb. } $respuesta->Assign("seleccombinado". $respuesta->setCharacterEncoding('ISO-8859-1'). $i++){ //for ($i=0. } $xajax->register(XAJAX_FUNCTION.2 a Xajax 0. Os recomiendo leer el artículo para entender lo que hace el script. }else{ $nuevo_select = select_combinado($cod_provincia). '</option>'. para que queden bien claros los cambios que he realizado. Ejemplo de actualización de script Xajax Ahora voy a hacer una actualización de un script que había creado anteriormente en el manual con Xajax 0. Han suprimido una parte que se consideraba confusa en los nombres de métodos. marcando en negrita.5.$nuevo_select). $valencia. "Villamejil"). "Las Rozas". '">' . $poblaciones[$id_provincia][$i] . $i<count($poblaciones[$id_provincia]). $i .true).= "</select>". que no lo voy a explicar aquí.inc."innerHTML". 'generar_select'). if ($cod_provincia==999){ $nuevo_select = '<select name="poblaciones"> <option value=0>Elegir provincia</option> </select> '. $valencia = array("Valencia". $nuevo_select = "<select name='poblaciones'>". Simplemente voy a colocar aquí el código nuevo.php'). $leon).

5 En esta serie de artículos estamos trabajando con Ajax y PHP utilizando el framework Xajax. ?> </head> <body> <form name="formulario"> Provincia: <br> <select name="provincia" onchange="xajax_generar_select(document.desarrolloweb.value)"> <option value="999">Selecciona la provincia</option> <option value=0>Madrid</option> <option value=1>Valencia</option> <option value=2>Barcelona</option> <option value=3>León</option> </select> <br> <br> Selecciona Población: <div id="seleccombinado"> <select name="poblaciones"> <option value=0>Elegir provincia</option> </select> </div> </form> Por DesarrolloWeb. que venimos publicando en el Manual de Xajax.options[document.0 Transitional//EN" "http://www.5 podemos visitar el artículo que había comentado antes de la documentación de Xajax.w3.Desarrolloweb.5 algunas cosas han cambiado en cuanto a modo de trabajo y sintaxis del framework.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html.5 se puede ver en marcha en una página aparte. No reproducir sin autorización.com</title> <? //Esta línea no cambia porque el printJavascript sigue recibiendo //la ruta a la carpeta raíz donde están las librerías xajax. $xajax->printJavascript("xajax/"). 64 .com! </body> </html> Este ejemplo de Xajax 0. Artículo por Miguel Angel Alvarez Aviso de cargando para Ajax con Xajax 0.selectedIndex ]. Trabajo con Ajax en PHP utilizando Xajax: http://www. A modo de introducción. que contiene abajo del todo un listado de referencia rápida de funciones nuevas y antiguas.2 a Xajax 0.com <html> <head> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. Ahora.2 de Xajax.Tu mejor ayuda para aprender a hacer webs www. debemos decir que en los primeros artículos del manual creado por desarrolloweb.html © Los manuales de DesarrolloWeb.com estuvimos trabajando sobre la versión 0.provincia.charset=ISO-8859-1"> <title>Selects combinados en PHP y Ajax .provincia.com tienen el copyright de sus autores.formulario.formulario. con la publicación de la versión 0.desarrolloweb. Para una referencia completa de funciones que han cambiado de Xajax 0.com/manuales/xajax.

php'). $xajax->register(XAJAX_FUNCTION."innerHTML".html © Los manuales de DesarrolloWeb. <? require ('xajax/xajax_core/xajax.com Para actualizar los scripts a la nueva versión del framework publicamos el artículo Actualizar Xajax 0.inc. Vamos a transformar por tanto el sistema que propone Xajax para incluir un mensaje de carga para la versión 0. puesto que hay muchas cosas comentadas en el mencionado artículo que aquí no vamos a explicar. return $objResponse. en el que vimos cómo crear un pequeño mensaje "Cargando" cuando se realizaba una solicitud Ajax. Es muy parecido al explicado en el anterior artículo. $objResponse = new xajaxResponse(). $xajax->processRequest(). ?> <script type="text/javascript"> <!-function muestra_cargando(){ Trabajo con Ajax en PHP utilizando Xajax: http://www.desarrolloweb.5 Vamos a ver directamente el código de este ejemplo.com tienen el copyright de sus autores.com/manuales/xajax. vamos a realizar unos pequeños cambios al script para que podamos aprender cosas nuevas con el framework y de paso atender a uno de los comentarios publicados por los usuarios. Voy a resaltar en negrita las líneas de código donde se han realizado cambios y luego los explicaremos.5. de modo que sirva de muestra a los lectores de DesarrolloWeb. para advertir al usuario que los contenidos solicitados estaban cargando. No reproducir sin autorización.5. sería extremadamente recomendable comenzar la lectura por el artículo Mensaje de carga de solictud Ajax usando Xajax. } $xajax = new xajax(). 'funcion_lenta'). estamos retomando algunos scripts creados anteriormente para actualizarlos nosotros mismos a la versión 0. ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4."Finalizado"). Para hacernos una idea exacta de lo que vamos a realizar en este artículo podéis ver el ejemplo en marcha. 65 .com. Así pues.2 a Xajax 0.5.5 de Xajax. en el que expresaba una duda sobre cómo se podría incluir el mensaje de carga en la propia capa donde se van a mostrar los resultados de la solicitud Ajax.desarrolloweb. En este caso le toca el turno al artículo Mensaje de carga con ajax usando xajax. function funcion_lenta() { sleep(3). El código adaptado a Xajax 0. Además. No obstante.01 Transitional//EN"> <html> <head> <title>Ejemplo de mostrar un aviso de carga de la página</title> <? $xajax->printJavascript("xajax/").Tu mejor ayuda para aprender a hacer webs www. adaptado a la sintaxis del framework Xajax versión 0. $objResponse->Assign("capa_actualiza".

aunque recordamos que están explicados casi todos estos cambios en el artículo Actualizar Xajax 0. que son las funciones que servirán para mostrar el mensaje de carga. Esto ha cambiado porque ahora las librerías de Xajax están en carpetas distintas. Ahora viene lo más interesante.onComplete = oculta_cargando.inc. Antes teníamos una capa con el mensaje de carga que simplemente mostrábamos al iniciar la carga y luego la ocultábamos al terminarse. los cambios resaltados de este script. xajax. Antes era $xajax->processRequests() y ahora $xajax->processRequest() (hemos quitado la "s" final). No reproducir sin autorización.create("capa_actualiza".5.desarrolloweb.5.global. Por darle algo más de interés a este artículo de desarrollo web com no nos hemos limitado a traducirlas a Xajax 0. Esta función también ha cambiado el nombre. $xajax->processRequest(). xajax.com/manuales/xajax."div". Trabajo con Ajax en PHP utilizando Xajax: http://www.$('cargando'). } xajax.html © Los manuales de DesarrolloWeb.dom."Finalizado")."innerHTML". 66 .desarrolloweb. La función registerFunction ahora se llama register y debemos especificar qué es lo que estamos registrando. Estas dos funciones que hemos creado sirven para realizar las acciones necesarias para mostrar y ocultar el mensaje de carga. El método addAssign del objeto de la clase xajaxResponse ahora se llama simplemente Assign." width="16" height="16" border="0">'. 'funcion_lenta'). El cambio principal.onResponseDelay = muestra_cargando.com tienen el copyright de sus autores. require ('xajax/xajax_core/xajax. $xajax->register(XAJAX_FUNCTION. "cargando"). que decíamos fue pedido por un lector..php').Tu mejor ayuda para aprender a hacer webs www.global.callback. Pero vamos a verlos uno a uno. sino que además hemos hecho un par de cambios en su comportamiento. consiste en que el mensaje de carga aparece en la propia capa donde vamos a colocar el contenido traído por Ajax.com xajax. // --></script> </head> <body> <div id="capa_actualiza"> <a href="javascript:void(xajax_funcion_lenta())">Llamar con ajax a una función que tarda en cargar</a>! </div> </body> </html> Hemos visto que los cambios no son muchos y es de agradecer.2 a la versión 0.innerHTML='<img src="loading.gif" alt="cargando. $objResponse->Assign("capa_actualiza". línea a línea. } function oculta_cargando(){ alert("cargado"). Veamos pues..callback.

innerHTML='<img src="loading.Tu mejor ayuda para aprender a hacer webs www.com/manuales/xajax. Veamos el código del que estoy hablando: function muestra_cargando(){ xajax.$('cargando') es una referencia a la capa que se acaba de crear y con su propiedad innerHTML accedemos al código HTML que tiene dentro. Simplemente hacen que se asocien este par de funciones a las solicitudes de Ajax que se realicen.onResponseDelay asignamos la función que se debe ejecutar al inicio de la solicitud y en xajax.global.$('cargando'). Esta función no hacía mucha falta en este ejemplo.desarrolloweb.onComplete = oculta_cargando. se puede ver el ejemplo en marcha.callback. la he colocado para que sirva de ejemplo y por si el lector la quiere utilizar para cualquier cosa que necesite.js.callback. } function oculta_cargando(){ alert("cargado"). que recibe la capa donde se va a crear el nuevo elemento HTML.callback.html © Los manuales de DesarrolloWeb. puesto que la solicitud Xajax realizada por la función PHP funcion_lenta() iba a sustituir el contenido de la "capa_actualiza" y por tanto desaparecerán con ellos la imagen de carga generada con la función muestra_cargando(). Por último las líneas: xajax. Simplemente asignamos un código para mostrar una imagen. Trabajo con Ajax en PHP utilizando Xajax: http://www. Estas funciones sirven para realizar cosas con Javascript y en concreto hemos utilizado varias para alterar los contenidos del DOM de la página.create("capa_actualiza".5." width="16" height="16" border="0">'.. Referencia: Podemos saber lo que es el DOM en el taller de trabajo con el DOM publicado en DesarrolloWeb.callback. En xajax.gif" alt="cargando. Esto se hace con la función xajax. "cargando"). de la librería de funciones Javascript llamadas xajax_core.global.global.com tienen el copyright de sus autores.callback. En la siguiente función oculta_cargando(). No obstante. simplemente muestro un mensaje de alerta para que se sepa que se ha terminado de cargar.com.. xajax. Para acabar.global. 67 . xajax. los objetos del navegador que sirven para alterar dinámicamente los contenidos de la página. } xajax. el nombre del elemento o etiqueta que se va a crear y el identificador que se va a asignar a dicho elemento creado.onComplete = oculta_cargando. xajax.global. No reproducir sin autorización. es decir.onResponseDelay = muestra_cargando. Con esto he terminado todo lo que había que resaltar del script adaptado a Xajax 0.desarrolloweb. Luego con xajax. En la función muestra_cargando lo que hago es crear una nueva etiqueta DIV e insertarla en la capa que se va a actualizar con los contenidos de la solicitud Ajax.onResponseDelay = muestra_cargando. xajax.create().dom.$('cargando').global.innerHTML lo que se consigue es asignar un código HTML a la capa recién creada.callback."div".dom.onComplete asignamos la función a ejecutar cuando finalice.com En este código hemos utilizado unas funciones de Xajax.

Construcción de los formularios Vamos a hacer un bucle para crear un formulario por registro de la tabla.desarrolloweb. • • Pues dicho esto.com/manuales/xajax. alternado el país que se haya editado.com Artículo por Miguel Angel Alvarez Procesar formularios múltiples con Ajax y PHP La idea de este artículo es profundizar un poco en el procesado y validación de formularios con Ajax y PHP. Trabajo con Ajax en PHP utilizando Xajax: http://www. para saber cuál es y además estará metido dentro de una capa DIV. utilizando las librerías Xajax.5.html © Los manuales de DesarrolloWeb. que también tendrá un identificador propio.desarrolloweb. como ya explicamos en el artículo Upgrade de Xajax 0. En este ejemplo tendremos varios formularios en vez de uno y cada formulario servirá para actualizar un registro de una tabla de base de datos. En este ejemplo vamos a realizar un tratamiento de caracteres UTF-8. informando si hubo errores de validación o si se actualizaron los datos correctamente. para crear un formulario por cada uno de ellos. para decodificarlos y utilizarlos en páginas que utilizan el juego de caracteres ISO-8859-1. En concreto tenemos el identificador y luego el nombre del país y la bandera. Por último vamos a introducir un procesamiento de múltiples formularios por página. No reproducir sin autorización. Esto ya lo estuvimos viendo en el artículo Enviar y procesar formulario con Ajax y PHP y los artículos siguientes a éste del manual. veamos primero la tabla de base de datos que vamos a actualizar por medio de los formularios. Se mostrará un formulario por país y cada formulario se procesará de manera independiente. Para generar identificadores distintos para cada elemento utilizaremos una variable $i para enumerar los formularios y las capas donde están. Cada formulario tendrá un identificador distinto. que venimos explicando en el Manual de Xajax publicado en DesarrolloWeb. 68 . Así permitiremos actualizar varios registros a través de la misma página.Tu mejor ayuda para aprender a hacer webs www.5.2 a 0.5 varias cosas han cambiado.5 (antes estábamos utilizando la versión 0. Tanto la bandera como el nombre son cadenas de texto.com tienen el copyright de sus autores. Es una tabla donde se guarda información de países. Por supuesto. Los resultados se cargarán en la misma página. vamos a implementar un sistema de envío de formularios con estas diferencias: • Vamos a utilizar la versión de Xajax 0. utilizamos el método de propio de Xajax 0. En nuestro ejemplo tendremos una página con todos los formulario para actualizar desde un mismo sitio todos los países metidos en la tabla. Ahora podemos ver cómo se realiza un recorrido a todos los registros de la tabla.com. En este caso.2 y con la 0.

if ($form_entrada["nombre_pais"] == ""){ $errores = "Escribe un nombre de país". No reproducir sin autorización. $fila->id_pais . 69 .getFormValues(\'form' . Todo tiene sus respectivos identificadores. echo '<div id=f' . para poder referirnos a los formularios. $i . que no existe. Función Xajax para procesar el formulario Esta función validará el formulario.desarrolloweb. $fila->nombre_pais . $i . '></div>'. }elseif($form_entrada["bandera"] == ""){ $errores = "Escribe el nombre de una imagen en el campo bandera". que será la que se encargue de procesar el formulario.com tienen el copyright de sus autores. Si hay errores de validación los mostrará y si no los hay intentará actualizar el registro de la base de datos. } mysql_close($conn). '\'))"> </form></div> <div id=errorf' . $i . while ($fila=mysql_fetch_object($rs)){ $i++. echo "</p>".html © Los manuales de DesarrolloWeb.desarrolloweb.com/manuales/xajax. '><form id=form' . que obtenemos por medio de la llamada al método Javascript xajax. uno con el nombre de la capa DIV donde está formulario de origen y otro con el identificador de país al que pertenecen los datos de ese formulario. "root". function procesar_formulario($form_entrada){ $respuesta = new xajaxResponse(). //selecciono la base de datos con la que trabajar mysql_select_db("dw"). } Trabajo con Ajax en PHP utilizando Xajax: http://www. '> <input type="hidden" name="formulario_origen" value="f' . "").getFormValues(). '"> <input type="hidden" name="id_pais" value="' . '"> <br> <input type="button" value="guardar" onclick="xajax_procesar_formulario(xajax. también mostrará el error y si se ejecuta correctamente avisará que se ha cambiado el registro. $rs = mysql_query($ssql). Si la sentencia SQL para actualizarlo falla. También hay que llamar la atención sobre el botón de envío del formulario. ?> Nos podemos fijar que en cada formulario se incorporan dos campos hidden. $ssql = "select * from pais".Tu mejor ayuda para aprender a hacer webs www. $fila->bandera . $i . //valido los datos $errores = "". $i=0. las capas DIV que los contienen y la capa donde mostraremos los posibles mensajes de error. A esa función xajax le pasamos por parámetro los valores del formulario que debe procesar. '"> <br> <input type="text" name="bandera" size=30 maxlength="30" value="' .com <? //conecto con la base de datos //este script está sobre mi instalación local de apache + php + mysql $conn = mysql_connect ("localhost". En lugar del submit colocamos un botón normal que llama a una función xajax. '"> <input type="text" name="nombre_pais" maxlength="100" size=50 value="' . pasando a su vez el nombre del formulario. $i .

En Xajax existen unos modos de convertir esos caracteres a ISO.$salida .com if ($errores != ""){ //hubo errores de validación en el formulario //muestro un mensaje de error. para que podáis seguirlo con mayor facilidad y de manera global: <? //incluímos la clase ajax require ('. $xajax->setCharEncoding('ISO-8859-1').Tu mejor ayuda para aprender a hacer webs www. "")."innerHTML". $errores. Todo el código junto Os dejo el script completo.$salida). en un array asociativo. Tratamiento UTF-8 en Xajax 0. $xajax->configure('decodeUTF8Input'. } mysql_close($conn). El código está comentado para que se entiendan los distintos pasos. $form_entrada["formulario_origen"]. No reproducir sin autorización. } La función recibe por parámetro los valores del formulario que se ha enviado. $xajax->configure('decodeUTF8Input'.2.desarrolloweb.$salida).com/manuales/xajax.""). lo importante es que se vea que dependiendo de lo que ocurra en la función se actualizan unos elementos de la página. "<span style='fontsize:8pt'>" . $form_entrada["id_pais"]. $respuesta->Assign("error" . 70 ./xajax/xajax/xajax_core/xajax.php'). $xajax = new xajax()."innerHTML".inc. function procesar_formulario($form_entrada){ Trabajo con Ajax en PHP utilizando Xajax: http://www. "</span>"). //instanciamos el objeto de la clase xajax $xajax = new xajax(). mysql_select_db("dw"). $form_entrada["nombre_pais"] . } //tenemos que devolver la instanciación del objeto xajaxResponse return $respuesta. "'. mysql_error() . En Xajax 0. bandera='" .'>OK!</b>". después de instanciar el objeto de la clase Xajax y además tenemos que especificar una variable de configuración para decodificar automáticamente los caracteres UTF-8.com tienen el copyright de sus autores.'>ERROR</b>". $respuesta->Assign("error" . $ssql = "update pais set nombre_pais='" . $form_entrada["formulario_origen"]."innerHTML". para mostrar posibles errores o para decir que todo ha sido correcto. $xajax->setCharEncoding('ISO-8859-1')."innerHTML".true).5 el tratamiento de los datos en UTF-8 cambia con respecto a la versión 0. Ahora bien. "' where id_pais=" .html © Los manuales de DesarrolloWeb.. $salida="<b style='color:red. Ahora debemos indicar que trabajamos con ISO-8859-1. $respuesta->Assign($form_entrada["formulario_origen"]. $form_entrada["formulario_origen"].5 Los datos que nos vienen a través de Ajax llegan al servidor con el juego de caracteres UTF8. }else{ $salida="<b style='color:red. $form_entrada["bandera"] .true).'>ERROR:</b>" . "root". si es que estamos utilizando la codificación ISO-8859-1. if (mysql_query($ssql)){ $salida="<b style='color:green. $respuesta->Assign("error" . }else{ //si no tiene errores de validación el formulario $conn = mysql_connect ("localhost".desarrolloweb.

}else{ $salida="<b style='color:red.'>OK!</b>". ""). //El objeto xajax tiene que procesar cualquier petición $xajax->processRequest().$salida . }elseif($form_entrada["bandera"] == ""){ $errores = "Escribe el nombre de una imagen en el campo bandera". ?> </head> <body> <? //conecto con la base de datos //este script está sobre mi instalación local de apache + php + mysql $conn = mysql_connect ("localhost"."").Tu mejor ayuda para aprender a hacer webs www. }else{ //si no tiene errores de validación el formulario $conn = mysql_connect ("localhost". "").'>ERROR:</b>" . $i . if ($form_entrada["nombre_pais"] == ""){ $errores = "Escribe un nombre de país". $ssql = "update pais set nombre_pais='" ."innerHTML". } if ($errores != ""){ //hubo errores de validación en el formulario //muestro un mensaje de error. $respuesta->Assign("error" . mysql_select_db("dw"). "</span>"). $ssql = "select * from pais". $form_entrada["bandera"] .$salida). //selecciono la base de datos con la que trabajar mysql_select_db("dw").01 Transitional//EN"> <html> <head> <title>Listado de breves</title> <? $xajax->printJavascript(". '> Trabajo con Ajax en PHP utilizando Xajax: http://www.$salida). $respuesta->Assign("error" .desarrolloweb. $i=0. ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.com $respuesta = new xajaxResponse().'>ERROR</b>". $salida="<b style='color:red. $errores.desarrolloweb. $form_entrada["formulario_origen"]. $respuesta->Assign("error" .com/manuales/xajax. "root". if (mysql_query($ssql)){ $salida="<b style='color:green. $respuesta->Assign($form_entrada["formulario_origen"].com tienen el copyright de sus autores. '><form id=form' . echo '<div id=f' . $form_entrada["formulario_origen"]. 'procesar_formulario').."innerHTML".html © Los manuales de DesarrolloWeb. $form_entrada["nombre_pais"] . } mysql_close($conn). } $xajax->register(XAJAX_FUNCTION. mysql_error() . while ($fila=mysql_fetch_object($rs)){ $i++. No reproducir sin autorización. $form_entrada["id_pais"]. //valido los datos $errores = "". "' where id_pais=" ."innerHTML". $form_entrada["formulario_origen"]. "<span style='fontsize:8pt'>" . $rs = mysql_query($ssql)."innerHTML"./xajax/xajax/"). 71 . } //tenemos que devolver la instanciación del objeto xajaxResponse return $respuesta. $i . "'. bandera='" . "root".

por medio de las librerías Xajax. así como para eliminar declaraciones de estilos incluidas previamente. Me tendréis que disculpar. el trabajo que vamos a tener que realizar es bien sencillo. '></div>'.html © Los manuales de DesarrolloWeb.desarrolloweb. ?> </body> </html> Eso es todo. $i . 72 . Por medio de diversos enlaces. ya que Xajax contiene una serie de funciones para incluir archivos CSS en la página. $fila->nombre_pais . el visitante podrá seleccionar el aspecto que desea para la web. pero para los que se encuentren familiarizados con PHP será mucho más fácil utilizando Ajax. '"> <input type="hidden" name="id_pais" value="' . que instanciamos en las funciones PHP que se tienen que procesar por medio de Ajax. Las funciones de Xajax que permiten incluir o quitar declaraciones de estilos pertenecen al objeto de la clase xajaxResponse. echo "</p>". sino que se altere sin recargar los contenidos. Espero que eso no dificulte la comprensión de lo que hace este script. '"> <br> <input type="text" name="bandera" size=30 maxlength="30" value="' .com <input type="hidden" name="formulario_origen" value="f' . $fila->bandera . Afortunadamente.Tu mejor ayuda para aprender a hacer webs www. '\'))"> </form></div> <div id=errorf' . $i . Espero que se haya podido entender bien este script y que sirva como ejemplo de uso para guiar tus pasos con Ajax y PHP. utilizaremos el framework Xajax.com tienen el copyright de sus autores. $fila->id_pais . Artículo por Miguel Angel Alvarez Cambiar estilos CSS de una página con Ajax y PHP En este artículo vamos a hacer una página web que se puede visualizar con varios estilos CSS distintos. } mysql_close($conn). '"> <br> <input type="button" value="guardar" onclick="xajax_procesar_formulario(xajax. $i .getFormValues(\'form' . '"> <input type="text" name="nombre_pais" maxlength="100" size=50 value="' . Cuando publico un artículo en desarrolloweb. Este sistema lo vamos a realizar utilizando PHP y Ajax.com en el Manual de Xajax. pero en este caso me lo he saltado. Lo mejor para enterarse bien de los objetivos de este artículo es visualizar el ejemplo en una página aparte Este ejemplo podría realizarse simplemente con Javascript. donde el usuario puede elegir el que prefiere. cuya documentación venimos publicando en DesarrolloWeb.com me gusta siempre ofrecer un enlace para ver el ejemplo en marcha.com/manuales/xajax. Para simplificarnos la vida. de modo que al cambiar el estilo no se recargue la página entera.desarrolloweb. No reproducir sin autorización. entonces se cargará una hoja de estilos CSS distinta y por lo tanto cambiará el aspecto de la página. Trabajo con Ajax en PHP utilizando Xajax: http://www. Insisto que lo importante es sacar detalles de uso de Xajax que te den ideas para implementar tus propios sistemas Ajax con PHP.

$respuesta->waitForCSS(). 73 . ?> Trabajo con Ajax en PHP utilizando Xajax: http://www. o mejor dicho.Tu mejor ayuda para aprender a hacer webs www.5. la ruta del archivo CSS que se desea incluir. ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. //procesar peticiones $xajax->processRequest(). function cambiar_estilos($nuevo_estilo){ $respuesta = new xajaxResponse(). //instanciamos xajax $xajax = new xajax().com tienen el copyright de sus autores. Recordar que en el manual de Xajax explicamos diversas claves para entender el código siguiente código y que vamos a dar por entendidas en este artículo.inc. Recibe el archivo. return $respuesta. waitForCSS() El método waitForCSS() sirve para obligar al objeto response a esperar que finalice la carga de un CSS antes de continuar realizando acciones.css') El método includeCSS sirve para incluir un link con una declaración de estilos en el HEAD de la página. if (!isset($_SESSION["estilo_css"])) $_SESSION["estilo_css"] = "css_gris.desarrolloweb.com/manuales/xajax.com includeCSS('nuevo_estilo.css') El método removeCSS sirve para eliminar un link a una declaración de estilos insertada anteriormente con includeCSS() de Xajax.desarrolloweb. No reproducir sin autorización. } $xajax->register(XAJAX_FUNCTION. $respuesta->includeCSS($nuevo_estilo). 'cambiar_estilos'). como podemos ver en el siguiente ejemplo: Nota:Este ejemplo se ha realizado con Xajax versión 0.css". Con esas tres funciones realizamos todo el trabajo de incluir y eliminar estilos muy fácilmente.01 Transitional//EN"> <html> <head> <title>Cambiar hoja de estilos</title> <link rel="STYLESHEET" type="text/css" href="<?echo $_SESSION["estilo_css"]. El código del ejemplo es el siguiente (Podéis ir echando un vistazo y luego pondré algunas explicaciones) <? session_start(). Recibe la ruta del archivo CSS que se desea quitar.?>"> <? //librerías xajax javascript $xajax->printJavascript("xajax/").php').html © Los manuales de DesarrolloWeb. $respuesta->removeCSS($_SESSION["estilo_css"]). //clase ajax require ('xajax/xajax_core/xajax. $_SESSION["estilo_css"] = $nuevo_estilo. removeCSS('estilo_a_quitar.

cambiar_estilos($nuevo_estilo). Ese artículo de desarrolloweb nos ilustrará bastante. con waitForCSS() obligamos a esperar que se haya cargado el nuevo archivo CSS.desarrolloweb. que es donde realizamos el trabajo con Xajax para alterar los estilos de la página. Las demás tareas del código de la página ya las debemos conocer si hemos seguido el manual de programación Ajax con PHP. Por último.desarrolloweb. Por último eliminamos el archivo CSS anterior con removeCSS(). No reproducir sin autorización. si es que no existía ya. indicando como parámetro el nombre de la declaración de estilos que teníamos en la variable de sesión. Veremos que la página memoriza el último estilo que se había seleccionado. podríamos utilizar Cookies con PHP.css'))">Estilo verde</a> | <a href="javascript: void(xajax_cambiar_estilos('css_rojo.html © Los manuales de DesarrolloWeb. ya que se guardó en una variable de sesión.com/manuales/xajax. Luego definimos una función. Más tarde. dejamos de nuevo el enlace para ver el ejemplo en marcha. que depende del objeto xajaxResponse. 74 . aunque estas estuvieran muy espaciadas en el tiempo. includeCSS($nuevo_estilo). también podemos ver un ejemplo de uso de Cookies para almacenar el estilo CSS con el que se debe ver una página web. y actualizamos la variable de sesión para recordar el estilo actual que ha seleccionado el usuario. Esta función recibe el nombre del archivo CSS que se debe incluir y realiza los siguientes pasos: Lo primero que hace es crear un objeto de la clase xajaxResponse.css'))">Estilo gris</a> | <a href="javascript: void(xajax_cambiar_estilos('css_verde.com </head> <body> <h1>Página que cambia los estilos</h1> <a href="javascript: void(xajax_cambiar_estilos('css_gris. de modo que se pueda mostrar la página siempre con ese estilo durante toda la sesión o visita del usuario al sitio web. Artículo por Miguel Angel Alvarez Trabajo con Ajax en PHP utilizando Xajax: http://www. enviando como parámetro el nombre del archivo de estilos que se desea visualizar.Tu mejor ayuda para aprender a hacer webs www. Una prueba que podemos hacer es cambiar el estilo varias veces y luego actualizar la página con F5. Si deseásemos que el sitio recordase el estilo seleccionado en las diferentes visitas del usuario.css'))">Estilo rojo</a> </body> </html> Nota:En nuestro script utilizamos variables de sesión para recordar el estilo que ha seleccionado el usuario. pero si queremos. Sólo cabe señalar que los tres enlaces de abajo tienen las distintas llamadas a la función Xajax. Luego incluimos las librerías Xajax y generamos el objeto de la clase Xajax.com. En el script hemos realizado en un primer paso en el que se inicializa la sesión PHP y se genera una variable de sesión con el estilo del usuario. El siguiente paso es incluir el archivo CSS con la función mencionada anteriormente en este artículo de desarrollo web .com tienen el copyright de sus autores.

com venimos publicando un manual en el que explicamos el trabajo con Ajax y PHP utilizando Xajax y en este artículo vamos a ver cómo utilizar unos métodos de la clase xajaxResponse para asignar eventos y manejadores de eventos a cualquier elemento de una página web. se ejecutará cuando se haga clic en el botón. Veamos un ejemplo de uso: Haremos un botón HTML. que hará una llamada xajax para asigar ese evento: <a href="javascript:void(xajax_agrega_evento())">Agregar un evento al botón</a> Y ahora vamos a ver la función PHP agrega_evento().com/manuales/xajax. tanto addEvent() como addHandler() son métodos de la clase sajaxResponse."alert('hola mundo')"). por medio de Ajax y Xajax. onsubmit.com Generar eventos a elementos por medio de llamadas Ajax y PHP Parecerá raro. porque no tiene ningún código Javascript asociado al evento onclick. Métodos addEvent() y addHandler() de xajaxResponse Existen un par de métodos para asignar eventos a elementos de la página.desarrolloweb. } Vemos un uso de Xajax. Cualquier elemento de la página es susceptible de recibir instrucciones que se deben ejecutar como respuesta a eventos producidos por el usuario. especialmente para los programadores de PHP. podemos asignar eventos Javascript. Dado que.com tienen el copyright de sus autores.Tu mejor ayuda para aprender a hacer webs www. que tienen a su disposición de una manera fácil y rápida las capacidades que trae Ajax para las aplicaciones web. Para asignar un evento necesitaremos tres datos. asignaremos una sentencia asociada al evento onclick.desarrolloweb. pero desde funciones PHP podemos asignar comportamientos a elementos de la página. Este es el botón: (cabe fijarse en el atributo id) <input type=button value="pulsame" id="miboton"> Ahora vamos a tener un enlace. en el que se hace uso del mencionado método addEvent(). como los que venimos explicando en el manual de Ajax y PHP de desarrollo web . que lógicamente. No reproducir sin autorización. que no hace nada. dinámicamente y por medio de Ajax. que será llamada por Ajax y asignará el evento: function agrega_evento(){ $respuesta = new xajaxResponse(). de los que ya conocemos anteriormente. Una vez ejecutada esta función por medio de Ajax. Trabajo con Ajax en PHP utilizando Xajax: http://www.com.. En DesarrolloWeb. muy parecidas. de modo que. tendrán que ejecutarse como llamadas por medio de Ajax a funciones PHP. Luego el nombre del evento (onclick. $respuesta->addEvent("miboton".) y por último la función o código javascript a ejecutar como respuesta al evento. Luego."onclick". aparecerá una caja de alerta con el mensaje "hola mundo". A través de estas dos funciones. cuando se pulse.. desde funciones PHP. el botón habrá ganado el evento onclick. Esta es una de las facilidades que nos aportan las librerías Xajax.html © Los manuales de DesarrolloWeb. que recibe tres parámetros: el identificador del elemento al que queremos asignar el evento. Primero el identificador (atributo id) del elemento de la página al que se desea asignar el evento. el nombre del evento que se quiere asignar y las sentenicas javascript que se han de ejecutar cuando se produzca el evento. que ciertamente son muy de agradecer. 75 . return $respuesta.

$respuesta->addHandler("miboton".desarrolloweb."onclick". 'agrega_evento'). $respuesta->addEvent("miboton". tenemos esta función Javascript: <script> function mifuncion(){ alert ("Este segundo alert se debe al addHandler").com/manuales/xajax.html © Los manuales de DesarrolloWeb. salvo que addHandler() como último parámetro hay que indicar el nombre de una función Javascript que será encargada de procesar el evento. ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4."alert('hola mundo')")."onclick".Tu mejor ayuda para aprender a hacer webs www./xajax/xajax_core/xajax. ?> </head> <body> <h1>Creo manejadores de eventos a partir de Ajax</h1> Aquí tengo un botón que no hace nada (púlsalo para comprobarlo). sí está documentado el método addHandler(). No reproducir sin autorización.Con Ajax y PHP</title> <script> function mifuncion(){ alert ("Este segundo alert se debe al addHandler").com tienen el copyright de sus autores. } $xajax->register(XAJAX_FUNCTION. Por su parte.5.. Veamos un código de un ejemplo completo que utiliza estos dos métodos para asignar eventos: <?php //clase xajax require ('.php'). //instanciamos xajax $xajax = new xajax(). } </script> Y ahora podríamos asignar un evento onclick de esta manera: $respuesta->addHandler("miboton". Por ejemplo./xajax/").com Ahora.inc. se ha colocado el nombre de la función en el tercer parámetro. } </script> <?php //librerías xajax javascript $xajax->printJavascript(". Como se puede ver. function agrega_evento(){ $respuesta = new xajaxResponse().01 Transitional//EN"> <html> <head> <title>Generar manejadores de eventos desde Xajax ."mifuncion"). cabría decir que addEvent() no se encuentra muy documentado en la documentación actual de xajax 0.."mifuncion"). //procesar peticiones $xajax->processRequest().desarrolloweb. 76 . return $respuesta. porque no se ha indicado ningún manejador de evento <br> <input type=button value="pulsame" id="miboton"> Trabajo con Ajax en PHP utilizando Xajax: http://www. que es similar. pero funciona."onclick".

Para la información del lector habría que comentar primero que Xajax es un framework PHP para el uso de Ajax de una manera cómoda. aunque hay que decir que todavía es una solución que debe rodarse más para que sea realmente sencilla y compatible con diversos entornos. Como no tenemos ningún artículo en este momento para explicar Comet en DesarrolloWeb. Para entender para qué nos sirve esto digamos que. Trabajo con Ajax en PHP utilizando Xajax: http://www. y actualizan repetidas veces la página del cliente con Comet. por medio de la instalación de un plugin en el framework Xajax. El método removeHandler() recibe los mismos parámetros del addHandler() que queremos anular. que no actualizan ningún dato. por lo menos en el momento de escribir este artículo. también de xajaxResponse. Venimos publicando un Manual de Xajax que convendría leer para saber más sobre el tema. os dejamos el link con la descripción de Comet en la Wikipedia. con PHP. que sirve para eliminar eventos que hayan sido declarados con addHandler(). Si se hiciera con Ajax podríamos hacer que el cliente llame al servidor cada cierto tiempo para pedir las actualizaciones de la conversación y que estas se muestren en pantalla.Tu mejor ayuda para aprender a hacer webs www. para actualizarla. Artículo por Miguel Angel Alvarez Comet en PHP con Xajax Queremos comentar acerca del uso de Comet en PHP. con lo que se ejecutarán las distintas funciones en el orden en el que han sido asignadas al evento. podemos asignar varias funciones al mismo evento de un elemento HTML. Estos scripts podrían ejecutarse durante un tiempo indeterminado y de vez en cuando. sin que el usuario tenga que intervenir. Por ejemplo. No reproducir sin autorización. provocando llamadas inútiles. para los que no sepan qué es Comet cabe decir que es algo así como Ajax. mientras que en Comet las llamadas para recargar la información de la página las inicia el servidor. El cliente cada poco pedirá de nuevo la información de las conversaciones .com/manuales/xajax. tanto en el cliente como el servidor. pero con la diferencia que en Ajax las llamadas para solicitar nuevos contenidos al servidor las inicia el usuario. el servidor podría mandar señales al navegador para que actualice los contenidos de la página que está viendo el usuario. aunque esta información no haya cambiado. 77 . que permite hacer llamadas al servidor sin recargar la página. desde scripts PHP. podemos hacer scripts que se ejecutan en el servidor. Además. con Xajax y el plugin de Comet.com tienen el copyright de sus autores.desarrolloweb. existe el método removeHandler().com. Además.desarrolloweb. podemos imaginar una aplicación web de Chat en PHP. de una manera sencilla.html © Los manuales de DesarrolloWeb. Este artículo puede darnos una idea de lo que se puede hacer con comet.com <a href="javascript:void(xajax_agrega_evento())">Agregar un evento al botón</a> </body> </html> </body> </html> Otros detalles a comentar sobre la declaración de eventos con Xajax Si lo deseamos.

"px").com/manuales/xajax. $objResponse->flush(). sólo en el momento que se ha actualizado.php Instalar el plugin de Comet en Xajax Para instalar un plugin en el framework de Xajax tenemos que copiar en una carpeta especial el código fuente del plugin."style.3). se podría hacer que el servidor sea el encargado de enviar al cliente. en su versión 0. '/xajaxPluginManager. for ($i=1.desarrolloweb. require_once $core . para poder enviar los datos cuando se actualizan.html © Los manuales de DesarrolloWeb. que sólo se hicieran las conexiones imprescindibles al servidor para actualizar la información. funcionando en la propia página dentro del sitio de Xajax: http://xajaxproject.width".inc. // camino a xajax core $core = 'xajax/xajax_core'. Con esto el Plugin ya está cargado en el framework. con el método flush(). Con lo que dentro de esta carpeta tendremos un nuevo directorio llamado "comet" que contendrá el código del plugin.com En Comet.'%'). entre otras cosas. una vez descomprimidos. los tenemos que colocar en la carpeta xajax/xajax_plugins/response/. function testComet () { $objResponse = new xajaxCometResponse(0. sin que este tenga que solicitar nada. que es la misma que la del demo. Pero ATENCIÓN! Supongo que lo cambiarán en breve en la distribución del plugin. Dice que cada proceso ocupa bastante memoria en el servidor (10MB) y que contando con los muchos usuarios que puede tener un chat. pero en el momento de escribir este artículo hay un archivo que está mal y que da un error cuando se ejecuta el demo en Internet Explorer.++$i) { $objResponse->assign("progress". Es el archivo comet./xajax/xajax_plugins/response/comet/comet. se puede hacer bastante pesado para ejecutar por la máquina. Podemos ver el demo de Comet. // se incluye el plugin require_once $core .Tu mejor ayuda para aprender a hacer webs www. Trabajo con Ajax en PHP utilizando Xajax: http://www. Esto se cambia utilizando otro archivo comet. como él mismo apunta.com. Sobre Internet Explorer salta un error "context es nulo o no es un objeto". Los datos se envían al navegador cliente. Desde la propia página del demo del plugin podremos descargar la última versión. es que cada usuario del chat tiene que mantener un proceso de PHP que se ejecuta en el sistema abierto para cada usuario. Esto permitiría.inc. la conversación.($i*5). El autor del plugin de Comet para Xajax incluso dice que ha creado un chat experimental para probar Comet. debemos usar xajaxCometResponse en lugar de xajaxResponse."innerHTML". se hace uso de Comet.php'. 78 .2.inc. require_once '. que forma parte de los ficheros del plugin. '/xajax.desarrolloweb.js. En las funciones de Xajax que utilizan Comet para realizar enviar nuevos datos a la página del cliente.js que han publicado por ahora sólo en un post del foro de Xajax y dejo en link para descarga desde el servidor de DesarrolloWeb. '/xajaxPlugin. // creamos el objecto xajax $xajax = new xajax().($i*5). Con este código PHP. En esta función. No reproducir sin autorización.php'. sólo nos queda incluirlo en cada página que lo queramos utilizar.$i<=10.org/developer/q_no/Comet/comet.php'.com tienen el copyright de sus autores. require_once $core . las veces que sean necesarias.php'.2 publicada en el momento de escribir este artículo.inc. El problema. $objResponse->assign("streaming". Los archivos que descargaremos.

($i*5).php'. que seguro que estarán resueltos en la próxima versión del plugin. $objResponse->assign("streaming"."innerHTML".html © Los manuales de DesarrolloWeb.5 de Xajax. '/xajaxPlugin. require_once '. e incluso que van a publicar una actualización de Xajax pronto preparada para PHP 5 estricto. } $objResponse->assign("progress".desarrolloweb."px")."%. todavía han mantenido compatibilidad con PHP 4 y por ello surge algún problema a la hora de correrlo en PHP 5.($i*5).").($i*5). tomado de la página del autor y modificado en un par de sitios para adecuarlo a nuestro sistema: <?php // camino a xajax core $core = 'xajax/xajax_core'. function testComet () { $objResponse = new xajaxCometResponse(0."px").($i*5). He de decir que en estos momentos. todo ha sido muy rápido y sencillo.3).desarrolloweb.'%'). } Dificultades que hemos encontrado con el plugin de Comet para Xajax Lo cierto es que poner el sistema en marcha ha sido bien sencillo y en las pruebas con Firefox ha funcionado a la primera. $objResponse->flush(). Dicen que la próxima versión de Xajax ya sólo soportará PHP 5."innerHTML".($i*5). porque Xajax no utiliza PHP 5 estricto.").width". '/xajax./xajax/xajax_plugins/response/comet/comet.width". Así que cabe esperar un poco para que todo esté listo y funcionando correctamente.com tienen el copyright de sus autores.$i<=10. require_once $core .js que se había proporcionado por otro archivo que dan en el foro (esto lo había comentado antes y había puesto el link al archivo comet."style. en mi servidor local.js bueno). require_once $core .inc. Otra solución momentánea es eliminar la visualización de mensajes de error PHP en las páginas. for ($i=1.php'. $objResponse->assign("streaming". $objResponse->alert("finished process at ".width". $objResponse->alert("finished process at ". Así que fuera esos problemas.com } $objResponse->assign("progress". El sistema de Comet para Xajax requiere PHP 5.($i*5)."%."style.php'.'%'). probando el script en otro servidor. Debido a este juego de versiones."px"). pero Xajax en si permite tanto PHP 4 como PHP 5. $objResponse->assign("streaming". 79 ."innerHTML".Tu mejor ayuda para aprender a hacer webs www. No reproducir sin autorización.php'.inc. Luego he tenido problemas con Internet Explorer y después de un buen rato buscando he visto que había que cambiar el archivo comet. en la versión 0. Trabajo con Ajax en PHP utilizando Xajax: http://www. En código PHP del uso del plugin de Comet El código completo del script PHP que sirve de demo de Comet es el siguiente.inc.'%')."style.($i*5). he tenido problemas. // creamos el objecto xajax $xajax = new xajax(). '/xajaxPluginManager. porque muestra una serie de mensajes de error "Strict Standards".($i*5).inc. al menos en los sistemas con PHP 5.com/manuales/xajax. return $objResponse.++$i) { $objResponse->assign("progress". // se incluye el plugin require_once $core .

com tienen el copyright de sus autores.01 Transitional//EN"> <html> <head> <title>Comet test</title> <link rel="STYLESHEET" type="text/css" href="<?echo $_SESSION["estilo_css"].array("comet" => true)). ?> </head> <body> <h1>Hago un test del plugin comet para xajax</h1> <input type="button" value="pulsa" onclick="xajax_testComet()"> <br> <div id="progress" style="width:1px.desarrolloweb.com return $objResponse.Tu mejor ayuda para aprender a hacer webs www. ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.border:1x solid darkred"> <div id="streaming"></div> </div> </body> </html> Artículo por Miguel Angel Alvarez Trabajo con Ajax en PHP utilizando Xajax: http://www. } $xajax->register(XAJAX_FUNCTION.?>"> <? //librerías xajax javascript $xajax->printJavascript("xajax/"). //procesar peticiones $xajax->processRequest().html © Los manuales de DesarrolloWeb."testComet".com/manuales/xajax. No reproducir sin autorización.background:red.desarrolloweb. 80 .

Sign up to vote on this title
UsefulNot useful