├── README.md
├── bower.json
├── core-ajax.html
├── core-xhr.html
├── demo-progress.html
├── demo.html
├── index.html
├── metadata.html
└── test
    ├── core-ajax-progress.html
    ├── core-ajax-race.html
    ├── core-ajax.html
    └── index.html


/README.md:
--------------------------------------------------------------------------------
1 | core-ajax
2 | =========
3 | 
4 | **This element is compatible with Polymer 0.5 and lower only, and will be deprecated.**  
5 | You can check out a similar 0.8-compatible version of this element at [https://github.com/polymerelements/iron-ajax](https://github.com/polymerelements/iron-ajax)
6 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "core-ajax",
 3 |   "private": true,
 4 |   "dependencies": {
 5 |     "polymer": "Polymer/polymer#master"
 6 |   },
 7 |   "devDependencies": {
 8 |     "polymer-test-tools": "Polymer/polymer-test-tools#master"
 9 |   }
10 | }


--------------------------------------------------------------------------------
/core-ajax.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 | The `core-ajax` element exposes `XMLHttpRequest` functionality.
 14 | 
 15 |     <core-ajax
 16 |         auto
 17 |         url="http://gdata.youtube.com/feeds/api/videos/"
 18 |         params='{"alt":"json", "q":"chrome"}'
 19 |         handleAs="json"
 20 |         on-core-response="{{handleResponse}}"></core-ajax>
 21 | 
 22 | With `auto` set to `true`, the element performs a request whenever
 23 | its `url`, `params` or `body` properties are changed.
 24 | 
 25 | Note: The `params` attribute must be double quoted JSON.
 26 | 
 27 | You can trigger a request explicitly by calling `go` on the
 28 | element.
 29 | 
 30 | @element core-ajax
 31 | @status beta
 32 | @homepage github.io
 33 | -->
 34 | <link rel="import" href="core-xhr.html">
 35 | <polymer-element name="core-ajax" hidden attributes="url handleAs auto params response error method headers body contentType withCredentials progress loading">
 36 | <script>
 37 | 
 38 |   Polymer('core-ajax', {
 39 |     /**
 40 |      * Fired when a response is received.
 41 |      *
 42 |      * @event core-response
 43 |      */
 44 | 
 45 |     /**
 46 |      * Fired when an error is received.
 47 |      *
 48 |      * @event core-error
 49 |      */
 50 | 
 51 |     /**
 52 |      * Fired whenever a response or an error is received.
 53 |      *
 54 |      * @event core-complete
 55 |      */
 56 | 
 57 |     /**
 58 |      * The URL target of the request.
 59 |      *
 60 |      * @attribute url
 61 |      * @type string
 62 |      * @default ''
 63 |      */
 64 |     url: '',
 65 | 
 66 |     /**
 67 |      * Specifies what data to store in the `response` property, and
 68 |      * to deliver as `event.response` in `response` events.
 69 |      *
 70 |      * One of:
 71 |      *
 72 |      *    `text`: uses `XHR.responseText`.
 73 |      *
 74 |      *    `xml`: uses `XHR.responseXML`.
 75 |      *
 76 |      *    `json`: uses `XHR.responseText` parsed as JSON.
 77 |      *
 78 |      *    `arraybuffer`: uses `XHR.response`.
 79 |      *
 80 |      *    `blob`: uses `XHR.response`.
 81 |      *
 82 |      *    `document`: uses `XHR.response`.
 83 |      *
 84 |      * @attribute handleAs
 85 |      * @type string
 86 |      * @default 'text'
 87 |      */
 88 |     handleAs: '',
 89 | 
 90 |     /**
 91 |      * If true, automatically performs an Ajax request when either `url` or `params` changes.
 92 |      *
 93 |      * @attribute auto
 94 |      * @type boolean
 95 |      * @default false
 96 |      */
 97 |     auto: false,
 98 | 
 99 |     /**
100 |      * Parameters to send to the specified URL, as JSON.
101 |      *
102 |      * @attribute params
103 |      * @type string
104 |      * @default ''
105 |      */
106 |     params: '',
107 | 
108 |     /**
109 |      * The response for the current request, or null if it hasn't
110 |      * completed yet or the request resulted in error.
111 |      *
112 |      * @attribute response
113 |      * @type Object
114 |      * @default null
115 |      */
116 |     response: null,
117 | 
118 |     /**
119 |      * The error for the current request, or null if it hasn't
120 |      * completed yet or the request resulted in success.
121 |      *
122 |      * @attribute error
123 |      * @type Object
124 |      * @default null
125 |      */
126 |     error: null,
127 | 
128 |     /**
129 |      * Whether the current request is currently loading.
130 |      *
131 |      * @attribute loading
132 |      * @type boolean
133 |      * @default false
134 |      */
135 |     loading: false,
136 | 
137 |     /**
138 |      * The progress of the current request.
139 |      *
140 |      * @attribute progress
141 |      * @type {loaded: number, total: number, lengthComputable: boolean}
142 |      * @default {}
143 |      */
144 |     progress: null,
145 | 
146 |     /**
147 |      * The HTTP method to use such as 'GET', 'POST', 'PUT', or 'DELETE'.
148 |      * Default is 'GET'.
149 |      *
150 |      * @attribute method
151 |      * @type string
152 |      * @default ''
153 |      */
154 |     method: '',
155 | 
156 |     /**
157 |      * HTTP request headers to send.
158 |      *
159 |      * Example:
160 |      *
161 |      *     <core-ajax
162 |      *         auto
163 |      *         url="http://somesite.com"
164 |      *         headers='{"X-Requested-With": "XMLHttpRequest"}'
165 |      *         handleAs="json"
166 |      *         on-core-response="{{handleResponse}}"></core-ajax>
167 |      *
168 |      * @attribute headers
169 |      * @type Object
170 |      * @default null
171 |      */
172 |     headers: null,
173 | 
174 |     /**
175 |      * Optional raw body content to send when method === "POST".
176 |      *
177 |      * Example:
178 |      *
179 |      *     <core-ajax method="POST" auto url="http://somesite.com"
180 |      *         body='{"foo":1, "bar":2}'>
181 |      *     </core-ajax>
182 |      *
183 |      * @attribute body
184 |      * @type Object
185 |      * @default null
186 |      */
187 |     body: null,
188 | 
189 |     /**
190 |      * Content type to use when sending data.
191 |      *
192 |      * @attribute contentType
193 |      * @type string
194 |      * @default 'application/x-www-form-urlencoded'
195 |      */
196 |     contentType: 'application/x-www-form-urlencoded',
197 | 
198 |     /**
199 |      * Set the withCredentials flag on the request.
200 |      *
201 |      * @attribute withCredentials
202 |      * @type boolean
203 |      * @default false
204 |      */
205 |     withCredentials: false,
206 | 
207 |     /**
208 |      * Additional properties to send to core-xhr.
209 |      *
210 |      * Can be set to an object containing default properties
211 |      * to send as arguments to the `core-xhr.request()` method
212 |      * which implements the low-level communication.
213 |      *
214 |      * @property xhrArgs
215 |      * @type Object
216 |      * @default null
217 |      */
218 |     xhrArgs: null,
219 | 
220 |     created: function() {
221 |       this.progress = {};
222 |     },
223 | 
224 |     ready: function() {
225 |       this.xhr = document.createElement('core-xhr');
226 |     },
227 | 
228 |     receive: function(response, xhr) {
229 |       if (this.isSuccess(xhr)) {
230 |         this.processResponse(xhr);
231 |       } else {
232 |         this.processError(xhr);
233 |       }
234 |       this.complete(xhr);
235 |     },
236 | 
237 |     isSuccess: function(xhr) {
238 |       var status = xhr.status || 0;
239 |       return (status >= 200 && status < 300);
240 |     },
241 | 
242 |     processResponse: function(xhr) {
243 |       var response = this.evalResponse(xhr);
244 |       if (xhr === this.activeRequest) {
245 |         this.response = response;
246 |       }
247 |       this.fire('core-response', {response: response, xhr: xhr});
248 |     },
249 | 
250 |     processError: function(xhr) {
251 |       var response = this.evalResponse(xhr);
252 |       var error = {
253 |         statusCode: xhr.status,
254 |         response: response
255 |       };
256 |       if (xhr === this.activeRequest) {
257 |         this.error = error;
258 |       }
259 |       this.fire('core-error', {response: error, xhr: xhr});
260 |     },
261 | 
262 |     processProgress: function(progress, xhr) {
263 |       if (xhr !== this.activeRequest) {
264 |         return;
265 |       }
266 |       // We create a proxy object here because these fields
267 |       // on the progress event are readonly properties, which
268 |       // causes problems in common use cases (e.g. binding to
269 |       // <paper-progress> attributes).
270 |       var progressProxy = {
271 |         lengthComputable: progress.lengthComputable,
272 |         loaded: progress.loaded,
273 |         total: progress.total
274 |       }
275 |       this.progress = progressProxy;
276 |     },
277 | 
278 |     complete: function(xhr) {
279 |       if (xhr === this.activeRequest) {
280 |         this.loading = false;
281 |       }
282 |       this.fire('core-complete', {response: xhr.status, xhr: xhr});
283 |     },
284 | 
285 |     evalResponse: function(xhr) {
286 |       return this[(this.handleAs || 'text') + 'Handler'](xhr);
287 |     },
288 | 
289 |     xmlHandler: function(xhr) {
290 |       return xhr.responseXML;
291 |     },
292 | 
293 |     textHandler: function(xhr) {
294 |       return xhr.responseText;
295 |     },
296 | 
297 |     jsonHandler: function(xhr) {
298 |       var r = xhr.responseText;
299 |       try {
300 |         return JSON.parse(r);
301 |       } catch (x) {
302 |         console.warn('core-ajax caught an exception trying to parse response as JSON:');
303 |         console.warn('url:', this.url);
304 |         console.warn(x);
305 |         return r;
306 |       }
307 |     },
308 | 
309 |     documentHandler: function(xhr) {
310 |       return xhr.response;
311 |     },
312 | 
313 |     blobHandler: function(xhr) {
314 |       return xhr.response;
315 |     },
316 | 
317 |     arraybufferHandler: function(xhr) {
318 |       return xhr.response;
319 |     },
320 | 
321 |     urlChanged: function() {
322 |       if (!this.handleAs) {
323 |         var ext = String(this.url).split('.').pop();
324 |         switch (ext) {
325 |           case 'json':
326 |             this.handleAs = 'json';
327 |             break;
328 |         }
329 |       }
330 |       this.autoGo();
331 |     },
332 | 
333 |     paramsChanged: function() {
334 |       this.autoGo();
335 |     },
336 | 
337 |     bodyChanged: function() {
338 |       this.autoGo();
339 |     },
340 | 
341 |     autoChanged: function() {
342 |       this.autoGo();
343 |     },
344 | 
345 |     // TODO(sorvell): multiple side-effects could call autoGo
346 |     // during one micro-task, use a job to have only one action
347 |     // occur
348 |     autoGo: function() {
349 |       if (this.auto) {
350 |         this.goJob = this.job(this.goJob, this.go, 0);
351 |       }
352 |     },
353 | 
354 |     getParams: function(params) {
355 |       params = this.params || params;
356 |       if (params && typeof(params) == 'string') {
357 |         params = JSON.parse(params);
358 |       }
359 |       return params;
360 |     },
361 | 
362 |     /**
363 |      * Performs an Ajax request to the specified URL.
364 |      *
365 |      * @method go
366 |      */
367 |     go: function() {
368 |       var args = this.xhrArgs || {};
369 |       // TODO(sjmiles): we may want XHR to default to POST if body is set
370 |       args.body = this.body || args.body;
371 |       args.params = this.getParams(args.params);
372 |       args.headers = this.headers || args.headers || {};
373 |       if (args.headers && typeof(args.headers) == 'string') {
374 |         args.headers = JSON.parse(args.headers);
375 |       }
376 |       var hasContentType = Object.keys(args.headers).some(function (header) {
377 |         return header.toLowerCase() === 'content-type';
378 |       });
379 |       // No Content-Type should be specified if sending `FormData`.  
380 |       // The UA must set the Content-Type w/ a calculated  multipart boundary ID.
381 |       if (args.body instanceof FormData) {
382 |         delete args.headers['Content-Type'];
383 |       } 
384 |       else if (!hasContentType && this.contentType) {
385 |         args.headers['Content-Type'] = this.contentType;
386 |       }
387 |       if (this.handleAs === 'arraybuffer' || this.handleAs === 'blob' ||
388 |           this.handleAs === 'document') {
389 |         args.responseType = this.handleAs;
390 |       }
391 |       args.withCredentials = this.withCredentials;
392 |       args.callback = this.receive.bind(this);
393 |       args.url = this.url;
394 |       args.method = this.method;
395 | 
396 |       this.response = this.error = this.progress = null;
397 |       this.activeRequest = args.url && this.xhr.request(args);
398 |       if (this.activeRequest) {
399 |         this.loading = true;
400 |         var activeRequest = this.activeRequest;
401 |         // IE < 10 doesn't support progress events.
402 |         if ('onprogress' in activeRequest) {
403 |           this.activeRequest.addEventListener(
404 |               'progress',
405 |               function(progress) {
406 |                 this.processProgress(progress, activeRequest);
407 |               }.bind(this), false);
408 |         } else {
409 |           this.progress = {
410 |             lengthComputable: false,
411 |           }
412 |         }
413 |       }
414 |       return this.activeRequest;
415 |     },
416 | 
417 |     /**
418 |      * Aborts the current active request if there is one and resets internal
419 |      * state appropriately.
420 |      *
421 |      * @method abort
422 |      */
423 |     abort: function() {
424 |       if (!this.activeRequest) return;
425 |       this.activeRequest.abort();
426 |       this.activeRequest = null;
427 |       this.progress = {};
428 |       this.loading = false;
429 |     }
430 | 
431 |   });
432 | 
433 | </script>
434 | </polymer-element>
435 | 


