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

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

0. Índice de contenidos.

• 1. Introducción.
• 2. Entorno.
• 3. El código.
• 4. La demo.
• 5. Referencias.
• 6. Conclusiones.

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:

  <h1>Ajax getJSON Flickr Web Service</h1>
  
  <!--#buscador -->
  <fieldset>
    <legend>Buscador de imágenes en Flickr</legend>
    <div id="search">
      <label for="tags">Tags: </label>
      <input type="text" name="tags" value="" />
      <input type="submit" value="Buscar" />
      <span> </span><img src="./images/ajax-loader.gif" id="loading" style="display:none;" />
    </div>
  </fieldset>
  
  <!--#resultado -->
  <fieldset>
    <legend>Resultados para: <span id="tagsToSearch"></span></legend>
    <div id="images">
    </div>
  </fieldset>
  

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:

  // el código se ejecutará cuando la página esté totalmente cargada
  $(document).ready( function(){
  
    // obtenemos el botón de búsqueda y le añadimos un comportamiento al evento onClick
    $("input:submit").click(function () {
    
      // obtenemos el valor del campo de búsqueda, el que contiene el texto de la misma
      var tags = $("input:tags").val();

      // hacemos uso del soporte de Ajax que evalua el resultado como un objeto JSON, pasándole como parámetro la url del
      // servicio web de flickr, asignando el texto de la búsqueda. El segundo parámetro de la función es un método de callback
      // que se ejecutará tras la respuesta del servicio y que recibe el objeto JSON en el parámetro data.
      $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+tags+"&tagmode=any&format=json&jsoncallback=?",
        function(data){
	
          // limpiamos el contenedor del resultado de la búsqueda.
          $("#images").empty();
	  
          // por cada uno de los items que contiene el objeto JSON obtenido invoca a una función que recibe el ordinal y el propio item
          $.each(data.items, function(i,item){
	  
            // creamos un nodo de tipo img al que asociamos en su atributo src una referencia a la imagen del item
            // que se encuentra en el campo media.m; 
            // y en sus atributos alt y title el título de la misma.
            // y añadimos, en la misma línea, el nodo img creado al contenedor de imágenes
            $("<img/>").attr("src", item.media.m).attr("alt", item.title).attr("title", item.title).appendTo("#images");
	    
            // cortamos el proceso al llegar a 20 imágenes
            if ( i == 20 ) return false;
        });
      });
      
      // asignamos el texto de búsqueda al campo de salida del resultado
      $("#tagsToSearch").text(tags);
    });

   // registramos sobre el nodo imagen que mostrará la actividad el comportamiento de mostrarse
   // cuando exista una petición activa
   $("#loading").ajaxStart(function(){
     $(this).show();
   });
       
   // del mismo modo, cuando termine una petición se ocultará
   $("#loading").ajaxComplete(
      function(event,request, settings) {
        $(this).hide();
      }
   );
   
  });

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

Tags:
 

Resultados para:

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

5. Referencias.

• jQuery.getJSON documentation
• http://code.google.com/p/jquery-flickr/
• http://ptflickrgallery.sourceforge.net/web/index.html

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