| OLD | NEW |
| 1 | 1 |
| 2 | 2 |
| 3 Polymer({ | 3 Polymer({ |
| 4 | 4 |
| 5 is: 'iron-ajax', | 5 is: 'iron-ajax', |
| 6 | 6 |
| 7 /** | 7 /** |
| 8 * Fired when a request is sent. | 8 * Fired when a request is sent. |
| 9 * | 9 * |
| 10 * @event request | 10 * @event request |
| (...skipping 15 matching lines...) Expand all Loading... |
| 26 /** | 26 /** |
| 27 * The URL target of the request. | 27 * The URL target of the request. |
| 28 */ | 28 */ |
| 29 url: { | 29 url: { |
| 30 type: String, | 30 type: String, |
| 31 value: '' | 31 value: '' |
| 32 }, | 32 }, |
| 33 | 33 |
| 34 /** | 34 /** |
| 35 * An object that contains query parameters to be appended to the | 35 * An object that contains query parameters to be appended to the |
| 36 * specified `url` when generating a request. | 36 * specified `url` when generating a request. If you wish to set the body |
| 37 * content when making a POST request, you should use the `body` property |
| 38 * instead. |
| 37 */ | 39 */ |
| 38 params: { | 40 params: { |
| 39 type: Object, | 41 type: Object, |
| 40 value: function() { | 42 value: function() { |
| 41 return {}; | 43 return {}; |
| 42 } | 44 } |
| 43 }, | 45 }, |
| 44 | 46 |
| 45 /** | 47 /** |
| 46 * The HTTP method to use such as 'GET', 'POST', 'PUT', or 'DELETE'. | 48 * The HTTP method to use such as 'GET', 'POST', 'PUT', or 'DELETE'. |
| 47 * Default is 'GET'. | 49 * Default is 'GET'. |
| 48 */ | 50 */ |
| 49 method: { | 51 method: { |
| 50 type: String, | 52 type: String, |
| 51 value: 'GET' | 53 value: 'GET' |
| 52 }, | 54 }, |
| 53 | 55 |
| 54 /** | 56 /** |
| 55 * HTTP request headers to send. | 57 * HTTP request headers to send. |
| 56 * | 58 * |
| 57 * Example: | 59 * Example: |
| 58 * | 60 * |
| 59 * <iron-ajax | 61 * <iron-ajax |
| 60 * auto | 62 * auto |
| 61 * url="http://somesite.com" | 63 * url="http://somesite.com" |
| 62 * headers='{"X-Requested-With": "XMLHttpRequest"}' | 64 * headers='{"X-Requested-With": "XMLHttpRequest"}' |
| 63 * handle-as="json" | 65 * handle-as="json" |
| 64 * last-response-changed="{{handleResponse}}"></iron-ajax> | 66 * last-response-changed="{{handleResponse}}"></iron-ajax> |
| 67 * |
| 68 * Note: setting a `Content-Type` header here will override the value |
| 69 * specified by the `contentType` property of this element. |
| 65 */ | 70 */ |
| 66 headers: { | 71 headers: { |
| 67 type: Object, | 72 type: Object, |
| 68 value: function() { | 73 value: function() { |
| 69 return {}; | 74 return {}; |
| 70 } | 75 } |
| 71 }, | 76 }, |
| 72 | 77 |
| 73 /** | 78 /** |
| 74 * Content type to use when sending data. If the contenttype is set | 79 * Content type to use when sending data. If the `contentType` property |
| 75 * and a `Content-Type` header is specified in the `headers` attribute, | 80 * is set and a `Content-Type` header is specified in the `headers` |
| 76 * the `headers` attribute value will take precedence. | 81 * property, the `headers` property value will take precedence. |
| 77 */ | 82 */ |
| 78 contentType: { | 83 contentType: { |
| 79 type: String, | 84 type: String, |
| 80 value: 'application/x-www-form-urlencoded' | 85 value: 'application/x-www-form-urlencoded' |
| 81 }, | 86 }, |
| 82 | 87 |
| 83 /** | 88 /** |
| 84 * Optional raw body content to send when method === "POST". | 89 * Optional raw body content to send when method === "POST". |
| 85 * | 90 * |
| 86 * Example: | 91 * Example: |
| (...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 166 */ | 171 */ |
| 167 lastRequest: { | 172 lastRequest: { |
| 168 type: Object, | 173 type: Object, |
| 169 notify: true, | 174 notify: true, |
| 170 readOnly: true | 175 readOnly: true |
| 171 }, | 176 }, |
| 172 | 177 |
| 173 /** | 178 /** |
| 174 * Will be set to the most recent response received by a request | 179 * 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 | 180 * 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 | 181 * is determined by the value of `handleAs` at the time that the request |
| 177 * was generated. | 182 * was generated. |
| 178 */ | 183 */ |
| 179 lastResponse: { | 184 lastResponse: { |
| 180 type: Object, | 185 type: Object, |
| 181 notify: true, | 186 notify: true, |
| 182 readOnly: true | 187 readOnly: true |
| 183 }, | 188 }, |
| 184 | 189 |
| 185 /** | 190 /** |
| 186 * Will be set to the most recent error that resulted from a request | 191 * Will be set to the most recent error that resulted from a request |
| 187 * that originated from this iron-ajax element. | 192 * that originated from this iron-ajax element. |
| 188 */ | 193 */ |
| 189 lastError: { | 194 lastError: { |
| 190 type: Object, | 195 type: Object, |
| 191 notify: true, | 196 notify: true, |
| 192 readOnly: true | 197 readOnly: true |
| 193 }, | 198 }, |
| 194 | 199 |
| 195 /** | 200 /** |
| 196 * An Array of all in-flight requests originating from this iron-ajax | 201 * An Array of all in-flight requests originating from this iron-ajax |
| 197 * element. | 202 * element. |
| 198 */ | 203 */ |
| 199 activeRequests: { | 204 activeRequests: { |
| 200 type: Array, | 205 type: Array, |
| 201 notify: true, | 206 notify: true, |
| 202 readOnly: true, | 207 readOnly: true, |
| 203 value: function() { | 208 value: function() { |
| 204 this._setActiveRequests([]); | 209 return []; |
| 205 } | 210 } |
| 206 }, | 211 }, |
| 207 | 212 |
| 208 /** | 213 /** |
| 209 * Length of time in milliseconds to debounce multiple requests. | 214 * Length of time in milliseconds to debounce multiple requests. |
| 210 */ | 215 */ |
| 211 debounceDuration: { | 216 debounceDuration: { |
| 212 type: Number, | 217 type: Number, |
| 213 value: 0, | 218 value: 0, |
| 214 notify: true | 219 notify: true |
| 215 }, | 220 }, |
| 216 | 221 |
| 217 _boundHandleResponse: { | 222 _boundHandleResponse: { |
| 218 type: Function, | 223 type: Function, |
| 219 value: function() { | 224 value: function() { |
| 220 return this.handleResponse.bind(this); | 225 return this._handleResponse.bind(this); |
| 221 } | |
| 222 }, | |
| 223 | |
| 224 _boundDiscardRequest: { | |
| 225 type: Function, | |
| 226 value: function() { | |
| 227 return this.discardRequest.bind(this); | |
| 228 } | 226 } |
| 229 } | 227 } |
| 230 }, | 228 }, |
| 231 | 229 |
| 232 observers: [ | 230 observers: [ |
| 233 'requestOptionsChanged(url, method, params, headers,' + | 231 '_requestOptionsChanged(url, method, params, headers,' + |
| 234 'contentType, body, sync, handleAs, withCredentials, auto)' | 232 'contentType, body, sync, handleAs, withCredentials, auto)' |
| 235 ], | 233 ], |
| 236 | 234 |
| 235 /** |
| 236 * The query string that should be appended to the `url`, serialized from |
| 237 * the current value of `params`. |
| 238 * |
| 239 * @return {string} |
| 240 */ |
| 237 get queryString () { | 241 get queryString () { |
| 238 var queryParts = []; | 242 var queryParts = []; |
| 239 var param; | 243 var param; |
| 240 var value; | 244 var value; |
| 241 | 245 |
| 242 for (param in this.params) { | 246 for (param in this.params) { |
| 243 value = this.params[param]; | 247 value = this.params[param]; |
| 244 param = window.encodeURIComponent(param); | 248 param = window.encodeURIComponent(param); |
| 245 | 249 |
| 246 if (value !== null) { | 250 if (value !== null) { |
| 247 param += '=' + window.encodeURIComponent(value); | 251 param += '=' + window.encodeURIComponent(value); |
| 248 } | 252 } |
| 249 | 253 |
| 250 queryParts.push(param); | 254 queryParts.push(param); |
| 251 } | 255 } |
| 252 | 256 |
| 253 return queryParts.join('&'); | 257 return queryParts.join('&'); |
| 254 }, | 258 }, |
| 255 | 259 |
| 260 /** |
| 261 * The `url` with query string (if `params` are specified), suitable for |
| 262 * providing to an `iron-request` instance. |
| 263 * |
| 264 * @return {string} |
| 265 */ |
| 256 get requestUrl() { | 266 get requestUrl() { |
| 257 var queryString = this.queryString; | 267 var queryString = this.queryString; |
| 258 | 268 |
| 259 if (queryString) { | 269 if (queryString) { |
| 260 return this.url + '?' + queryString; | 270 return this.url + '?' + queryString; |
| 261 } | 271 } |
| 262 | 272 |
| 263 return this.url; | 273 return this.url; |
| 264 }, | 274 }, |
| 265 | 275 |
| 276 /** |
| 277 * An object that maps header names to header values, first applying the |
| 278 * the value of `Content-Type` and then overlaying the headers specified |
| 279 * in the `headers` property. |
| 280 * |
| 281 * @return {Object} |
| 282 */ |
| 266 get requestHeaders() { | 283 get requestHeaders() { |
| 267 var headers = { | 284 var headers = { |
| 268 'content-type': this.contentType | 285 'Content-Type': this.contentType |
| 269 }; | 286 }; |
| 270 var header; | 287 var header; |
| 271 | 288 |
| 272 if (this.headers instanceof Object) { | 289 if (this.headers instanceof Object) { |
| 273 for (header in this.headers) { | 290 for (header in this.headers) { |
| 274 headers[header] = this.headers[header].toString(); | 291 headers[header] = this.headers[header].toString(); |
| 275 } | 292 } |
| 276 } | 293 } |
| 277 | 294 |
| 278 return headers; | 295 return headers; |
| 279 }, | 296 }, |
| 280 | 297 |
| 298 /** |
| 299 * Request options suitable for generating an `iron-request` instance based |
| 300 * on the current state of the `iron-ajax` instance's properties. |
| 301 * |
| 302 * @return {{ |
| 303 * url: string, |
| 304 * method: (string|undefined), |
| 305 * async: (boolean|undefined), |
| 306 * body: (ArrayBuffer|ArrayBufferView|Blob|Document|FormData|null|string|u
ndefined), |
| 307 * headers: (Object|undefined), |
| 308 * handleAs: (string|undefined), |
| 309 * withCredentials: (boolean|undefined)}} |
| 310 */ |
| 281 toRequestOptions: function() { | 311 toRequestOptions: function() { |
| 282 return { | 312 return { |
| 283 url: this.requestUrl, | 313 url: this.requestUrl, |
| 284 method: this.method, | 314 method: this.method, |
| 285 headers: this.requestHeaders, | 315 headers: this.requestHeaders, |
| 286 body: this.body, | 316 body: this.body, |
| 287 async: !this.sync, | 317 async: !this.sync, |
| 288 handleAs: this.handleAs, | 318 handleAs: this.handleAs, |
| 289 withCredentials: this.withCredentials | 319 withCredentials: this.withCredentials |
| 290 }; | 320 }; |
| 291 }, | 321 }, |
| 292 | 322 |
| 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 /** | 323 /** |
| 306 * Performs an AJAX request to the specified URL. | 324 * Performs an AJAX request to the specified URL. |
| 307 * | 325 * |
| 308 * @method generateRequest | 326 * @return {!IronRequestElement} |
| 309 */ | 327 */ |
| 310 generateRequest: function() { | 328 generateRequest: function() { |
| 311 var request = document.createElement('iron-request'); | 329 var request = /** @type {!IronRequestElement} */ (document.createElement('
iron-request')); |
| 312 var requestOptions = this.toRequestOptions(); | 330 var requestOptions = this.toRequestOptions(); |
| 313 | 331 |
| 314 this.activeRequests.push(request); | 332 this.activeRequests.push(request); |
| 315 | 333 |
| 316 request.completes.then( | 334 request.completes.then( |
| 317 this._boundHandleResponse | 335 this._boundHandleResponse |
| 318 ).catch( | 336 ).catch( |
| 319 this.handleError.bind(this, request) | 337 this._handleError.bind(this, request) |
| 320 ).then( | 338 ).then( |
| 321 this._boundDiscardRequest | 339 this._discardRequest.bind(this, request) |
| 322 ); | 340 ); |
| 323 | 341 |
| 324 request.send(requestOptions); | 342 request.send(requestOptions); |
| 325 | 343 |
| 326 this._setLastRequest(request); | 344 this._setLastRequest(request); |
| 345 this._setLoading(true); |
| 327 | 346 |
| 328 this.fire('request', { | 347 this.fire('request', { |
| 329 request: request, | 348 request: request, |
| 330 options: requestOptions | 349 options: requestOptions |
| 331 }); | 350 }); |
| 332 | 351 |
| 333 return request; | 352 return request; |
| 334 }, | 353 }, |
| 335 | 354 |
| 336 handleResponse: function(request) { | 355 _handleResponse: function(request) { |
| 337 this._setLastResponse(request.response); | 356 this._setLastResponse(request.response); |
| 338 this.fire('response', request); | 357 this.fire('response', request); |
| 339 }, | 358 }, |
| 340 | 359 |
| 341 handleError: function(request, error) { | 360 _handleError: function(request, error) { |
| 342 if (this.verbose) { | 361 if (this.verbose) { |
| 343 console.error(error); | 362 console.error(error); |
| 344 } | 363 } |
| 345 | 364 |
| 346 this._setLastError({ | 365 this._setLastError({ |
| 347 request: request, | 366 request: request, |
| 348 error: error | 367 error: error |
| 349 }); | 368 }); |
| 350 this.fire('error', { | 369 this.fire('error', { |
| 351 request: request, | 370 request: request, |
| 352 error: error | 371 error: error |
| 353 }); | 372 }); |
| 354 }, | 373 }, |
| 355 | 374 |
| 356 discardRequest: function(request) { | 375 _discardRequest: function(request) { |
| 357 var requestIndex = this.activeRequests.indexOf(request); | 376 var requestIndex = this.activeRequests.indexOf(request); |
| 358 | 377 |
| 359 if (requestIndex > 0) { | 378 if (requestIndex > -1) { |
| 360 this.activeRequests.splice(requestIndex, 1); | 379 this.activeRequests.splice(requestIndex, 1); |
| 361 } | 380 } |
| 362 } | 381 |
| 382 if (this.activeRequests.length === 0) { |
| 383 this._setLoading(false); |
| 384 } |
| 385 }, |
| 386 |
| 387 _requestOptionsChanged: function() { |
| 388 this.debounce('generate-request', function() { |
| 389 if (!this.url && this.url !== '') { |
| 390 return; |
| 391 } |
| 392 |
| 393 if (this.auto) { |
| 394 this.generateRequest(); |
| 395 } |
| 396 }, this.debounceDuration); |
| 397 }, |
| 398 |
| 363 }); | 399 }); |
| OLD | NEW |