XMLHttpRequest() (XHR)
XHR requests are a three step process:
- Set up our request by creating a new
XMLHttpRequest()
. - Create an
onreadystatechange
callback to run when the request state changes. - Open and send our request.
// Set up our HTTP request
var xhr = new XMLHttpRequest();
// Setup our listener to process request state changes
xhr.onreadystatechange = function () {
// Only run if the request is complete
if (xhr.readyState !== 4) return;
// Process our return data
if (xhr.status >= 200 && xhr.status < 300) {
// This will run when the request is successful
// It checks to make sure the status code is in the 200 range
console.log('success!', xhr);
} else {
// This will run when it's not
console.log('The request failed!');
}
// This will run either way
// All three of these are optional, depending on what you're trying to do
console.log('This always runs...');
};
// Create and send a GET request
// The first argument is the request type (GET, POST, PUT, DELETE, etc.)
// The second argument is the endpoint URL
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.send();