Properties of the XHR Object

Question:

Name five properties of the XHR object and describe what they are used for.

XHR properties

The XHR object is created like this:

// I know its pretty ugly,outdated and long but I talk about some libaries than can help 
var xhr = new XMLHttpRequest();

To do anything with this object as it was intended for we use built in properties to carry out our request. I will setup a standard request to show some the most common properties used.

See the Pen ajax tutorial by oscar (@nopity) on CodePen.

Here we send a request using the xhr object. As you can see we use several properties.

xhr.open()
xhr.onload()
xhr.response
xhr.send()

I will discuss these one by one now.

xhr.open(‘request method’, ‘url’)

We use this to open the connection between our network with the server we’re trying to reach. The open method takes two properties: request method and the url. In this case we are using the url to retrive names from a json object.

we can either use ‘GET’ or ‘POST’ which are the most common. ‘GET’ is used to retrieve data and ‘POST’ is usually used to send data but can also be used to retrieve data.

xhr.onload()

This method was introduced in the XMLHttpRequest 2.0. It is easier to work with than its older sibling onreadystatechange. If you don’t believe me see for yourself.

onreadystatechange version

//okay not too bad but its quite wordy and a bit confusing
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if(xhr.status === 200) {
        console.log(JSON.parse(xhr.response).data); 
    }
    else {
        console.log('Error' + xhr.errorCode); 
    }
};  
xhr.open('GET', '/response.json'); 
xhr.send();

onload version

//alot cleaner I would say
var xhr = new XMLHttpRequest();
xhr.onload = function () {
  console.log(JSON.parse(xhr.response).data);
};
xhr.onerror = function () { 
 console.log('Error' + xhr.errorCode);
} 
xhr.open('GET', '/response.json'); 
xhr.send();

The reason for this is because onload only returns if the request was successful, were onreadystatechange returns when the state changes which can be successful or error.

xhr.response

The response property returns the data from the server. We pair it with our XML object to retrive the data. That’s it.

xhr.send()

We use the send method to send our request. If we leave this out our request isn’t going anywhere. Thats it.

xhr.responseURL

This one returns the url that we gave to the request. Pretty simple.

Alternatives

We can use JQuery.

JQuery

// a bit simpler but not buy much
 $.ajax(
    type: 'GET',
    url: '/response.json',
    success: function(response) {
        console.log(response);
    }
    error: function() {
        console.log('Error'); 
    }
    )

Axios

There another libary that we can use called axios that helps and allows us to use promises. In real environment would have to link to axios libary.

axios.get('/response.json')
.then(function(response) {
    console.log(response);
}).catch(function(error){
    console.log(error);
});

Fetch

The good thing about fetch is its built into javascript so you dont have to add another libary to your project. It has support in most browsers except IE(really?)

// promises are cool right
fetch('https://jsonplaceholder.typicode.com/users/')
 .then(processStatus)
 .then(function(response){
  return response.json().then(function(json){
    console.log(json);
})
}).catch(function(item){
   console.log(item); 
});



var processStatus = function (response) {
    // status "0" to handle local files fetching (e.g. Cordova/Phonegap etc.)
    if (response.status === 200 || response.status === 0) {
        return Promise.resolve(response)
    } else {
        return Promise.reject(new Error(response.statusText))
    }
};

Navigation

Bov Articles