[aporte] AJAX en 10 minutos con xajax

ocp001a · #1 (**permalink**) 08/09/2011, 16:04

Hola a todos. Espero que este post (que sería mi primer aporte) sirva para aquellas personas interesadas en el uso de ajax en sus páginas pero que no tienen mucho tiempo de aprender a usarlo.

Lo primero:
¿Qué es xajax?
Xajax es un framework que permite el manejo de peticiones ajax con tener sólo conocimientos de php y html básicos.

¿A qué personas está orientado?
A personas que tienen poco conocimiento de Javascript, que saben lo básico de php y html, y a toda persona que se interese en el manejo relativamente sencillo que ofrece este framework.

¿Qué diferencia tiene con otros frameworks como mootools o jquery?
Que xajax está orientado principalmente a la programación en php, mientras que apenas se mete con javascript, es decir no es muy "invasivo"; esto que para algunos podría suponer una desventaja, para el novato que quiere desarrollar con el tiempo su propio js es una muy buena forma de programar, pues no interfiere con otras librerías js, hojas de estilo etc.

¿Qué tan potente es xajax?
Bueno, depende a qué le llames potente. A grandes rasgos xajax permite llamar procesos que regresen respuestas de muchos kb, así como múltiples respuestas en un mismo proceso, además de poder regresar respuestas html o como procesos y llamadas javascript, y es crossbrowser

Bien, si estás interesado en probar xajax, lo primero que debes hacer es decargar la versión 0.5 (final) de página oficial la versión 0.6 beta 1 no la recomiendo pues tiene problemas serios con varias versiones de php.

Puedes bajar la versión mínima, que ocupa poco espacio, o bien la versión standard, que además trae ejemplos y tests.

Una ves que descargues el zip, lo más importante es que te quedes con las carpetas
xajax_core
xajax_js
xajax_plugins

Para este ejemplo, tendremos esas carpetas dentro de otra carpeta llamada xajax, la cual estará en la raíz de nuestro sitio, de modo que quedaría así:

Código:

xajax
        xajax_core
        xajax_js
        xajax_core

Ahora, en la raíz crearemos un archivo .php, se puede llamar como quieras, para este ejemplo lo llamaremos index.php

dentro del archivo colocaremos el siguiente código:

Código PHP:

Ver original<?php
//incluímos la librería xajax
@require_once("xajax/xajax_core/xajax.inc.php");//la arroba es para anular la notificacion de uso de instrucciones obsoletas
$xajax = new xajax();//Creamos un objeto xajax
//$xajax->configure("debug", true);//si queremos hacer un debug, descomentamos esta linea
$xajax->register(XAJAX_FUNCTION,"mifuncion");//registramos nuestra función o funciones que llamaremos via ajax
$xajax->processRequest();//Indicamos que xajax procesará las peticiones ajax que registramos.
$xajax->configure('javascript URI','xajax');
echo"
<html>
<head>";
$xajax->printJavascript("xajax");//Imprimimos el código JS que inicia Xajax, indicando en qué carpeta se encuentra
echo"
</head>
<body>
<div id=\"mensaje\"></div>
<input type=\"button\" value=\"Ver mensaje\" onclick=\"xajax_mifuncion();\">
</dody>
";
function mifuncion(){
    $respuesta = new xajaxResponse();//Creamos una respuesta tipo xajax
    $respuesta->assign("mensaje","innerHTML","Esto es una respuesta xajax");//En la variable respuesta indicamos que al objeto "mensaje" le asigne el texto de nuestra respuesta
    return $respuesta;
}
?>

Analizando el código:
Primero hacemos un include al archivo principal de xajax xajax.inc.php, según la carpeta donde lo colocamos. La versión 0.5 hace que salten algunas notificaciones de instrucciones "deprecated", por lo que anteponemos el arroba. Esto con la versión 6 no sucede, pero como indiqué antes la ver. 0.6 tiene problemas con varias versiones de php.

Las demás líneas están prácticamente explícitas en los comentarios, por lo que me limitaré a explicar a grandes rasgos el mecanismo general:

Primero nuestro script de php va a generar un html con sólo un <div> y un botón.

