OLD | NEW |
| (Empty) |
1 | |
2 | |
3 Polymer({ | |
4 | |
5 is: 'iron-ajax', | |
6 | |
7 /** | |
8 * Fired when a request is sent. | |
9 * | |
10 * @event request | |
11 */ | |
12 | |
13 /** | |
14 * Fired when a response is received. | |
15 * | |
16 * @event response | |
17 */ | |
18 | |
19 /** | |
20 * Fired when an error is received. | |
21 * | |
22 * @event error | |
23 */ | |
24 | |
25 properties: { | |
26 /** | |
27 * The URL target of the request. | |
28 */ | |
29 url: { | |
30 type: String, | |
31 value: '' | |
32 }, | |
33 | |
34 /** | |
35 * An object that contains query parameters to be appended to the | |
36 * specified `url` when generating a request. | |
37 */ | |
38 params: { | |
39 type: Object, | |
40 value: function() { | |
41 return {}; | |
42 } | |
43 }, | |
44 | |
45 /** | |
46 * The HTTP method to use such as 'GET', 'POST', 'PUT', or 'DELETE'. | |
47 * Default is 'GET'. | |
48 */ | |
49 method: { | |
50 type: String, | |
51 value: 'GET' | |
52 }, | |
53 | |
54 /** | |
55 * HTTP request headers to send. | |
56 * | |
57 * Example: | |
58 * | |
59 * <iron-ajax | |
60 * auto | |
61 * url="http://somesite.com" | |
62 * headers='{"X-Requested-With": "XMLHttpRequest"}' | |
63 * handle-as="json" | |
64 * last-response-changed="{{handleResponse}}"></iron-ajax> | |
65 */ | |
66 headers: { | |
67 type: Object, | |
68 value: function() { | |
69 return {}; | |
70 } | |
71 }, | |
72 | |
73 /** | |
74 * Content type to use when sending data. If the contenttype is set | |
75 * and a `Content-Type` header is specified in the `headers` attribute, | |
76 * the `headers` attribute value will take precedence. | |
77 */ | |
78 contentType: { | |
79 type: String, | |
80 value: 'application/x-www-form-urlencoded' | |
81 }, | |
82 | |
83 /** | |
84 * Optional raw body content to send when method === "POST". | |
85 * | |
86 * Example: | |
87 * | |
88 * <iron-ajax method="POST" auto url="http://somesite.com" | |
89 * body='{"foo":1, "bar":2}'> | |
90 * </iron-ajax> | |
91 */ | |
92 body: { | |
93 type: String, | |
94 value: '' | |
95 }, | |
96 | |
97 /** | |
98 * Toggle whether XHR is synchronous or asynchronous. Don't change this | |
99 * to true unless You Know What You Are Doing™. | |
100 */ | |
101 sync: { | |
102 type: Boolean, | |
103 value: false | |
104 }, | |
105 | |
106 /** | |
107 * Specifies what data to store in the `response` property, and | |
108 * to deliver as `event.response` in `response` events. | |
109 * | |
110 * One of: | |
111 * | |
112 * `text`: uses `XHR.responseText`. | |
113 * | |
114 * `xml`: uses `XHR.responseXML`. | |
115 * | |
116 * `json`: uses `XHR.responseText` parsed as JSON. | |
117 * | |
118 * `arraybuffer`: uses `XHR.response`. | |
119 * | |
120 * `blob`: uses `XHR.response`. | |
121 * | |
122 * `document`: uses `XHR.response`. | |
123 */ | |
124 handleAs: { | |
125 type: String, | |
126 value: 'json' | |
127 }, | |
128 | |
129 /** | |
130 * Set the withCredentials flag on the request. | |
131 */ | |
132 withCredentials: { | |
133 type: Boolean, | |
134 value: false | |
135 }, | |
136 | |
137 /** | |
138 * If true, automatically performs an Ajax request when either `url` or | |
139 * `params` changes. | |
140 */ | |
141 auto: { | |
142 type: Boolean, | |
143 value: false | |
144 }, | |
145 | |
146 /** | |
147 * If true, error messages will automatically be logged to the console. | |
148 */ | |
149 verbose: { | |
150 type: Boolean, | |
151 value: false | |
152 }, | |
153 | |
154 /** | |
155 * Will be set to true if there is at least one in-flight request | |
156 * associated with this iron-ajax element. | |
157 */ | |
158 loading: { | |
159 type: Boolean, | |
160 notify: true, | |
161 readOnly: true | |
162 }, | |
163 | |
164 /** | |
165 * Will be set to the most recent request made by this iron-ajax element. | |
166 */ | |
167 lastRequest: { | |
168 type: Object, | |
169 notify: true, | |
170 readOnly: true | |
171 }, | |
172 | |
173 /** | |
174 * Will be set to the most recent response received by a request | |
175 * that originated from this iron-ajax element. The type of the response | |
176 * is determined by the value of `handleas` at the time that the request | |
177 * was generated. | |
178 */ | |
179 lastResponse: { | |
180 type: Object, | |
181 notify: true, | |
182 readOnly: true | |
183 }, | |
184 | |
185 /** | |
186 * Will be set to the most recent error that resulted from a request | |
187 * that originated from this iron-ajax element. | |
188 */ | |
189 lastError: { | |
190 type: Object, | |
191 notify: true, | |
192 readOnly: true | |
193 }, | |
194 | |
195 /** | |
196 * An Array of all in-flight requests originating from this iron-ajax | |
197 * element. | |
198 */ | |
199 activeRequests: { | |
200 type: Array, | |
201 notify: true, | |
202 readOnly: true, | |
203 value: function() { | |
204 this._setActiveRequests([]); | |
205 } | |
206 }, | |
207 | |
208 /** | |
209 * Length of time in milliseconds to debounce multiple requests. | |
210 */ | |
211 debounceDuration: { | |
212 type: Number, | |
213 value: 0, | |
214 notify: true | |
215 }, | |
216 | |
217 _boundHandleResponse: { | |
218 type: Function, | |
219 value: function() { | |
220 return this.handleResponse.bind(this); | |
221 } | |
222 }, | |
223 | |
224 _boundDiscardRequest: { | |
225 type: Function, | |
226 value: function() { | |
227 return this.discardRequest.bind(this); | |
228 } | |
229 } | |
230 }, | |
231 | |
232 observers: [ | |
233 'requestOptionsChanged(url, method, params, headers,' + | |
234 'contentType, body, sync, handleAs, withCredentials, auto)' | |
235 ], | |
236 | |
237 get queryString () { | |
238 var queryParts = []; | |
239 var param; | |
240 var value; | |
241 | |
242 for (param in this.params) { | |
243 value = this.params[param]; | |
244 param = window.encodeURIComponent(param); | |
245 | |
246 if (value !== null) { | |
247 param += '=' + window.encodeURIComponent(value); | |
248 } | |
249 | |
250 queryParts.push(param); | |
251 } | |
252 | |
253 return queryParts.join('&'); | |
254 }, | |
255 | |
256 get requestUrl() { | |
257 var queryString = this.queryString; | |
258 | |
259 if (queryString) { | |
260 return this.url + '?' + queryString; | |
261 } | |
262 | |
263 return this.url; | |
264 }, | |
265 | |
266 get requestHeaders() { | |
267 var headers = { | |
268 'content-type': this.contentType | |
269 }; | |
270 var header; | |
271 | |
272 if (this.headers instanceof Object) { | |
273 for (header in this.headers) { | |
274 headers[header] = this.headers[header].toString(); | |
275 } | |
276 } | |
277 | |
278 return headers; | |
279 }, | |
280 | |
281 toRequestOptions: function() { | |
282 return { | |
283 url: this.requestUrl, | |
284 method: this.method, | |
285 headers: this.requestHeaders, | |
286 body: this.body, | |
287 async: !this.sync, | |
288 handleAs: this.handleAs, | |
289 withCredentials: this.withCredentials | |
290 }; | |
291 }, | |
292 | |
293 requestOptionsChanged: function() { | |
294 this.debounce('generate-request', function() { | |
295 if (!this.url && this.url !== '') { | |
296 return; | |
297 } | |
298 | |
299 if (this.auto) { | |
300 this.generateRequest(); | |
301 } | |
302 }, this.debounceDuration); | |
303 }, | |
304 | |
305 /** | |
306 * Performs an AJAX request to the specified URL. | |
307 * | |
308 * @method generateRequest | |
309 */ | |
310 generateRequest: function() { | |
311 var request = document.createElement('iron-request'); | |
312 var requestOptions = this.toRequestOptions(); | |
313 | |
314 this.activeRequests.push(request); | |
315 | |
316 request.completes.then( | |
317 this._boundHandleResponse | |
318 ).catch( | |
319 this.handleError.bind(this, request) | |
320 ).then( | |
321 this._boundDiscardRequest | |
322 ); | |
323 | |
324 request.send(requestOptions); | |
325 | |
326 this._setLastRequest(request); | |
327 | |
328 this.fire('request', { | |
329 request: request, | |
330 options: requestOptions | |
331 }); | |
332 | |
333 return request; | |
334 }, | |
335 | |
336 handleResponse: function(request) { | |
337 this._setLastResponse(request.response); | |
338 this.fire('response', request); | |
339 }, | |
340 | |
341 handleError: function(request, error) { | |
342 if (this.verbose) { | |
343 console.error(error); | |
344 } | |
345 | |
346 this._setLastError({ | |
347 request: request, | |
348 error: error | |
349 }); | |
350 this.fire('error', { | |
351 request: request, | |
352 error: error | |
353 }); | |
354 }, | |
355 | |
356 discardRequest: function(request) { | |
357 var requestIndex = this.activeRequests.indexOf(request); | |
358 | |
359 if (requestIndex > 0) { | |
360 this.activeRequests.splice(requestIndex, 1); | |
361 } | |
362 } | |
363 }); | |
OLD | NEW |