--------------------------------------------------------------------------------
/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.toUpperCase() == '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>
117 | 


--------------------------------------------------------------------------------
/demo-progress.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <script src="../webcomponentsjs/webcomponents.js" debug></script>
 5 |   <meta charset="utf-8">
 6 |   <title>Race condition</title>
 7 | </head>
 8 | <body>
 9 |   <link rel="import" href="core-ajax.html">
10 |   <link rel="import" href="../paper-progress/paper-progress.html">
11 |   <polymer-element name="progress-test">
12 |     <template>
13 |       <core-ajax
14 |           id="ajax" auto
15 |           url="//httpbin.org/drip"
16 |           params="{{ {numbytes: numbytes, duration:5} }}"
17 |           response="{{response}}"
18 |           progress="{{progress}}"
19 |           loading="{{loading}}"
20 |           ></core-ajax>
21 | 
22 |       <!--
23 |         Ordinarily you'd gate on progress.lengthComputable, but we know the
24 |         length in this case (and httpbin sadly doesn't return a
25 |         Content-Length header for this requesthere).
26 | 
27 |         https://github.com/kennethreitz/httpbin/pull/160
28 |        -->
29 |       <div>
30 |         <button on-click="{{restart}}">Restart</button>
31 |         <template if="{{loading}}">
32 |           Loading...
33 |         </template>
34 |         <template if="{{!loading}}">
35 |           Loaded!
36 |         </template>
37 |       </div>
38 |       <template if="{{loading && progress.loaded}}">
39 |         <paper-progress
40 |             value="{{progress.loaded}}"
41 |             min="0"
42 |             max="{{numbytes}}">
43 |         </paper-progress><br>
44 |       </template>
45 |     </template>
46 |     <script>
47 |       Polymer('progress-test', {
48 |         loading: true,
49 |         i: 0,
50 |         numbytes: 1000,
51 |         pretty: function(i) {
52 |           return JSON.stringify(i, null, 2);
53 |         },
54 |         restart: function() {
55 |           this.$.ajax.abort();
56 |           this.$.ajax.go();
57 |         }
58 |       });
59 |     </script>
60 | 
61 |   </polymer-element>
62 | 
63 |   <progress-test></progress-test>
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | <html>
11 | <head>
12 | 
13 |   <title>core-ajax</title>
14 | 
15 |   <script src="../webcomponentsjs/webcomponents.js"></script>
16 |   <link rel="import" href="core-ajax.html">
17 | 
18 | </head>
19 | <body>
20 | 
21 |   <core-ajax auto url="//gdata.youtube.com/feeds/api/videos/" 
22 |       params='{"alt":"json", "q":"chrome"}'
23 |       handleAs="json"></core-ajax>
24 |    
25 |   <template repeat="{{response.feed.entry}}">
26 |     <div>{{title.$t}}</div>
27 |   </template>
28 |   
29 |   <script>
30 |     document.addEventListener('polymer-ready', function() {
31 |       var ajax = document.querySelector("core-ajax");
32 |       ajax.addEventListener("core-response", 
33 |         function(e) {
34 |           document.querySelector('template').model = {
35 |             response: e.detail.response
36 |           };
37 |         }
38 |       );
39 |     });
40 |   </script>
41 | 
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
 9 | -->
