AJAX Tutorial Part 2: XMLHttpRequest Response

JohnQ · March 8, 2015

Here's Part one.

XMLHttpRequest Response

What is XMLHttpRequest?

XMLHttpRequest is an API provided by most browsers which allows client-scripting language such as Javascript to use for making requests to a server. It handles both the request to a server and response from the server. We use Javascript to create XMLHttpRequest objects.

Summary:

- XMLHttpRequest is an API provided by most browsers
- Handles both request/response from the server
- Javascript is used to create XMLHttpRequest objects

A request from an XMLHttpRequest object can be sent to a URL via a GET or POST method ( click here for in depth GET or POST methods ) . The requests can also be set to an asynchronous or synchronous connection. An asynchronous connection means that , while waiting for the response from the particular server, the page in the particular Javascript segment can multitask. EG, writing a new email on the gmail interface.

The response from the server can be fetched from the XMLHttpRequest object upon receipt of the response message, response can either be fetched as TEXT or XML. The text response can contain unstructured plain text or structured HTML text ( which means you can create your own RSS Feeds, now thats another tutorial for another time )

Summary:

- XMLHttpRequest can be sent to a URL via GET or POST
- Request can be set to asynchronous or synchronous connection ( one way/ two way )
- Response from server can be fetched from the XMLHttpRequest object
- Can either be fetched as TEXT or XML

Illustration:

We can get the response status sent from the server by using several events associated with an XMLHttpRequest object:

readState
status
onreadystatechange

The readyState event provides the states (i.e. progress) of the HTTP request made by an XMLHttpRequest object. When sending an HTTP request message to the server, the states of the message can change from 0 to 4.

The states are:

0: Request not initialised
1: Server connection established
2: Request received by server
3: Request being processed by server
4: Request is finished and response is ready

The status of response messages from the server can be checked using the status event.

The status of the response can be:

200: Request was completed and response given.
204: Request received but no response.
404: File/Resource not found.
400: Bad Request with the URL.
401: Not authorised to the file/resource.
403: Forbidden to access the file/resource.

The onreadystatechange event is used to bind a function that will be called automatically when the readyState of an AJAX connection changes from 0.The function binded to the onreadystatechange event is usually responsible in deciding what to do with the progress of the connection and how to handle the response.

Sorry it's abit wordy. But I promise the next post will be more practical!

Next : Implementing AJAX in a web system