| 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 |