10 | <html>
11 | <head>
12 | 
13 |   <script src="../webcomponentsjs/webcomponents.js"></script>
14 |   <link rel="import" href="../core-component-page/core-component-page.html">
15 | 
16 | </head>
17 | <body unresolved>
18 | 
19 |   <core-component-page></core-component-page>
20 | 
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/metadata.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |     @license
 3 |     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 |     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 |     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 |     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 |     Code distributed by Google as part of the polymer project is also
 8 |     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | <x-meta id="core-ajax" label="Ajax" group="Core">
11 | 
12 |   <property name="handleAs" kind="select" options="json,text,xml,arraybuffer,blob,document"></property>
13 |   <property name="method" kind="select" options="GET,POST,PUT,DELETE"></property>
14 | 
15 |   <template>
16 |     <core-ajax handleAs="json" method="GET"></core-ajax>
17 |   </template>
18 | 
19 |   <template id="imports">
20 |     <link rel="import" href="core-ajax.html">
21 |   </template>
22 | 
23 | </x-meta>
24 | 


--------------------------------------------------------------------------------
/test/core-ajax-progress.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--
  3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 | -->
 10 | <html>
 11 | <head>
 12 |   <title>core-ajax</title>
 13 | 
 14 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
 15 |   <script src="../../web-component-tester/browser.js"></script>
 16 | 
 17 | 
 18 | 
 19 |   <link rel="import" href="../core-ajax.html">
 20 | 
 21 | </head>
 22 | <body>
 23 | 
 24 |   <core-ajax
 25 |     handleAs="json"
 26 |     auto></core-ajax>
 27 | 
 28 | <!--
 29 |     Test consistency of core-ajax's loading properties.
 30 |   -->
 31 |   <script>
 32 |     test('progress', function(done) {
 33 |       var ajax = document.querySelector("core-ajax");
 34 |       var xhr = sinon.useFakeXMLHttpRequest();
 35 |       var headers = {
 36 |         "Content-Type": "text/json"
 37 |       };
 38 |       var body = '{"content": "plentiful"}'
 39 |       var requests = this.requests = [];
 40 |       xhr.onCreate = function (xhr) {
 41 |           requests.push(xhr);
 42 |           // Polymer inspects the xhr object for the precense of onprogress to determine
 43 |           // whether to attach an event listener.
 44 |           xhr['onprogress'] = null;
 45 |       };
 46 |       var progressEvent = function(lengthComputable, loaded, total) {
 47 |         var progress = new ProgressEvent('progress', {
 48 |           lengthComputable: lengthComputable,
 49 |           loaded: loaded,
 50 |           total: total
 51 |         });
 52 |         return progress;
 53 |       }
 54 | 
 55 |       // Fake a file download by sending multiple progress events.
 56 |       async.series([
 57 |         function(cb) {
 58 |           ajax.url="http://example.org/downloadLargeFile"
 59 |           cb();
 60 |         },
 61 |         flush,
 62 |         animationFrameFlush,
 63 |         function(cb) {
 64 |           requests[0].dispatchEvent(progressEvent(true, 10, 100));
 65 |           cb();
 66 |         },
 67 |         flush,
 68 |         animationFrameFlush,
 69 |         function(cb) {
 70 |           assert(ajax.loading === true,
 71 |               "Request partially complete, but loading property was false.");
 72 |           var progress = ajax.progress;
 73 |           assert(progress.lengthComputable, "Progress should be computable");
 74 |           assert(progress.loaded == 10, "Expected 10 bytes loaded, got " + progress.loaded);
 75 |           assert(progress.total == 100, "Expected 100 bytes total, got " + progress.total);
 76 |           cb();
 77 |         },
 78 |         animationFrameFlush,
 79 |         function(cb) {
 80 |           requests[0].dispatchEvent(progressEvent(true, 100, 100));
 81 |           cb();
 82 |         },
 83 |         animationFrameFlush,
 84 |         function(cb) {
 85 |           assert(ajax.loading === true,
 86 |               "Request partially complete, but loading property was false.");
 87 |           var progress = ajax.progress;
 88 |           assert(progress.lengthComputable, "Progress should be computable");
 89 |           assert(progress.loaded == 100, "Expected 10 bytes loaded, got " + progress.loaded);
 90 |           assert(progress.total == 100, "Expected 100 bytes total, got " + progress.total);
 91 |           cb();
 92 |         },
 93 |         function(cb) {
 94 |           requests[0].respond(200, headers, body);
 95 |           cb();
 96 |         },
 97 |         animationFrameFlush,
 98 |         function(cb) {
 99 |           assert(ajax.loading === false,
100 |               "Request complete, but loading property was true.");
101 |           assert(ajax.response.content === "plentiful", "response not parsed");
102 |           cb();
103 |         }
104 |       ], done);
105 |     });
106 | </script>
107 | </body>
108 | </html>
109 | 