Este div DEBE tener un ID, ya que de esta manera al llamar nuestra función vía ajax ésta nos devolverá una respuesta en html dentro del div con el ID que especificamos.

El botón para este caso no necesita ID, lo importante es que le estamos asignando un evento, el evento onclick, es decir cuando el usuario presione dicho botón, ya sea con el mouse o con un enter, llamará nuestra función.

Es importante resaltar que aunque nuestra función se llama "mifuncion", para llamarla vía ajax le debemos anteponer xajax_, es decir la llamaremos xajax_mifuncion. Xajax hace esto con cualquier función que registremos para llamarla vía ajax.

Por el momento no le estamos pasando parámetros a dicha función, al llamarla simplemente se ejecuta la función php mifuncion, la cual sólo genera una respuesta de texto, e indicamos mediante el assign que lo coloque dentro (innerHTML) del objeto con el ID mensaje, y regresamos la respuesta.

Esto hará que sin recargar la página tengamos en el div el mensajito "Esto es una respuesta xajax".

Bien, eso es lo primero que deberías saber para comenzar. Posteriormente si les parece pondré más ejemplos donde veremos otro tipo de respuestas xajax, así como el paso de parámetros y la ejecución de código js, además de (espero) ejemplos reales de uso como selects dependientes con xajax.

andresdzphp · #2 (**permalink**) 08/09/2011, 16:28

Cita:

//la arroba es para anular la notificacion de uso de instrucciones obsoletas

La versión 0.6 beta1 ya se arreglaron esos errores y ya es más compatible con PHP 5.3+ pero beta es beta.

Gracias por el aporte lo probé con la versión beta y me va muy bien con PHP 5.3.8

ocp001a · #3 (**permalink**) 08/09/2011, 16:43

Yo hace apenas un mes quise cambiar a la beta 6 por que me decidí a manejar todo mi código php en modo estricto, de modo que se detuviera al mínimo warning, y la beta .6 ya no debería tener warnings, sin embargo al instalar sobre xampp en windows y linux, así como en una instalación independiente en ubuntu con lighttpd, php 5.3.6 (según recuerdo) al pasar los formularios con xajax.getFormValues me enviaba únicamente cadenas, por lo que tuve que volver a la .5 desde entonces no he vuelto a verificar, aunque igual un día de estos lo haga para comprobar.

maycolalvarez · #4 (**permalink**) 09/09/2011, 20:34

personalmente tuve muy malas experiencias con xajax y en general prefiero y recomiendo utilizar un FW backend MVC e implementar jQuery, ExtJS etc.

es solo mi apreciación personal, excelente aporte

ocp001a · #5 (**permalink**) 12/09/2011, 15:44

Cita:

Iniciado por maycolalvarez

personalmente tuve muy malas experiencias con xajax y en general prefiero y recomiendo utilizar un FW backend MVC e implementar jQuery, ExtJS etc.

Los Fw que mencionas tengo entendido que están fuertemente orientados a Javascript, de lo que deduzco que tú lo usas mucho, de ser así no me extraña que xajax no te convenciera, pues xajax se mete muy poco con js...

Gracias por tu comentario.

En este post mostraré cómo pasar parámetros a nuestras funciones php llamadas vía ajax.

Los tipos de datos que podemos pasar como parámetros a nuestras funciones con xajax, son básicamente los mismos que podemos pasar en cualquier llamada javascript:

Números, cadenas, operaciones y valores de objetos de nuestro html. Además, xajax permite fácilmente enviar todo un formulario a nuestras funciónes.

Veamos el siguiente código:

Código PHP:

