https://github.com/thefrontside/emberx-xml-http-request
Ajax. Breezy like.
https://github.com/thefrontside/emberx-xml-http-request
Last synced: about 1 year ago
JSON representation
Ajax. Breezy like.
- Host: GitHub
- URL: https://github.com/thefrontside/emberx-xml-http-request
- Owner: thefrontside
- License: mit
- Created: 2015-11-19T22:46:56.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-06-13T10:53:22.000Z (about 8 years ago)
- Last Synced: 2025-03-28T11:43:23.843Z (over 1 year ago)
- Language: JavaScript
- Size: 95.7 KB
- Stars: 14
- Watchers: 11
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# emberx-xml-http-request
[](https://badge.fury.io/js/emberx-xml-http-request)
[](https://emberobserver.com/addons/emberx-xml-http-request)
[](https://travis-ci.org/thefrontside/emberx-xml-http-request)
Easily achieve beautiful, transparent uploads and downloads with a reactive XmlHttpRequest
`emberx-xml-http-request` is an ember binding to the [x-request library][1]
It allows you to declaratively make xml http requests in your
templates by injecting an object modelling the request into your templates.
```handlebars
{{x-xml-http-request method="PUT" timeout=12000 url="http://fileupload.com" as |xhr|}}
name: {{file.name}}
bytes uploaded: {{xhr.upload.loaded}}
bytes total: {{xhr.upload.total}}
percentage complete: {{xhr.upload.percentage}}
Send
Abort
{{/x-xml-http-request}}
```
## Actions
In order to get the XHR to _do_ stuff, you'll need to invoke actions
on it. These actions are just JavaScript functions that are attached
to the object yielded into the template.
### send(data: String | Blob | ArrayBufferView | FormData)
Use this action to initiate the request and start transferring
bytes. The optional `data` parameter will be used as the body of the
request. E.g.
``` handlebars
{{! send a string}}
Say Hello To Server
{{! send a file}}
Send File
{{! etc...}}
```
See [XMLHttpRequest#send()][2] for more about the valid types for data.
### abort()
Cancel the current request.
``` handlebars
Cancel
```
### reset()
Recreate the request entirely and start from scratch. This is useful
if you have aborted a request, or it times out, and you want to send
it again, but nothing else about the request has changed.
``` handlebars
Retry
```
## State
All of the properties of the the `xhr` param, including `readyState`,
`status`, `response`, `responseText`, etc... are reactive
and can be bound to in templates, and can also be used as the input
for other computed properties.
``` javascript
{
readyState: 0,
requestHeaders: {},
responseHeaders: {},
responseType: 'json'
response: '',
responseText: '',
responseXML: '',
isLoadStarted: false, // alias for download.isLoadStarted
isLoadEnded: false, // alias for download.isLoadEnded
isAborted: false, // alias for download.isAborted
isErrored: false, // alias for download.isErrored
isTimedOut: false, // alias for download.isTimedOut
download: {
isLoadStarted: false,
isLoadEnded: false,
isAborted: false,
isErrored: false,
isLengthComputable: false,
total: 0,
loaded: 0,
ratio: 0,
percentage: 0
},
upload: {
isLoadStarted: false,
isLoadEnded: false,
isAborted: false,
isErrored: false,
isLengthComputable: false,
total: 0,
loaded: 0,
ratio: 0,
percentage: 0
}
}
```
This is particularly useful in tracking the progress of an upload or a
download.
Because `xhr` radiates all information about its progress, building
UIs to track it are a snap.
## Installation
```
ember install emberx-xml-http-request
```
[1]: https://github.com/cowboyd/x-request.js
[2]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#send()
## Code of Conduct
Please note that this project is released with a Contributor Code of
Conduct. By participating in this project you agree to abide by its
terms, which can be found in the `CODE_OF_CONDUCT.md` file in this
repository.