third_party/polymer/components/core-ajax/core-xhr.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9 <!--
  10 /**
  11  * @group Polymer Core Elements
  12  *
  13  * core-xhr can be used to perform XMLHttpRequests.
  14  *
  15  *     <core-xhr id="xhr"></core-xhr>
  16  *     ...
  17  *     this.$.xhr.request({url: url, params: params, callback: callback});
  18  *
  19  * @element core-xhr
  20  */
  21 -->
  22
  23 <link rel="import" href="../polymer/polymer.html">
  24
  25 <polymer-element name="core-xhr" hidden>
  26
  27   <script>
  28
  29     Polymer('core-xhr', {
  30
  31       /**
  32        * Sends a HTTP request to the server and returns the XHR object.
  33        *
  34        * @method request
  35        * @param {Object} inOptions
  36        *    @param {String} inOptions.url The url to which the request is sent.
  37        *    @param {String} inOptions.method The HTTP method to use, default is GET.
  38        *    @param {boolean} inOptions.sync By default, all requests are sent asynchronously. To send synchronous requests, set to true.
  39        *    @param {Object} inOptions.params Data to be sent to the server.
  40        *    @param {Object} inOptions.body The content for the request body for POST method.
  41        *    @param {Object} inOptions.headers HTTP request headers.
  42        *    @param {String} inOptions.responseType The response type. Default is 'text'.
  43        *    @param {boolean} inOptions.withCredentials Whether or not to send credentials on the request. Default is false.
  44        *    @param {Object} inOptions.callback Called when request is completed.
  45        * @returns {Object} XHR object.
  46        */
  47       request: function(options) {
  48         var xhr = new XMLHttpRequest();
  49         var url = options.url;
  50         var method = options.method || 'GET';
  51         var async = !options.sync;
  52         //
  53         var params = this.toQueryString(options.params);
  54         if (params && method == 'GET') {
  55           url += (url.indexOf('?') > 0 ? '&' : '?') + params;
  56         }
  57         var xhrParams = this.isBodyMethod(method) ? (options.body || params) : null;
  58         //
  59         xhr.open(method, url, async);
  60         if (options.responseType) {
  61           xhr.responseType = options.responseType;
  62         }
  63         if (options.withCredentials) {
  64           xhr.withCredentials = true;
  65         }
  66         this.makeReadyStateHandler(xhr, options.callback);
  67         this.setRequestHeaders(xhr, options.headers);
  68         xhr.send(xhrParams);
  69         if (!async) {
  70           xhr.onreadystatechange(xhr);
  71         }
  72         return xhr;
  73       },
  74
  75       toQueryString: function(params) {
  76         var r = [];
  77         for (var n in params) {
  78           var v = params[n];
  79           n = encodeURIComponent(n);
  80           r.push(v == null ? n : (n + '=' + encodeURIComponent(v)));
  81         }
  82         return r.join('&');
  83       },
  84
  85       isBodyMethod: function(method) {
  86         return this.bodyMethods[(method || '').toUpperCase()];
  87       },
  88
  89       bodyMethods: {
  90         POST: 1,
  91         PUT: 1,
  92         PATCH: 1,
  93         DELETE: 1
  94       },
  95
  96       makeReadyStateHandler: function(xhr, callback) {
  97         xhr.onreadystatechange = function() {
  98           if (xhr.readyState == 4) {
  99             callback && callback.call(null, xhr.response, xhr);
 100           }
 101         };
 102       },
 103
 104       setRequestHeaders: function(xhr, headers) {
 105         if (headers) {
 106           for (var name in headers) {
 107             xhr.setRequestHeader(name, headers[name]);
 108           }
 109         }
 110       }
 111
 112     });
 113
 114   </script>
 115
 116 </polymer-element>