Polymer - Iron Ajax

The <iron-ajax> element is useful in making ajax calls.

   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">

When you set auto to true, a request is made by an element when its properties url, params, or body are changed. As you can see, the component has several attributes available −

  • url − An attribute where you place the url to the API endpoint.

  • params − An attribute where you can pass the JSON with the request parameters.

  • handle-as − Specifies what data must be stored in the response property. By default, the data is stored in the json format.

  • on-response − An attribute which can tell the iron-ajax component by what method the response is handled.

Changing multiple attributes sequentially causes automatically generated requests to be debounced.

You can call generateRequest on the element to trigger a request explicitly.


In the following example, we have a link to the iron-ajax and paper-input components used from the CDN.

<!DOCTYPE html>
      <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">
      <dom-module id = "data-bind">

            <paper-input label = "Write something..." id = "input" value = "{{q::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">
            (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);


To run the application, navigate to your project directory and run the following command −

polymer serve

Now open the browser and navigate to Following will be the output.

Iron Ajax
Kickstart Your Career

Get certified by completing the course

Get Started