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?
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.
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:
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:
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