Web development #2 - AJAX XMLHttpRequest object

The keystone of AJAX is the?XMLHttpRequest?object. The?XMLHttpRequest?object exchanges data with a server behind the scenes and all these means that it is now possible to update part of web page without reloading the entire page.

How do we actually access this XMLHttpRequest object?

All modern browsers Chrome, Firefox, IE, Edge, Safari all have this built-in?XMLHttpRequest?object. To prove this open up Google Chrome or any other browser. Launch the browser developer tool and go to the console and type window there (As in the below screenshot). Now console will create the log of window object. Expend/open up this window object and somewhere in bottom we can see the?XMLHttpRequest?object there.

Despite its name,?XMLHttpRequest?don't only deal with XML data. This object can be used to retrieve any type of data like XML, JSON, HTML, TEXT etc. XMLHttpRequest?is the main AJAX technology.

How do we use making an AJAX call with?XMLHttpRequest()?

There are 3 simple steps. First step is we have to set up our request. The second step is to create a function that run when the request is done and when you see the response. In handling this function we have few properties that are available to us from this object like status and?readyState.

Status?Codes just helps us?understand weather our request and response are successful or not? Anything in the 200 range is the good thing and are considered as success.

readyState?property actually defines the current state of the?XMLHttpRequest?object. When this?readyState?is 0 that means the request has not even been initialized and when it goes all the way to 4 it means the request is finished and the response is ready. In the third step we need to open and send our request.