gk-ajax.html

<element name="gk-ajax">

  <template>
    <div id="{{id}}" url="{{url}}" dataType="{{handleAs}}" data="{{data}}" type="{{method}}" headers="{{headers}}" contentType="{{contentType}}" withCredentials="{{withCredentials}}" xhrFields="{{xhrArgs}}" auto="{{auto}}"></div>
  </template>

  <script>
  var utils = require('./js/utils'),
    properties = ['url', 'data', 'headers', 'contentType', 'withCredentials', 'auto', {
      'handleAs': 'dataType',
      'method': 'type',
      'xhrArgs': 'xhrFields'
    }];

  function getAjaxSettings($ele) {
    var settings = {};
    ['url', 'dataType', 'type', 'contentType'].forEach(function(attr) {
      settings[attr] = $ele.attr(attr);
    });
    ['data', 'headers', 'xhrFields'].forEach(function(attr) {
      var json = $ele.attr(attr);
      json && (settings[attr] = JSON.parse(json));
    });
    settings.xhrFields = settings.xhrFields || {};
    settings.xhrFields.withCredentials = !!$ele.attr('withCredentials');
    settings.success = function(resp) {
      $ele.gk().response = resp;
      $ele.trigger('response', arguments);
    };
    settings.error = function() {
      $ele.trigger('error', arguments);
    };
    settings.complete = function() {
      $ele.trigger('complete', arguments);
    };
    return settings;
  }

  registerElement('gk-ajax', {

    response: null,

    init: function() {
      var self = this;
      utils.exposeProperties(properties, self,
        function(attr) {
          return self.$ele.attr(attr);
        },
        function(attr, val) {
          self.$ele.attr(attr, val);
        }
      );
      if (typeof self.auto !== 'undefined' && self.auto !== 'false') {
        self.go();
      }
    },

    go: function() {
      $.ajax(getAjaxSettings(this.$ele));
    }

  });
  </script>

</element>