XMLHttpRequest request with setRequestHeader
This article is just a reference to future me or maybe you (Hello stranger!) on how to setup a XMLHttpRequest with a setRequestHeader and an EventListener for readystatechange in vanilla js.
No need for ajax or any other libraries.
Usage:
makeCorsRequest(‘https://api.pexels.com/v 1/search?query=people&per_page=1&page=1’)
Example api source retrieves an image from pexels.com
Requires setRequestHeader Authorization: MY_APIKEY , in createCORSRequest()
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
xhr.setRequestHeader("Authorization", "MY_APIKEY");
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
xhr.setRequestHeader("Authorization", "MY_APIKEY");
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}
function makeCorsRequest(url) {
// This api requires an authentication header
if (url) {
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
alert(xhr.responseText);
};
xhr.onerror = function() {
alert('error making the request.');
};
xhr.send();
}
}
//Follow the progress of the request with callback
function followRequestProgress(xhr, callback){
xhr.addEventListener('readystatechange', function(e) {
if(xhr.readyState == 2 && xhr.status == 200) {
// Download is being started
console.log('started');
}
else if(xhr.readyState == 3) {
// Download is under progress
console.log('ongoing');
}
else if(xhr.readyState == 4) {
// Downloading has finished
console.log('done callback ');
// request.response holds the binary data of the font
console.log(xhr.response);
window[callback]();
}
});
}
//Usage
makeCorsRequest('https://api.pexels.com/v1/search?query=people&per_page=1&page=1')