Repository files navigation

xhr.js is a library(< 2Kb) to make AJAX/HTTP restful requests withXMLHttpRequest. It has similar API withPython-requests.

1. Install xhr.js

npm install xhr.js

2. import xhr.js

UMD import is supported, then get global object:XHR.

importXHRfrom'xhr.js';// orvarXHR=require("xhr.js");

or link withscript in html files:

<scriptsrc="dist/xhr.min.js"></script>

3. use classXHR

varxhr=XHR(async);// default is async. you can set sync use  XHR(false)xhr.on('success',function(result){console.log('status:',result.status);console.log('statusText:',result.statusText);console.log('url:',result.url);console.log('responseType:',result.responseType);console.log('text:',result.text);console.log('headers:',result.headers);console.log('ok:',result.ok());// get the json result.console.log('json:',result.json());// get the json result.console.log('xml:',result.xml());console.log('blob:',result.blob());});xhr.get('package.json',{'a':'b'});

Anotherpost demo:

varxhr=XHR();xhr.post('/post_url',{'a':'b'},function(r){r=r.json();// get the json result.// write your code});

Upload file withFormData object:

varfd=newFormData(document.querySelector('#submit_form'));varxhr=newXHR();xhr.post('/submit/new',fd,function(r){// request successr=r.json();console.log(r);});

The API of xhr instance.

1. xhr.request(method, url, body, onsuccess, onfail): request the url, with the method.
2. xhr.on(event_key, event_func): bind the request result(ready, error, success, fail), with result instance as it input.
3. xhr.get(url, params, onsuccess, onfail): get request.
4. xhr.post(url, params, onsuccess, onfail): post request.
5. xhr.setRequestHeader(header_name, header_value): append a header.
6. xhr.setAsync(aysnc): set request async / sync.
7. xhr.url(): get the request url.
8. xhr.body(): get the request body.
9. xhr.abort(): abort request.
10. xhr.reset(): reset the xhr instance, such url, headers, body, events.

The evnet keys is for APIon.

1. ready: whenxhr is ready.
2. success: whenstatus_code is 200.
3. fail: whenstatus_code is not 200.

The api is for request callback function paramterresult.

1. result.text: get all response text;
2. result.status: the server response code;
3. result.statusText: the server response code text, e.g.ok (status code is200).
4. result.responseType: response type;
5. result.headers: get all the response headers object;
6. result.ok(): is request ok;
7. result.json(): get the json object of response text;
8. result.xml(): get the xml object of response text;
9. result.blob(): get the blob object of response text;

• request auth
• a http test chrome plugin, like postman.

MIT