{"id":20595506,"url":"https://github.com/thefrontside/emberx-xml-http-request","last_synced_at":"2025-04-14T23:43:18.641Z","repository":{"id":57224551,"uuid":"46525127","full_name":"thefrontside/emberx-xml-http-request","owner":"thefrontside","description":"Ajax. Breezy like.","archived":false,"fork":false,"pushed_at":"2018-06-13T10:53:22.000Z","size":98,"stargazers_count":14,"open_issues_count":3,"forks_count":1,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-28T11:43:23.843Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thefrontside.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-19T22:46:56.000Z","updated_at":"2024-09-02T16:19:28.000Z","dependencies_parsed_at":"2022-09-04T07:41:28.118Z","dependency_job_id":null,"html_url":"https://github.com/thefrontside/emberx-xml-http-request","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefrontside%2Femberx-xml-http-request","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefrontside%2Femberx-xml-http-request/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefrontside%2Femberx-xml-http-request/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefrontside%2Femberx-xml-http-request/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thefrontside","download_url":"https://codeload.github.com/thefrontside/emberx-xml-http-request/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248637771,"owners_count":21137538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T08:13:19.996Z","updated_at":"2025-04-14T23:43:18.622Z","avatar_url":"https://github.com/thefrontside.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# emberx-xml-http-request\n\n[![npm version](https://badge.fury.io/js/emberx-xml-http-request.svg)](https://badge.fury.io/js/emberx-xml-http-request)\n[![Ember Observer Score](https://emberobserver.com/badges/emberx-xml-http-request.svg)](https://emberobserver.com/addons/emberx-xml-http-request)\n[![Build Status](https://travis-ci.org/thefrontside/emberx-xml-http-request.svg?branch=master)](https://travis-ci.org/thefrontside/emberx-xml-http-request)\n\n\nEasily achieve beautiful, transparent uploads and downloads with a reactive XmlHttpRequest\n\n`emberx-xml-http-request` is an ember binding to the [x-request library][1]\n\nIt allows you to declaratively make xml http requests in your\ntemplates by injecting an object modelling the request into your templates.\n\n```handlebars\n{{x-xml-http-request method=\"PUT\" timeout=12000 url=\"http://fileupload.com\" as |xhr|}}\n  name: {{file.name}}\u003cbr/\u003e\n  bytes uploaded: {{xhr.upload.loaded}} \u003cbr/\u003e\n  bytes total: {{xhr.upload.total}} \u003cbr/\u003e\n  percentage complete: {{xhr.upload.percentage}}\n\n  \u003cbutton {{action (action xhr.send file)}}\u003eSend\u003c/button\u003e\n  \u003cbutton {{action (action xhr.abort)}}\u003eAbort\u003c/button\u003e\n\n{{/x-xml-http-request}}\n```\n\n## Actions\n\nIn order to get the XHR to _do_ stuff, you'll need to invoke actions\non it. These actions are just JavaScript functions that are attached\nto the object yielded into the template.\n\n### send(data: String | Blob | ArrayBufferView | FormData)\n\nUse this action to initiate the request and start transferring\nbytes. The optional `data` parameter will be used as the body of the\nrequest.  E.g.\n\n``` handlebars\n{{! send a string}}\n\u003cbutton {{action (action xhr.send \"Hello World\")}}\u003eSay Hello To Server\u003c/button\u003e\n\n{{! send a file}}\n\u003cbutton {{action (action xhr.send file)}}\u003eSend File\u003c/button\u003e\n\n{{! etc...}}\n```\nSee [XMLHttpRequest#send()][2] for more about the valid types for data.\n\n\n### abort()\n\nCancel the current request.\n\n``` handlebars\n\u003cbutton {{action (action xhr.abort)}}\u003eCancel\u003c/button\u003e\n```\n\n\n### reset()\n\nRecreate the request entirely and start from scratch. This is useful\nif you have aborted a request, or it times out, and you want to send\nit again, but nothing else about the request has changed.\n\n``` handlebars\n\u003cbutton {{action (pipe xhr.reset (action xhr.send file))}}\u003eRetry\u003c/button\u003e\n```\n\n## State\n\nAll of the properties of the the `xhr` param, including `readyState`,\n`status`, `response`, `responseText`, etc... are reactive\nand can be bound to in templates, and can also be used as the input\nfor other computed properties.\n\n``` javascript\n{\n  readyState: 0,\n  requestHeaders: {},\n  responseHeaders: {},\n  responseType: 'json'\n  response: '',\n  responseText: '',\n  responseXML: '',\n  isLoadStarted: false, // alias for download.isLoadStarted\n  isLoadEnded: false,   // alias for download.isLoadEnded\n  isAborted: false,     // alias for download.isAborted\n  isErrored: false,     // alias for download.isErrored\n  isTimedOut: false,    // alias for download.isTimedOut\n  download: {\n    isLoadStarted: false,\n    isLoadEnded: false,\n    isAborted: false,\n    isErrored: false,\n    isLengthComputable: false,\n    total: 0,\n    loaded: 0,\n    ratio: 0,\n    percentage: 0\n  },\n  upload: {\n    isLoadStarted: false,\n    isLoadEnded: false,\n    isAborted: false,\n    isErrored: false,\n    isLengthComputable: false,\n    total: 0,\n    loaded: 0,\n    ratio: 0,\n    percentage: 0\n  }\n}\n```\n\nThis is particularly useful in tracking the progress of an upload or a\ndownload.\n\nBecause `xhr` radiates all information about its progress, building\nUIs to track it are a snap.\n\n## Installation\n\n```\nember install emberx-xml-http-request\n```\n\n[1]: https://github.com/cowboyd/x-request.js\n[2]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#send()\n\n## Code of Conduct\nPlease note that this project is released with a Contributor Code of\nConduct. By participating in this project you agree to abide by its\nterms, which can be found in the `CODE_OF_CONDUCT.md` file in this\nrepository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthefrontside%2Femberx-xml-http-request","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthefrontside%2Femberx-xml-http-request","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthefrontside%2Femberx-xml-http-request/lists"}