Ver original<?php
@require_once("xajax/xajax_core/xajax.inc.php");//la arroba es para anular la notificacion de uso de instrucciones obsoletas
$xajax = new xajax();//Creamos un objeto xajax
//$xajax->configure("debug", true);//si queremos hacer un debug, descomentamos esta linea
$xajax->register(XAJAX_FUNCTION,"mifuncion");//registramos nuestra función o funciones que llamaremos via ajax
$xajax->processRequest();//Indicamos que xajax procesará las peticiones ajax que registramos.
$xajax->configure('javascript URI','xajax');
echo"
<html>
<head>";
$xajax->printJavascript("xajax");//Imprimimos el código JS que inicia Xajax
echo"
</head>
<body>
<div id=\"mensaje\"></div>
<br/>
<form name=\"prueba\" id=\"prueba\">
    <input type=\"text\" name=\"nombre\" id=\"nombre\" onblur=\"xajax_mifuncion(this.value,'nombre');\">
    <select name=\"colores\" id=\"colores\" onchange=\"xajax_mifuncion(this.value,'color');\">
        <option value=\"rojo\">rojo</option>
        <option value=\"azul\">azul</option>
        <option value=\"verde\">verde</option>
    </select>
    <input type=\"button\" value=\"Enviar datos\" onclick=\"xajax_mifuncion(xajax.getFormValues('prueba'));\"/>
</form>
    <input type=\"button\" value=\"suma de 2 + 3\" onclick=\"xajax_mifuncion(2+3,'suma');\"/>
</body>
";
function mifuncion($valor,$origen=""){
    $respuesta = new xajaxResponse();//Creamos una respuesta tipo xajax
    if(!is_array($valor))//si no recibimos el formulario
        $respuesta->assign("mensaje","innerHTML","Usted indico el $origen $valor");//regresamos un mensaje de texto simple
    else{
        $respuesta->assign("mensaje","innerHTML","Usted indico los valores Nombre: $valor[nombre] y Color: $valor[colores]");//regresamos un mensaje de texto mas elaborado
    }
    return $respuesta;
}
?>

Es muy similar al anterior, sólo que ahora nuestro html inicial contiene lo siguiente:

Un formulario con el id prueba
Una caja de texto sencilla con el id nombre
Un combo o select con el id colores y una lista de tres colores
Un botón que envía nuestro formulario completo
Un botón que llama nuestra función enviando una suma (2+3)

Como verás, es posible llamar nuestra función con cualquier evento existente en js.

Ahora bien, analizando el input:
el input al ser abandonado (evento onblur) llama nuestra función pasándole como parámetro su propio valor (this.value), lo mismo que ocurre con el select, al pasar su propio valor al cambiar de selección (evento onchange).

El botón que envía todo el formulario lo hace mediante la instrucción xajax.getFormValues, la cual permite enviar todo el contenido de un formulario como si de un submit se tratara.

Finalmente el último botón envia una operación (2+3).

