With the native XMLHttpRequest Object we can make requests to some server and retrieve information. This is useful when we need to obtain some data on an app for example, making requests to a REST api, or when we need to send some data by a form without reloading an entire page. 

In performance, is very useful, because we can reduce the total amount of information we request to the server, but, for seo purposes, can be very bad, if you request new posts on homepage only when the user interacts on some button, for example.

Another possible implementation with this object is the real time data update. When you are seeing some page and the information keeps updated in real time, like a web trading platform. Or you can simple change the entire dom without change the actual page / url.

An example of a function with Get | Post | File methods and callback using the XMLHttpRequest :

How I can use this function?

// arguments: request method, url, data sent, callback function

sdata('post', 'engine/data/set/comment.php', 'u=' + u + '&c=' + comment, function( d ){

// All the data is on d object

});

Principal properties:

.onreadystatechange

This event if fired when the state of XMLHttpRequest changes. It will be fired several times during a query until the readyState property is 4.  You can verify with readyState property the state of the query.

.readystate

The values of readyState can be:

0 - Unset

1- Opened

2- Headers received

3- Loading

4- Done.

As you can see, I verify if the readyState is 4, done. Then I verify if the response is ok, looking for the request status code. If is 200 OK, then I call the callback function with the data.

.status

Return the status code of the request.  If the status is 200 everything is ok on the server side.

.responseText

Return a DomString with the data response.

Principal methods:

.open

Start the request. Define the method, the url and if the request operates asynchronously.

.send

Make the request. The data can be 'catched' with onreadystatechange property. ( See the example )