How to AJAX

What is Ajax? This tutorial introduces you to the basic concepts of the language. It is a group of techniques which are implemented on the client side for creating asynchronous, fast and dynamic web content. The acronym AJAX means Asynchronous JavaScript and XML. It is a web browser technology independent of web server software. AJAX allows sending and retrieving of data from a server asynchronously at the back end without disturbing the display. This technique, therefore, negates the need of reloading a web page, where classic web pages have to be reloaded if their content changes at the back end.

Step 1: Introduction to AJAX

AJAX is a popular technique as it reduces the overhead of reloading webpages again and again. It is being used by many of the famous applications. Some of the popular applications that use AJAX are Google, Facebook and YouTube.

Popular applications using AJAX

Step 2: Combination of Internet Standards

The technique AJAX is a combination of few internet standards. The technologies that have been grouped together to form AJAX are HTML, CSS, Javascript and XMLHTTPRequest*.

Technologies for AJAX

Step 3: Prerequisites of AJAX

Before making an attempt to learn AJAX, a person must be familiarized with the basic concepts of HTML and JavaScript

Prerequisites for AJAX

Step 4: Make an HTTP Request to the Server

A basic AJAX technique can be done with the help of technologies such as HTML or JavaScript. Over here, let’s make an HTTP request. The request will be made using Javascript. For that, we need to make an instance of the class XMLHTTPRequest found in all the browsers. In case of Microsoft Internet Explorer, the similar methods exist in an ActiveX object called XMLHTTP.

Make an HTTP request to the server

Step 5: Response Function for the HTTP Request

With that done, now we will have to make a decision regarding what is to be done with the request we made previously. We will use a Javascript function to do the work on the response that we will receive.

JavaScript response function for the HTTP request

Step 6: Set a reference

In order to respond to the request, we will have to set a reference to the ready state changed property of our XMLHTTPRequest object. References over here have to be the same as the name of the javascript function being used.

Set a reference

Step 7: Make a request to the server using open and send methods

With that done, we will be sending a request to the server. Over here, we need to use both the send and open methods within the HTTP class to achieve this. The first parameter can either be Post or Get, depending upon your requirements. With the first parameter set, we will move on to the next parameter which allows you to open the URL you are targeting. The third and the optional parameter will be set as true to ensure the method is called asynchronously. The parameter over here being used to send the data will retrieve any data needed to be sent to the server. Over here, the data will be sent over using the POST request. The data should be in a format that can be easily parsed, such as a query string, or in JSON or SOAP format.

Make a request to the server

Step 8: Create response Processing JavaScript function

Now, that the request has been sent. We need to turn back to the response processing Javascript function that we discussed before. The function will have to determine the state of the request first.

Check for the request state of the JavaScript response function

Step 9: Check Server response

The state values range from 0 to 4, each with a distinct ready state. Over here, the value retrieved should be 4. This will mean that the response is working correctly and has retrieved the required data. With that done, the processing will have to be started next.

Checking server response

Step 10: Obtain Data sent by server

The last step is to obtain the data from the server. With that done, we will move to the code written for gathering the response from the HTML server. The W3C website lists all the codes that can be used. Here we will use the 200 OK response code to check for a successful or unsuccessful AJAX. You can obtain the data in two ways; the response text method and the response XML method. The latter one gives you an XML document that you can access via Javascript DOM functions. Hopefully now, you will have a better understanding of what is ajax.

Ways of obtaining data sent by the server