The ULTIMATE super small, simple, light, fast, XMLHttpRequest wrapper. The documentation is as follows:
Just simply put this into your <head> (or at least somewhere before the code that uses it).
<script src="https://dl.dropboxusercontent.com/s/y9muahvy3m8bsp6/superxhr.min.js?dl=0"></script>If the drop box link broke or you simply don't want to use dropbox, then you can download superxhr.min.js, place it in the same directory (folder) as your HTML file, and put this into your <head> (or at least somewhere before the code that uses it).
<script src="superxhr.min.js"></script>Then, Super XHR JS will set window.HTTP to the XHRing function it creates.
To use Super XHR JS, simply pass an object to window.HTTP with all the properties going to the XMLHttpRequest object, and some special properties listed below effecting the behavior.
var XHRobj = HTTP({
URL: "/path/to/file", // the relative URL to the file
USER: "username", // the username sent to the server when performing the request.
PASSWORD: "password", // the username sent to the server when performing the request.
METHOD: "GET", // Any valid HTTP method
POST: "post data goes here if METHOD is POST", // Post data (if the selected METHOD supports post data)
SYNC: false, // pass true for synchronous transfer (which is not reccomended)
// Super XHR JS also supports all standard and future properties of requests:
onreadystatechange: function(evt){
var readyState = evt.target.readyState;
// ...
},
timeout: 2500, // Timeout after 2.5 seconds
setRequestHeader: [["Content-Type", "text/html"], ['Range', 'bytes=100-200']]
// There are many more methods not listed here to keep the above code nice and short. See
// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/ for a complete list.
});Then, after you have sent the request once, you can keep on reusing it with the awesome XHRobj.resend(new_url, new_post_data) function to keep on reusing the same setup like so:
XHRobj.resend("/new/path/to/file", "new post data");Next, looking at the above example code, notice setRequestHeader. The format for this may look rather foreign, but I assure you it is incredibly simple. Basicly. when you set a property of the XMLHttpRequest object that is a function, instead of the new value being set there, the new value is instead used as an array of arrays whereby each sub array is Function.prototype.applyed to the XMLHttpRequest object. So, from the example above:
var XHRobj = HTTP({
// ...
setRequestHeader: [["Content-Type", "text/html"], ['Range', 'bytes=100-200'], ["Foo", "Bar"]]
// ...
});The vanilla javascript equivelent of this is as listed below:
var k = new XMLHttpRequest();
k.setRequestHeader("Content-Type", "text/html");
k.setRequestHeader('Range', 'bytes=100-200');
k.setRequestHeader("Foo", "Bar");Likewise, this setup can be applied to any function on the XMLHttpRequest interface like so:
var XHRobj = HTTP({
// ...
overrideMimeType: [["text/html"]],
addEventListener: [
["load", function(x){
// ...
}],
["error", function(x){
// ...
}]
]
// ...
});