Quizás puede sorprender que en todo el Manual de Polymer no hemos abordado ni una sola vez funciones para el trabajo sencillo con solicitudes asíncronas al servidor, comúnmente conocidas como Ajax. Realmente no es una casualidad, ya que el core de Polymer no incluye funciones específicas para trabajar con Ajax.

Sin embargo, lo anterior no quiere decir que se haya dejado fuera Ajax en el conjunto de utilidades ofrecidas por la librería, solamente que su implementación no depende de Polymer en sí, sino de componentes basados en Polymer, ofrecidos por el propio equipo de Polymer.

Componente iron-ajax

Dentro del catálogo de componentes de Polymer encontramos la clasificación "Iron", que incluyen elementos que teóricamente se deberán usar en conjunto con otros, para resolver problemas mayores. El componente iron-ajax es el que se usará para realizar solicitudes Ajax, siendo un elemento genérico para hacer cualquier tipo de llamada, que generalmente usarás en el marco de otros componentes para producir elementos más complejos que resuelvan tareas específicas.

Lo bueno de iron-ajax, así como los componentes de Polymer y Web Components en general, es que permiten implementar el comportamiento de manera declarativa. Es decir, mediante el propio HTML, usando el custom element iron-ajax y definiendo su configuración por medio de atributos en la etiqueta, podemos implementar cualquier solicitud asíncrona al servidor y obtener la respuesta de varias maneras distintas.

Lo primero que tenemos que hacer si queremos implementar una solicitud Ajax con iron-ajax es hacer el import del componente. Para ello lo habremos de instalar mediante Bower, con el comando que encontramos en la documentación de iron-ajax.

bower install --save PolymerElements/iron-ajax

Una vez instalado en el proyecto, podemos hacer el correspondiente import:

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

Una vez hecho el import, podemos usar el componente, colocando la correspondiente etiqueta del custom element.

<iron-ajax
   url="http://jsonplaceholder.typicode.com/users/2"
   auto
   handle-as="json"
   last-response="{{data}}"
></iron-ajax>

En esta primera aproximación tenemos el componente configurado con diversos atributos que detallamos:

• url: indicamos la ruta a la que queremos conectar con la llamada Ajax.
• auto: hace la conexión automáticamente, según se carga la página y el propio componente, al inicializarse, se realizará la llamada sin que tengamos que intervenir manual o imperativamente.
• handle-as: esto nos permite indicarle cómo debe tratar la respuesta. Existen varias configuraciones posibles, en este caso se indica que la respuesta la tratará como un JSON, de modo que lo que recibiremos será un objeto Javascript resultado de parsear el JSON recibido.
• last-response: este parámetro nos sirve para decirle que la respuesta la tiene que bindear directamente a una propiedad de nuestro componente. Como vemos, el valor que se asigna a last-response está bindeado con "2-way-binding" a la propiedad "data". Es una de las maneras, la más sencilla, de recuperar datos de una solicitud Ajax. Cada vez que la URL cambie, se realizará la conexión y los datos serán asignados a la propiedad bindeada "data", si la URL cambia muchas veces esa propiedad data irá cambiando también y en ella siempre tendremos el valor de la última operación Ajax recibida.

Gracias a la configuración usada, no tenemos que implementar ni una línea Javascript para realizar la solicitud Ajax, ya que se realizará automáticamente y los datos se irán al sistema de binding de Polymer para usarlos allá donde se necesiten.

La respuesta recibida se asigna en la propiedad "data", que podemos usar para lo que necesitemos dentro del componente, o podremos bindear a otros componentes donde se necesite. El dato en sí será un JSON y Polymer ya nos lo entrega en forma de objeto Javascript. En este caso el objeto tendrá los datos de un usuario y una de sus propiedades es "name", que contiene su nombre. Podríamos mostrarlo dentro del template del componente con el código:

Muestro [[data.name]]

Señal de carga ajax

Algo típico que querrás hacer cuando se realiza una solicitud ajax es mostrar la típica rueda que gira para indicar al usuario que hay un dato que está cargando. Esto es muy sencillo de realizar en un componente iron-ajax porque el propio componente expone hacia afuera una propiedad llamada "loading", que es un boleano que indica si está o no esperando una respuesta del servidor.

Lo general es que tengas ese atributo "loading" bindeado a una propiedad que usarás dentro del componente para expresar la carga.

<iron-ajax
   url="http://jsonplaceholder.typicode.com/users/2"
   auto
   handle-as="json"
   last-response="{{data}}"
   loading="{{cargando}}"
></iron-ajax>

Ahora tenemos en la propiedad "cargando" el true/false dependiendo de si está o no esperando a recibir la respuesta. Algo muy sencillo sería usar esa propiedad dentro de un atributo hidden de una etiqueta que muestre el un mensaje de carga:

<div hidden$="[[!cargando]]">Estamos cargando datos...</div>

Pero otra cosa que podremos hacer, mucho más atractiva visualmente, es colocar una rueda que se mueve para expresar la carga. Podríamos usar nuestra propia implementación con un Gif animado o una animación CSS, pero entre el catálogo de elementos de Polymer tememos un componente llamado "paper-spinner" que ya hace esto.

Si deseamos usar el spinner que Polymer ya nos ofrece debemos primero importarlo.

<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">

A continuación podemo usarlo dentro del template, bindeando el boleano que teníamos en la propiedad "cargando" en su atributo "active".

<paper-spinner alt="Cargando el usuario..." active="[[cargando]]"></paper-spinner>

Ejemplo de componente que realiza Ajax

Antes de revisar un comportamiento más personalizado todavía de iron-ajax, vamos a ver un ejemplo completo de componente que implementa la configuración automática vista hasta ahora.

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">

<dom-module id="prueba-ajax">
  <template>
    <iron-ajax
      auto
      url="http://jsonplaceholder.typicode.com/users/2"
      handle-as="json"
      last-response="{{data}}"
      loading="{{cargando}}"
    ></iron-ajax>
    <paper-spinner alt="Cargando el usuario..." active="[[cargando]]"></paper-spinner>

    <div hidden$="[[!cargando]]">cargando</div>

    Muestro [[data.name]]
  </template>
  <script>
    Polymer({
      is: "prueba-ajax"
    });
  </script>
</dom-module>

Como más o menos hemos explicado todo lo anterior, esperamos que este código no represente ningún problema para entenderlo.

Ejecutar la llamada Ajax manualmente

El caso anterior realizaba la solicitud Ajax de manera automática, pero no es eso lo que siempre vamos a desear. Hay momentos en los que sólo querremos ejecutar la solicitud en el momento en el que tengamos ciertos datos, o en el momento en el que el usuario realice cierta acción.

Para ello, simplemente tendremos que ejecutar el método generateRequest() del componente iron-ajax y se enviará la solicitud a la URL indicada. Obviamente, también requerirá quitar el atributo "auto", para que no se ejecute automáticamente.

<iron-ajax
  id="elajax"
  url="http://jsonplaceholder.typicode.com/users"
  handle-as="json"
  last-response="{{users}}"
  loading="{{cargando}}"
></iron-ajax>

Además, en este caso nos veremos obligados a colocar un identificador al componente id="elajax", lo que nos permitirá referirnos a él desde el código Javascript.

En nuestro ejemplo vamos a tener una división en la que colocaremos un evento "tap", de modo que cuando el usuario haga clic (o toque con el dedo) el elemento, se produzca la llamada Ajax.

<div on-tap="buscar">
  Buscar!
</div>

Ahora veremos el código del método "buscar", ejecutado al hacer tap. En ese método, de manera imperativa, solicitaremos el componente iron-ajax que inicie la solicitud al servidor.

buscar: function() {
  this.$.elajax.generateRequest();
}

En este caso, la URL de la solicitud al servidor es esta: http://jsonplaceholder.typicode.com/users y el JSON que nos entrega será un listado de usuarios. Podremos mostrar todos los usuarios mediante un template de repetición.

<ul>
  <template is="dom-repeat" items="[[users]]">
    <li>[[item.name]]</li>
  </template>
</ul>

Hemos implementado el listado con una sencilla lista UL y mostrando en un LI cada uno de los nombres de usuarios del array JSON recibido.

El código completo de esta variación del ejemplo de acceso a Ajax lo puedes ver a continuación.

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">

<dom-module id="ajax-generate-request">
  <template>
    <style>
      div{
        border-radius: 6px;
        padding: 10px;
        background-color: beige;
        width: 120px;
        text-align: center;
      }
    </style>
    <iron-ajax
      id="elajax"
      url="http://jsonplaceholder.typicode.com/users"
      handle-as="json"
      last-response="{{users}}"
      loading="{{cargando}}"
    ></iron-ajax>
    <paper-spinner alt="Cargando el usuario..." active="[[cargando]]"></paper-spinner>

    <div on-tap="buscar">
      Buscar!
    </div>

<ul>
<template is="dom-repeat" items="[[users]]">
  <li>[[item.name]]</li>
</template>
</ul>
  </template>
  <script>
    Polymer({
      is: "ajax-generate-request",

      properties: {
        cargando: Boolean,
        users: Array
      },

      buscar: function() {
        this.$.elajax.generateRequest();
      }
    });
  </script>
</dom-module>

Conclusión Ajax en Polymer

Hemos visto dos ejemplos sencillos de trabajo con Ajax en Polymer, con el componente iron-ajax. A mi modo de ver, es sorprendente lo que se consigue en Polymer, solo de manera declarativa en el HTML y sin ninguna instrucción Javascript. Las personas que estamos en el mundo del desarrollo web desde siempre, y que hemos tenido que pasar por muchas etapas y formas para el trabajo con Ajax, seguro que pensarán igual.

Aunque los ejemplos han abarcado dos usos muy habituales, hay que advertir que no es todo lo que podrás hacer con Ajax, ya que para el trabajo en operativas más complejas necesitarás conocer otro componente llamado iron-request, que explicaremos en un artículo más adelante.

Antes de acabar quiero compartir también un vídeo donde puedes ver un ejemplo de Ajax con Polymer, es bastante cortito y aclarador.