--------------------------------------------------------------------------------
/test/core-ajax-race.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | <html>
11 | <head>
12 |   <title>core-ajax</title>
13 | 
14 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
15 |   <script src="../../web-component-tester/browser.js"></script>
16 | 
17 | 
18 | 
19 |   <link rel="import" href="../core-ajax.html">
20 | 
21 | </head>
22 | <body>
23 | 
24 |   <core-ajax
25 |     handleAs="json"
26 |     auto></core-ajax>
27 | 
28 | <!--
29 |     Test that when core-ajax fires multiple times as requests are updated,
30 |     only the response from the most recent request is used to update the response
31 |     object.
32 |   -->
33 |   <script>
34 |     test('race-condition', function(done) {
35 |       var ajax = document.querySelector("core-ajax");
36 |       var xhr = sinon.useFakeXMLHttpRequest();
37 |       var headers = {
38 |         "Content-Type": "text/json"
39 |       };
40 |       var body = function(url) {
41 |         return '{"url": "' + url + '"}';
42 |       };
43 |       var requests = [];
44 |       xhr.onCreate = function (xhr) {
45 |           requests.push(xhr);
46 |       };
47 | 
48 |       // Make request1, then request2. request2 returns first, followed by request1.
49 |       async.series([
50 |         function(cb) {
51 |           ajax.url="http://example.org/request1"
52 |           cb();
53 |         },
54 |         animationFrameFlush,
55 |         function(cb) {
56 |           ajax.url="http://example.org/request2"
57 |           cb();
58 |         },
59 |         animationFrameFlush,
60 |         function(cb) {
61 |           requests[0].respond(200, headers, body("http://example.org/request2"));
62 |           cb();
63 |         },
64 |         flush,
65 |         function(cb) {
66 |           requests[1].respond(200, headers, body("http://example.org/request1"));
67 |           cb();
68 |         },
69 |         flush,
70 |         function(cb) {
71 |           assert(ajax.response.url.match('request1'),
72 |               "Race condition detected. An earlier request's delayed response " +
73 |               "caused the more recent request's response to be overwritten.");
74 |           done();
75 |           cb();
76 |         }
77 |       ], function(){});
78 |     });
79 | </script>
80 | </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/test/core-ajax.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--
  3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 | -->
 10 | <html>
 11 | <head>
 12 |   <title>core-ajax</title>
 13 | 
 14 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
 15 |   <script src="../../web-component-tester/browser.js"></script>
 16 | 
 17 |   <link rel="import" href="../core-ajax.html">
 18 | 
 19 | </head>
 20 | <body>
 21 |   <core-ajax></core-ajax>
 22 | 
 23 |   <script>
 24 |   suite('core-ajax', function() {
 25 |     var xhr, requests, ajax;
 26 |     suiteSetup(function() {
 27 |       xhr = sinon.useFakeXMLHttpRequest();
 28 |       ajax = document.querySelector("core-ajax");
 29 |       xhr.onCreate = function (xhr) {
 30 |         requests.push(xhr);
 31 |       };
 32 |       // Reset the core-ajax element before each test.
 33 |       ajax.auto = false;
 34 |       ajax.url = '';
 35 |       ajax.params = '';
 36 |       ajax.handleAs = 'text';
 37 |       ajax.body = '';
 38 |     });
 39 |     setup(function() {
 40 |       requests = [];
 41 |     });
 42 |     suite('handleAs', function() {
 43 |       suite('text', function(){
 44 |         var headers = {
 45 |           "Content-Type": "text/plain"
 46 |         };
 47 |         setup(function(done){
 48 |           async.series([
 49 |             function(cb){
 50 |               ajax.handleAs = 'text';
 51 |               ajax.url = "http://example.com/text"
 52 |               ajax.auto = true;
 53 |               cb();
 54 |             },
 55 |             animationFrameFlush,
 56 |             function(cb){
 57 |               requests[0].respond(200, headers, "test text");
 58 |               cb();
 59 |             }
 60 |             ], done);
 61 |         });
 62 |         test('Raw text should pass through', function(){
 63 |           assert.equal(ajax.response, "test text")
 64 |         });
 65 |       });
 66 |       suite('xml', function(){
 67 |         var headers = {
 68 |           "Content-Type": "text/xml"
 69 |         };
 70 |         setup(function(done){
 71 |           async.series([
 72 |             function(cb){
 73 |               ajax.handleAs = 'xml';
 74 |               ajax.url = "http://example.com/xml"
 75 |               ajax.auto = true;
 76 |               cb();
 77 |             },
 78 |             animationFrameFlush,
 79 |             function(cb){
 80 |               requests[0].respond(200, headers,
 81 |                           "<note>" +
 82 |                           "<to>AJ</to>" +
 83 |                           "<from>Dog</from>" +
 84 |                           "<subject>Reminder</subject>" +
 85 |                           "<body><q>Feed me!</q></body>" +
 86 |                           "</note>");
 87 |               cb();
 88 |             }
 89 |             ], done);
 90 |         });
 91 |         test('XML should be returned with queryable structure', function(){
 92 |           var q = ajax.response.querySelector("note body q");
 93 |           assert.equal(q.childNodes[0].textContent, "Feed me!");
 94 |           var to = ajax.response.querySelector("to");
 95 |           assert.equal(to.childNodes[0].textContent, "AJ");
 96 |         })});
 97 |       suite('json', function(){
 98 |         var headers = {
 99 |           "Content-Type": "text/json"
100 |         };
101 |         setup(function(done){
102 |           async.series([
103 |             function(cb){
104 |               ajax.handleAs = 'json';
105 |               ajax.url = "http://example.com/json"
106 |               ajax.auto = true;
107 |               cb();
108 |             },
109 |             animationFrameFlush,
110 |             function(cb){
111 |               requests[0].respond(200, headers,
112 |                           '{"object" : {"list" : [2, 3, {"key": "value"}]}}');
113 |               cb();
114 |             }
115 |             ], done);
116 |         });
117 |         test('JSON should be returned as an Object', function(){
118 |           var r = ajax.response;
119 |           assert.equal(r.object.list[1], 3);
120 |           assert.equal(r.object.list[2].key, "value");
121 |         });
122 |       });
123 |       suite('arraybuffer', function(){
124 |         var headers = {
125 |           "Content-Type": "text/plain"
126 |         };
127 |         setup(function(done){
128 |           async.series([
129 |             function(cb){
130 |               ajax.handleAs = 'arraybuffer';
131 |               ajax.url = "http://example.com/data"
132 |               ajax.auto = true;
133 |               cb();
134 |             },
135 |             animationFrameFlush,
136 |             function(cb){
137 |               var buf = new ArrayBuffer(8*4);
138 |               var resp = new Int32Array(buf);
139 |               resp[3] = 12;
140 |               resp[6] = 21;
141 |               requests[0].response = buf;
142 |               requests[0].respond(200, headers, 'blahblahblah');
143 |               cb();
144 |             }
145 |             ], done);
146 |         });
147 |         test('arraybuffer response should be passed through', function(){
148 |           var r = ajax.response;
149 |           var ints = new Int32Array(r);
150 |           assert.equal(ints[3], 12);
151 |           assert.equal(ints[6], 21);
152 |         });
153 |       });
154 |       suite('blob', function(){});
155 |       suite('document', function(){});
156 |     });
157 |     suite('auto', function() {
158 |       suiteSetup(function(){
159 |         ajax.url = "http://example.com/"
160 |         ajax.auto = true;
161 |       });
162 |       test('url change should trigger request', function(done){
163 |         async.series([
164 |           function(cb){
165 |             ajax.url = "http://example.com/auto";
166 |             cb();
167 |           },
168 |           animationFrameFlush,
169 |           function(cb){
170 |             assert.equal(requests.length, 1);
171 |             cb();
172 |           }
173 |           ], done);
174 |       });
175 |       test('params change should trigger request', function(done){
176 |         async.series([
177 |           function(cb){
178 |             ajax.params = {param: "value"};
179 |             cb();
180 |           },
181 |           animationFrameFlush,
182 |           function(cb){
183 |             assert.equal(requests.length, 1);
184 |             cb();
185 |           }
186 |           ], done);
187 |       });
188 |       test('body change should trigger request', function(done){
189 |         async.series([
190 |           function(cb){
191 |             ajax.method = "POST";
192 |             ajax.body = "bodystuff";
193 |             cb();
194 |           },
195 |           animationFrameFlush,
196 |           function(cb){
197 |             assert.equal(requests.length, 1);
198 |             cb();
199 |           }
200 |           ], done);
201 |       });
202 |     });
203 |     suite('events', function(){
204 |       var headers = {
205 |         "Content-Type": "text/plain"
206 |       };
207 |       var body = "somebodytext";
208 |       var responded;
209 |       setup(function(done){
210 |         async.series([
211 |           function(cb){
212 |             ajax.auto = false;
213 |             cb();
214 |           },
215 |           animationFrameFlush,
216 |           function(cb){;
217 |             ajax.handleAs = 'text';
218 |             ajax.url = "http://example.com/text"
219 |             ajax.auto = true;
220 |             cb();
221 |           },
222 |           animationFrameFlush,
223 |           ], done);
224 |         responded = false;
225 |       });
226 |       suite('core-response', function(){
227 |         test('core-response should be fired on success', function(done){
228 |           window.addEventListener('core-response', function(response, xhr){
229 |             responded = true;
230 |           });
231 |           requests[0].respond(200, headers, body);
232 |           assert.isTrue(responded);
233 |           done();
234 |         });
235 |         test('core-response should not be fired on failure', function(done){
236 |           window.addEventListener('core-response', function(response, xhr){
237 |             responded = true;
238 |           });
239 |           requests[0].respond(404, headers, body);
240 |           assert.isFalse(responded);
241 |           done();
242 |         });
243 |       });
244 |       suite('core-error', function(){
245 |         test('core-error should be fired on failure', function(done){
246 |           window.addEventListener('core-error', function(response, xhr){
247 |             responded = true;
248 |           });
249 |           requests[0].respond(404, headers, body);
250 |           assert.isTrue(responded);
251 |           done();
252 |         });
253 |         test('core-error should not be fired on success', function(done){
254 |           var responded = false;
255 |           window.addEventListener('core-error', function(response, xhr){
256 |             responded = true;
257 |           });
258 |           requests[0].respond(200, headers, body);
259 |           assert.isFalse(responded);
260 |           done();
261 |         });
262 |       });
263 |       suite('core-complete', function(){
264 |         test('core-complete should be fired on success', function(done){
265 |           window.addEventListener('core-complete', function(response, xhr){
266 |             responded = true;
267 |           });
268 |           requests[0].respond(200, headers, body);
269 |           assert.isTrue(responded);
270 |           done();
271 |         });
272 |         test('core-complete should be fired on failure', function(done){
273 |           var responded = false;
274 |           window.addEventListener('core-complete', function(response, xhr){
275 |             responded = true;
276 |           });
277 |           requests[0].respond(404, headers, body);
278 |           assert.isTrue(responded);
279 |           done();
280 |         });
281 |       });
282 |     });
283 |   });
284 |   </script>
285 | 
286 | </body>
287 | </html>
288 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <script src="../../webcomponentsjs/webcomponents.js"></script>
 6 |     <script src="../../web-component-tester/browser.js"></script>
 7 |   </head>
 8 |   <body>
 9 |     <script>
10 |       WCT.loadSuites([
11 |         'core-ajax-progress.html',
12 |         'core-ajax-race.html',
13 | 	      'core-ajax.html'
14 |       ]);
15 |     </script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------