19 de febrero de 2009
Lo prometido es deuda, y a continuación explicaré como realizar consultas Ajax con mootools 1.2.x y JSON.
He creado una clase llamada moojson para realizar las peticiones al servidor con Request.JSON de hay un poco mi tardanza, pero ha valido la pena.
Porqué Json? pues muy simple, Request.HTML solo recibimos texto formateado en código html, sin embargo con JSON recibimos un objeto, donde dentro hay propiedades, objetos, arrays, etc. Su gran dinamismo y el estar pensado para trabajar con javaScript, lo hace único y mejor que usar XML.
Un ejemplo que ilustra su sencillez: Si tenemos un objeto "coche" y una propiedad "color", solo con poner coche.color tendremos el color. así de sencillo. En el caso de un array "caracteristicas" dentro de "coche", podremos acceder a su contenido con coche.caracteristicas[0]. A continuación os pongo este ejemplo como sería en JSON:
La clase que he creado permite realizar multiples consultas ajax dentro del mismo documento a diferentes documentos (PHP, ASP, .NET ...).
Actualmente funciona solo con los tag A (link) y INPUT (del tipo BUTTON), cuando mejore la clase permitirá algunos más.
Para realizar un consulta ajax con un link, lo podemos realizar de la siguiente manera:
El atributo class es donde especificamos que queremos realizar una consulta, moojson es el nombre por el que se identifica, y siempre deberá empezar así, tu_ID indica a que ID queremos que aparezcan los resultados, es decir, si tenemos un DIV con "id=tu_ID" los resultados recibidos se mostrarán aquí. "TRUE" indica si queremos que se muestre el nombre de la propiedad, es decir, en el ejemplo anterior JSON, una propiedad es color, y su valor rojo, por defecto siempre mostraremos rojo, pero en algunos casos quizás nos interese que se muestre también el nombre de la propiedad. Para finalizar "FALSE" significa si queremos mostrar los resultados en DIV (false) o bien en TABLE (true).
El atributo href indica que documento realizará la consulta ajax. Siempre se deberá poner # delante.
Con esto será suficiente, a continuación os pongo una imagen que muestra su funcionamiento:
La clase mooJson sigue los estándares de W3C y es compatible con el DOCTYPE XHTML 1.0 Strict / Transitional y XHTML 1.1
A demás funciona con los navegadores Internet Explorer 6, 7 y 8, Firefox 2 y 3, Safari 2 y 3, Opera 9.5 y Chrome 1.0
Para finalizar, solo deciros que la clase también permite recoger los datos del formulario y enviarlos, de esta manera, podremos realizar multiples combinaciones realizando consultas a la base de datos.
Os dejo un link con el ejemplo y otro para descargar Usar Ajax con mootools y JSON
NOTA: el ejemplo del formulario no funciona, pues el servidor donde esta alojado no tiene base de datos, pero si queréis os he puesto un .sql con la tabla y los insert para hacer las pruebas.
Cualquier duda de la clase, mejora, etc. agradecería que me informárais.
Gracias y un saludo
He creado una clase llamada moojson para realizar las peticiones al servidor con Request.JSON de hay un poco mi tardanza, pero ha valido la pena.
Porqué Json? pues muy simple, Request.HTML solo recibimos texto formateado en código html, sin embargo con JSON recibimos un objeto, donde dentro hay propiedades, objetos, arrays, etc. Su gran dinamismo y el estar pensado para trabajar con javaScript, lo hace único y mejor que usar XML.
Un ejemplo que ilustra su sencillez: Si tenemos un objeto "coche" y una propiedad "color", solo con poner coche.color tendremos el color. así de sencillo. En el caso de un array "caracteristicas" dentro de "coche", podremos acceder a su contenido con coche.caracteristicas[0]. A continuación os pongo este ejemplo como sería en JSON:
{ "coche": {
"color": "rojo",
"caracteristicas": ["AA","4 Airbags","5 puertas"]
}
}
La clase que he creado permite realizar multiples consultas ajax dentro del mismo documento a diferentes documentos (PHP, ASP, .NET ...).
Actualmente funciona solo con los tag A (link) y INPUT (del tipo BUTTON), cuando mejore la clase permitirá algunos más.
Para realizar un consulta ajax con un link, lo podemos realizar de la siguiente manera:
<a class="moojson.tu_ID.true.false" href="#tudocumento.php">tu_link</a>
El atributo class es donde especificamos que queremos realizar una consulta, moojson es el nombre por el que se identifica, y siempre deberá empezar así, tu_ID indica a que ID queremos que aparezcan los resultados, es decir, si tenemos un DIV con "id=tu_ID" los resultados recibidos se mostrarán aquí. "TRUE" indica si queremos que se muestre el nombre de la propiedad, es decir, en el ejemplo anterior JSON, una propiedad es color, y su valor rojo, por defecto siempre mostraremos rojo, pero en algunos casos quizás nos interese que se muestre también el nombre de la propiedad. Para finalizar "FALSE" significa si queremos mostrar los resultados en DIV (false) o bien en TABLE (true).
El atributo href indica que documento realizará la consulta ajax. Siempre se deberá poner # delante.
Con esto será suficiente, a continuación os pongo una imagen que muestra su funcionamiento:
La clase mooJson sigue los estándares de W3C y es compatible con el DOCTYPE XHTML 1.0 Strict / Transitional y XHTML 1.1
A demás funciona con los navegadores Internet Explorer 6, 7 y 8, Firefox 2 y 3, Safari 2 y 3, Opera 9.5 y Chrome 1.0
Para finalizar, solo deciros que la clase también permite recoger los datos del formulario y enviarlos, de esta manera, podremos realizar multiples combinaciones realizando consultas a la base de datos.
Os dejo un link con el ejemplo y otro para descargar Usar Ajax con mootools y JSON
NOTA: el ejemplo del formulario no funciona, pues el servidor donde esta alojado no tiene base de datos, pero si queréis os he puesto un .sql con la tabla y los insert para hacer las pruebas.
Cualquier duda de la clase, mejora, etc. agradecería que me informárais.
Gracias y un saludo
Etiquetas: ajax, javascript, json, mootools
Autor: entrada de Katan Hora: 11:23
