Polimero - Iron Ajax

L'elemento <iron-ajax> è utile per effettuare chiamate 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>

Quando si imposta auto a true, una richiesta viene effettuata da un elemento quando le sue proprietà url, params, o bodysono cambiati. Come puoi vedere, il componente ha diversi attributi disponibili:

  • url - Un attributo in cui inserisci l'URL nell'endpoint API.

  • params - Un attributo in cui puoi passare il JSON con i parametri della richiesta.

  • handle-as- Specifica quali dati devono essere archiviati nella proprietà della risposta. Per impostazione predefinita, i dati vengono archiviati nel formato json.

  • on-response - Un attributo che può dire al componente iron-ajax con quale metodo viene gestita la risposta.

La modifica sequenziale di più attributi causa l'annullamento del rimbalzo delle richieste generate automaticamente.

Puoi chiamare generateRequest sull'elemento per attivare una richiesta in modo esplicito.

Esempio

Nell'esempio seguente, abbiamo un collegamento al file iron-ajax e paper-input componenti utilizzati dalla 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>

Produzione

Per eseguire l'applicazione, vai alla directory del tuo progetto ed esegui il seguente comando:

polymer serve

Ora apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.