Foros del Web » Programando para Internet » Javascript » Frameworks JS »

[aporte] AJAX en 10 minutos con xajax

Estas en el tema de [aporte] AJAX en 10 minutos con xajax en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/09/2011, 16:04
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 12 años, 5 meses
Puntos: 528
[aporte] AJAX en 10 minutos con xajax

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
  1. <?php
  2. //incluímos la librería xajax
  3. @require_once("xajax/xajax_core/xajax.inc.php");//la arroba es para anular la notificacion de uso de instrucciones obsoletas
  4. $xajax = new xajax();//Creamos un objeto xajax
  5. //$xajax->configure("debug", true);//si queremos hacer un debug, descomentamos esta linea
  6. $xajax->register(XAJAX_FUNCTION,"mifuncion");//registramos nuestra función o funciones que llamaremos via ajax
  7. $xajax->processRequest();//Indicamos que xajax procesará las peticiones ajax que registramos.
  8. $xajax->configure('javascript URI','xajax');
  9. echo"
  10. <html>
  11. <head>";
  12. $xajax->printJavascript("xajax");//Imprimimos el código JS que inicia Xajax, indicando en qué carpeta se encuentra
  13. echo"
  14. </head>
  15. <body>
  16. <div id=\"mensaje\"></div>
  17. <input type=\"button\" value=\"Ver mensaje\" onclick=\"xajax_mifuncion();\">
  18. </dody>
  19. ";
  20. function mifuncion(){
  21.     $respuesta = new xajaxResponse();//Creamos una respuesta tipo xajax
  22.     $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
  23.     return $respuesta;
  24. }
  25. ?>

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.
  #2 (permalink)  
Antiguo 08/09/2011, 16:28
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 9 años, 3 meses
Puntos: 793
Respuesta: [aporte] AJAX en 10 minutos con xajax

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
__________________
Si sabemos como leer e interpretar el manual será mucho más fácil aprender PHP. En lugar de confiar en ejemplos o copiar y pegar - PHP
  #3 (permalink)  
Antiguo 08/09/2011, 16:43
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 12 años, 5 meses
Puntos: 528
Respuesta: [aporte] AJAX en 10 minutos con xajax

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.
  #4 (permalink)  
Antiguo 09/09/2011, 20:34
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 12 años, 2 meses
Puntos: 1532
Respuesta: [aporte] AJAX en 10 minutos con xajax

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
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #5 (permalink)  
Antiguo 12/09/2011, 15:44
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 12 años, 5 meses
Puntos: 528
Respuesta: [aporte] AJAX en 10 minutos con xajax

Cita:
Iniciado por maycolalvarez Ver Mensaje
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
  1. <?php
  2. @require_once("xajax/xajax_core/xajax.inc.php");//la arroba es para anular la notificacion de uso de instrucciones obsoletas
  3. $xajax = new xajax();//Creamos un objeto xajax
  4. //$xajax->configure("debug", true);//si queremos hacer un debug, descomentamos esta linea
  5. $xajax->register(XAJAX_FUNCTION,"mifuncion");//registramos nuestra función o funciones que llamaremos via ajax
  6. $xajax->processRequest();//Indicamos que xajax procesará las peticiones ajax que registramos.
  7. $xajax->configure('javascript URI','xajax');
  8. echo"
  9. <html>
  10. <head>";
  11. $xajax->printJavascript("xajax");//Imprimimos el código JS que inicia Xajax
  12. echo"
  13. </head>
  14. <body>
  15. <div id=\"mensaje\"></div>
  16. <br/>
  17. <form name=\"prueba\" id=\"prueba\">
  18.     <input type=\"text\" name=\"nombre\" id=\"nombre\" onblur=\"xajax_mifuncion(this.value,'nombre');\">
  19.     <select name=\"colores\" id=\"colores\" onchange=\"xajax_mifuncion(this.value,'color');\">
  20.         <option value=\"rojo\">rojo</option>
  21.         <option value=\"azul\">azul</option>
  22.         <option value=\"verde\">verde</option>
  23.     </select>
  24.     <input type=\"button\" value=\"Enviar datos\" onclick=\"xajax_mifuncion(xajax.getFormValues('prueba'));\"/>
  25. </form>
  26.     <input type=\"button\" value=\"suma de 2 + 3\" onclick=\"xajax_mifuncion(2+3,'suma');\"/>
  27. </body>
  28. ";
  29. function mifuncion($valor,$origen=""){
  30.     $respuesta = new xajaxResponse();//Creamos una respuesta tipo xajax
  31.     if(!is_array($valor))//si no recibimos el formulario
  32.         $respuesta->assign("mensaje","innerHTML","Usted indico el $origen $valor");//regresamos un mensaje de texto simple
  33.     else{
  34.         $respuesta->assign("mensaje","innerHTML","Usted indico los valores Nombre: $valor[nombre] y Color: $valor[colores]");//regresamos un mensaje de texto mas elaborado
  35.     }
  36.     return $respuesta;
  37. }
  38. ?>
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.
  #6 (permalink)  
Antiguo 12/09/2011, 16:03
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 9 años, 5 meses
Puntos: 343
Respuesta: [aporte] AJAX en 10 minutos con xajax

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.
__________________
blog | @aijoona
  #7 (permalink)  
Antiguo 12/09/2011, 18:33
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.603
Antigüedad: 18 años, 6 meses
Puntos: 1283
Respuesta: [aporte] AJAX en 10 minutos con xajax

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 13/09/2011, 10:33
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 12 años, 5 meses
Puntos: 528
Respuesta: [aporte] AJAX en 10 minutos con xajax

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.
  #9 (permalink)  
Antiguo 13/09/2011, 11:09
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 9 años, 5 meses
Puntos: 343
Respuesta: [aporte] AJAX en 10 minutos con xajax

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.
__________________
blog | @aijoona
  #10 (permalink)  
Antiguo 20/09/2011, 12:39
 
Fecha de Ingreso: septiembre-2011
Mensajes: 1
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: [aporte] AJAX en 10 minutos con xajax

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
  #11 (permalink)  
Antiguo 30/08/2013, 11:28
 
Fecha de Ingreso: agosto-2013
Ubicación: Toledo, España
Mensajes: 2
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: [aporte] AJAX en 10 minutos con xajax

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.

Etiquetas: ajax, php, xajax
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 6 personas




La zona horaria es GMT -6. Ahora son las 13:50.