Polymère - Fer Ajax

L'élément <iron-ajax> est utile pour effectuer des appels 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>

Lorsque vous définissez auto à true, une requête est faite par un élément lorsque ses propriétés url, params, ou bodysont modifiés. Comme vous pouvez le voir, le composant a plusieurs attributs disponibles -

  • url - Un attribut dans lequel vous placez l'URL du point de terminaison de l'API.

  • params - Un attribut où vous pouvez transmettre le JSON avec les paramètres de la requête.

  • handle-as- Spécifie quelles données doivent être stockées dans la propriété de réponse. Par défaut, les données sont stockées au format json.

  • on-response - Un attribut qui peut dire au composant iron-ajax par quelle méthode la réponse est gérée.

La modification séquentielle de plusieurs attributs entraîne le rejet des demandes générées automatiquement.

Tu peux appeler generateRequest sur l'élément pour déclencher une requête explicitement.

Exemple

Dans l'exemple suivant, nous avons un lien vers le iron-ajax et paper-input composants utilisés à partir du 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>

Production

Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante -

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.