Cómo consumir un servicio web RESTful con el soporte de Ajax y JSON de jQuery.

4
31132

Cómo consumir un servicio web RESTful con el soporte de Ajax y JSON de jQuery.

0. Índice de contenidos.

1. Introducción

Después de ver en la introducción a jQuery
lo básico, ahora vamos a seguir analizando como explotar sus funcionalidades, mostrando un ejemplo más complejo.

El objetivo de este tutorial es demostrar cómo consumir un servicio web RESTful, accesible a través de una URL sin ningún tipo de envolturas,
con el soporte de Ajax de jQuery y tratando la respuesta del servicio, en formato JSON, recargando el ábrol DOM del cliente.

En concreto veremos cómo:

  • escribir un código html limpio de modo que el comportamiento sea inyectado a través de javascript,
  • conectarnos a un servicio web RESTful púlbico, un servicio de búsqueda de imágenes por etiquetas de
    Flickr que puede devolver el resultado en formato JSON,
  • tratar el resultado del servicio (el objeto JSON) y recargar el árbol DOM del cliente mostrando las imágenes,
  • engancharnos al ciclo de vida de la petición para mostrar un gif animado mientras se produce la petición Ajax en segundo plano.

Y, todo ello, en pocas líneas de código 😉

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17′ (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).
  • Sistema Operativo: Mac OS X Snow Leopard 10.6.1
  • jQuery 1.3.2.

3. El código.

El código html podría quedar como el que sigue:

Se trata de:

  • un campo de búsqueda (id=tags) y un botón de búsqueda (type=submit), acompañados de una imagen (id=loading)
    que mostrará la actividad del proceso Ajax, por defecto deshabilitada, y
  • un contenedor del resultado, por defecto vacío, que identificamos por el id = images, acompañado de un campo de
    salida (id=tagsToSearch) que mostrará el literal de la búsqueda.

A continuación, el código jQuery que inyecta el comportamiento, está autocomentado:

Si Obviamos los comentarios, el código también es reducido, quizás algo complejo de entender al principio, pero no son más de objetos con
sus caracteristicas y comportamientos.

En cuanto al tratamiento del objeto JSON de respuesta, es como trabajar con un array en javascript, podéis obtener más información en este tutorial
de introducción a JSON.

4. La demo.

A continuación el código funcionando:

Ajax getJSON Flickr Web Service

Buscador de imágenes en Flickr

Resultados para:

Probad a introducir un tag y pulsar el botón de buscar.

5. Referencias.

6. Conclusiones.

Creo que es un buen ejemplo, aunque también lo podíamos haber enlazado con alguno de los
servicios web RESTful
que generamos con el soporte de NetBeans en este otro tutorial
.

Con poco código, gran funcionalidad, haciendo uso de inyección de comportamiento.

¿Que lo podíamos haber hecho también con prototypejs?, efectivamente y si, pero el código en jQuery es más claro y la funcionalidad más potente.

Un saludo.

Jose

jmsanchez@autentia.com

4 Comentarios

  1. Estoy usando en .net Coolite, que es como un puente para la utilizacion de EXTJS, que me ha parecido excelente, voy a probar jQuery y si tu has usando EXTJS me gustaria saber cual fue tu experiencia al usarlo y la comparativa frente a jQuery. Saludos.

Dejar respuesta

Please enter your comment!
Please enter your name here