Welcome folks I am back with another blog post. In this blog post I will be talking about What is AJAX? How it Works | and detailed explanation will be given in this post if you are new to AJAX. This is the right place to be in . First of all we will talk about What does this term AJAX actually mean i.e. what is the full form of AJAX?

AJAX stands for Asynchronous Javascript and XML. First of all there is a misconception around many developers and students that AJAX is a new programming language but I would like to solve that mystery by telling you that AJAX is not a new Programming language rather it is a set of Web Development techniques using many Web Technologies on the client side to create Asynchronous Web Applications

With the help of AJAX we can make request to the server and can retrieve data from the server and also post data to the server without reloading the entire page. All these operations can be handled in the background and the user sees nothing. With AJAX we can make robust and flexibe Web Applications.

Some of the notable Web Applications where AJAX is used is in the form of World’s Largest Email Application i.e Gmail. Gmail is entirely build on the concepts of AJAX. It’s user interface is robust,flexible and responsive to the changes made by the user. Instantly when we receive an email in our inbox a small notification pops in not the entire page loads only the part which is to be loaded is loaded and the rest of the page remains the same. Some other examples are Facebook, Instagram and all the modern chat applications are the examples of AJAX web applications.

Let’s talk about what are the set of Web Technologies that make up AJAX? The first and the most obvious one is HTML which stands for hyper text markup language which is the pioneer of web development without it nothing is possible. Secondly CSS, cascading style sheets, which is responsible for styling the data. Javascript, which is the most important one to add the dynamic nature to our application. It is also used to make requests to the server and also posting data to the server and handling the response which is coming back from the server to the client. PHP, is a server side language it resides at the server side used to process the data which is coming from the client and then transfer appropriate response back to the client. Lastly we have the languages which is used as a messenger between the client and the server i.e XML and JSON. The full form of XML is Extensible Markup Language and JSON is Javascript Object Notation. These are some of the technologies behind AJAX.

Response from the server are handled by AJAX in the form of special function which is known as callbacks. A callback is a special function or concept in which it states that only when the request is complete it will execute asynchronously without interrupting the application. We define the callback function once i.e. what action we want to perform when the request is successful. Later on, we will implement an example through that you will get to understand the concept of callbacks much better.

Enough talking let’s get to the chase and talk about how to implement AJAX in a real world Web Application. There are various steps which needs to be executed in order to implement AJAX into your application. These steps are as follows:

STEP-1 : CREATE A XMLHTTPREQUEST OBJECT

This is the first step in integrating AJAX into your application i.e. creating XMLHTTPREQUEST object. This is the actual backbone of AJAX all the methods we will be invoking later are there in this object. You can say indirectly this object is a developers dream because with the help of this object you can perform the following tasks which are as follows:

1) Update sections of webpage without reloading the entire webpage.

2) Request data from a server – after the webpage has been fully loaded.

3) Receive data from a server – after the webpage has been fully loaded.

4) Send data to a server – in the background.

All modern browsers including chrome,firefox,safari and Internet Explorer support this object.

Syntax for creating XMLHTTPREQUEST object is as follows:

So in the above one line of code we have declared the object of XMLHttpRequest by making a variable and assigning it to a new instance of XMLHttpRequest class. var keyword if used in Javascript to declare a variable.

In the following code we are initializing the XMLHttpRequest object for older browsers including IE 5 and IE 6. In this code we are using ActiveX object ( Microsoft XMLHttpRequest) object.

Step-2 Making a Request to the Server

In this line of code we are using the open method of xmlhttprequest object to request data from the server after the page has been fully loaded into the browser. The method open takes three arguments i.e. first argument is the actual method that is used to talk to the server this can take either GET or POST first one is used to request data from the server and the latter one is used to post data to the server respectively. The last but not the least boolean parameter is there which takes either true or false. True indicating this is a ajax request and false indicating it is a normal request. In most of the cases you will not be experimenting with this parameter as this will always be true.

Step-3 Handling Response from the Server

In this block of code we are using the onreadystatechange event of XMLHttpRequest object. It defines a callback function to be called when the connection is established to the server and what action needs to be be performed is written in this function. This event is invoked when the readyState property changes. The readyState property holds the status of the XMLHttpRequest object There are a set of values which readyState can take and they are as follows:

1) 0 : Request not Initialized

2) 1 : Server connection established

3) 2: Request received

4) 3: Processing request

5) 4: Request finished and Response is ready

And there is also additional property which we check in the if condition i.e. status. It returns the status number of the request. It can also take various values depending on certain conditions which are as follows:

200: “OK”
403: “Forbidden”
404: “Not Found”

Inside the If section we are attaching the response text from the server to the div section having the id name data.

responseText Returns the response data as a string

 

Step-4: Sending the request to the Server.

Last but not least we have to invoke the method of send on the XMLHttpRequest object to send the request to the server and fetch the data and display it on the screen. 

Wrapping it Up. This is a complete Example on AJAX.

This is the index.html file of the full example copy paste this code 

Secondly create a simple text file and write some random text or copy paste the above text and save it. This code will not run without a web server because file protocol does not allow ajax to run so you have to configure web server on to your computer before running the code. For simplicity install xammp control panel it is free for Windows,Mac and Linux. Install it and run it and it will look something like this.

Now you can see that as soon as I launch the Webpage the content of the txt file was fetched by the xmlhttprequest object and it were displayed to the user instantly without page refresh. This is a simple example the possibilities are endless. 

You can also go to inspect by right clicking the webpage and then go to Network to see the status of your xmlhttprequest. As you can see in the figure file.txt has a status code of 200 representing that it was a successful request the content was fetched from the server and also the type of the request if xhr which stands for xml http request. That sums up the example for you in a nice way telling you what are you doing till far in this tutorial.

Congratulations we are done in learning What is AJAX from scratch. All the source code of the Application is available below to download. Thanks for reading this post and if you like reading this and wants to read more of this please subscribe the blog below to get all the notications.

A programmer scientist by the mind and a passionate blogger by heart ❤️. Fountainhead of Coding Shiksha Life motto: Live while you can! Teach & inspire while you could & Smile while you have the teeth.

Gautam Sharma

Founder , Coding Shiksha

2 Comments

  1. Gabrie Gomes

    Great Tutorial

    Reply
    • Gautam Sharma

      Thanks Buddy

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *