Polímero - Hierro Ajax

El elemento <iron-ajax> es útil para realizar llamadas ajax.

<iron-ajax
   auto url = "https://www.googleapis.com/youtube/v3/search"
   params = '{"part":"snippet", "q":"polymer", "key": "YOUTUBE_API_KEY", "type": "video"}'
   handle-as = "json"
   on-response = "handleResponse"
   debounce-duration = "500">
</iron-ajax>

Cuando estableces auto a verdadero, un elemento hace una solicitud cuando sus propiedades url, paramso bodyestán cambiados. Como puede ver, el componente tiene varios atributos disponibles:

url - Un atributo donde coloca la URL al punto final de la API.
params - Un atributo donde puede pasar el JSON con los parámetros de la solicitud.
handle-as: Especifica qué datos se deben almacenar en la propiedad de respuesta. De forma predeterminada, los datos se almacenan en formato json.
on-response - Un atributo que puede decirle al componente iron-ajax por qué método se maneja la respuesta.

El cambio de varios atributos de forma secuencial hace que las solicitudes generadas automáticamente se eliminen.

Puedes llamar generateRequest en el elemento para activar una solicitud de forma explícita.

Ejemplo

En el siguiente ejemplo, tenemos un enlace al iron-ajax y paper-input componentes utilizados de la CDN.

<!DOCTYPE html>
<html>
   <head>
      <title>iron-ajax</title>
      <link rel = "import"
         href = "https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/paper-input/paper-input.html">
      <link rel = "import"
         href = "https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/iron-ajax/iron-ajax.html">
   </head>
	  
   <body>
      <dom-module id = "data-bind">

         <template>
            <paper-input label = "Write something..." id = "input" value = "{{q::input}}"
               autofocus>
            </paper-input>
            <p>You typed: <b>{{q}}</b></p>
            <p>Echo: <b>{{echo}}</b></p>
           
            <iron-ajax auto
               url = "http://dict.leo.org/dictQuery/m-query/conf/ende/query.conf/strlist.json"
               params = "{'q': q}" handle-as = "json" on-response = "_handleResponse"
               debounce-duration = "500">
            </iron-ajax>
         </template>
       
         <script>
            (function () {
               Polymer ({
                  is: 'data-bind', properties: {
                     echo: {
                        type: String, value: 'waiting ...', reflectToAttribute: true
                     }
                  },
                  _handleResponse: function(event, request) {
                     var response = request.response;
                     this.echo = JSON.stringify(response);
                  }
               });
            })();
         </script>
      </dom-module>
    
      <data-bind></data-bind>
   </body>
</html>

Salida

Para ejecutar la aplicación, navegue hasta el directorio de su proyecto y ejecute el siguiente comando:

polymer serve

Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

↰ Previous page