Ahora veamos el código de nuestra función ajax:
function mifuncion($valor,$origen=""){
Aquí por si no lo sabías, estamos definiendo que nuestra función puede recibir dos parámetros ($valor y $origen), además, si no recibe nada dentro de la variable $origen, le colocará una cadena vacía.

if(!is_array($valor))
Cualquier parámetro que enviemos a nuestra función ajax será recibida dentro de una variable simple, a menos que enviemos un formulario, en tal caso, xajax nos enviará un arreglo (array) muy similar por no decir idéntico a cualquier array que recibamos vía $_POST, sólo que el array tendrá el nombre que le hayamos dado al declarar nuestra función. En nuestro caso, si enviamos el formulario, lo recibiremos en la variable $valor, por esto primero comprobamos si $valor es un arreglo o no.

Si no es un arreglo, regresamos como respuesta en el div mensaje un mensajito muy simple, con el contenido de las dos variables recibidas ($valor y $origen).

Si es un arreglo, es que nos enviaron el formulario, es ese caso devolveremos un mensaje más elaborado, con los contenidos del formulario.

Finalmente, no habría ni que mencionar que con el botón de suma nuestra función recibe desde el principio el valor 5 (suma de 2+3) pues la operación ya estaba hecha por javascript.

Bien, es todo por el momento, cualquier duda por favor comentarla, en el siguiente post mostraré como regresar más de una respuesta en la misma función xajax.

Aijoona · #6 (**permalink**) 12/09/2011, 16:03

Al igual que @macycolalvarez, no me van los enlatados de este tipo ya que implica adaptar el workflow del sistema a su manera, siendo los beneficios magros.

De cualquier manera, buen aporte.

caricatos · #7 (**permalink**) 12/09/2011, 18:33

Hola:

Suelo estar en contra de las librerías, y tus códigos me lo ponen fácil... son decididamente "no-accesibles", pero tal vez tan solo no te lo hayas planteado...

Si los formularios se envían con un botón submit, una implementación ajax debe implementarse cancelando ese evento. Seguro que sabrás modificarlo

Otro motivo por lo que no me gustan las librerías con Ajax, es que si al final se usa el atributo responseText, qué sentido tiene cargar toda una librería...

Sé que tienes buena intención, y te agradecemos el aporte.

Saludos

ocp001a · #8 (**permalink**) 13/09/2011, 10:33

Aijoona, técnicamente hablando, en mi opinión, cualquier FW que uses ya sea en js, php o cualquier lenguaje te obligará a llevar ciertos lineamientos, los mismos impuestos por el propio FW, así que ya dependerá de cada programador decidir si apega o no a ellos.

caricatos, éste es sólo un ejemplo de lo que se puede hacer con xajax, sin tratar por el momento de programar de manera accesible o formal.

Desde luego que se puede usar un botón submit para el envío del formulario y poder con un simple enter ejecutar el envio y cumplir con la accesibilidad, pero mi ejemplo sólo suponía mostrar algunos métodos de llamar a las funciones xajax, pretendiendo hacerlo lo más simple posible, sin profundizar mucho en los mecanismos de javascript, tan sólo mencionando los eventos más comunes.

Sé que para los desarrolladores más adelantados el uso de librerías puede resultar impráctico o innecesario, así como lo permisivo de algunas de éstas les puede parecer contraproducente, sobre todo cuando se habla de accesibilidad y estandaridad.

Sé que no es una disculpa y en un foro como éste debí pensarlo dos veces antes de colocar este código, pero mi ejemplo sólo pretendía mostrar lo que se puede hacer más que lo que se debe hacer.

No estoy tratando de defender la librería Xajax, pero he visto mucha gente sin conocimientos de ajax necesitar urgentemente ejemplos o soluciones a un problema que con esta librería podrían resolver rápidamente.

Aijoona · #9 (**permalink**) 13/09/2011, 11:09

No tenes porque disculparte, el aporte es tan valido como cualquier otro, y de hecho creo que es evidente este punto si observamos las calificaciones positivas del tema.

La discordia es un gran incentivo para generar discusiones constructivas.

------------

Suelo trabajar con enlatados en Java (Seam/RichFaces) y limitan de gran manera la interacción puntual que excede de los objetivos iniciales. Sin embargo, reconozco que son de gran ayuda para la gente/proyectos cuyas necesidades se pueden reducir a lo que estos enlatados ofrecen.

Saludos.

volivaresh · #10 (**permalink**) 20/09/2011, 12:39

En lo personal, he tenido ciertos problemas con respecto a utilizar xajax, debido a que tiene problema si hago include a otras paginas php. muestra un error que dice que la instruccion xml no esta al inicio de la pagina, y dicho error no he podido depurar.

Alguien tiene alguna idea de como puedo arreglarlos, por si acaso no tengo espacios en blanco entre las mis tags <?php ?>

Saludos

Van

sisabb · #11 (**permalink**) 30/08/2013, 11:28

Se que estoy respondiendo a un post algo antiguo, pero si es posible obtener respuesta os lo agradecería.

A pesar de llevar más de 30 años programando, soy muy novato en desarrollo web pero conocí Xajax y la verdad que me venia muy bien, pues venia de programar en C y el php es casi clavado.
Pero ahora me ocurren cosas un tanto extrañas y es que el depurador de mozilla me saca errores del código js que genera xajax y hay ciertas cosas que no me funcionan.

Porque digo cosas extrañas, pues porque una consulta de varios registros a una tabla de una base de datos mysql que monto en una tabla que paso a un div, me funciona perfectamente en los navegadores crome, opera y los que puedo probar en dispositivo moviles, sin embargo no funciona ni en IE ni en Mozilla, tan solo funciona si leo un solo registro de la tabla.

Como el depurador de Mozilla saca errores en la depuración en el código generado, mi pregunta es realmente la siguiente:
¿Esta XAJAX obsoleta?.

Muchas gracias por leer y perdón por haberme extendido un poco.