The following tutorial will provide a short introduction to Ajax and its uses. Before understanding these terms see few practical examples to demonstrate the power of Ajax. Facebook, Instagram, Twitter etc are considered the situation when check news feed and if like someone post simply click the like button and the like count is added without refreshing the page. Now imagine the situation if there would be the case, click the like button and the complete page would be loaded again which will make such processes. Now the question whether clicking the button again for such a small task which require complete loading of a web page. Absolutely not, because no one will do such an absurd thing (in the latter case). So it means that this feature of like is very helpful as it prevents the reloading of the complete page. It communicates only necessary information with the server and shows to the end user(in this case being the increase of like count).
Consider another case when visit google to search for anything. Usually, observe that when start typing the desired keywords to search, observe that many suggestions are presented in the search bar. Now, where do they come from? Of course not from the client side. The results are again the power of communication with the server without reloading the page again.
Like this, there are dozens of examples which can be considered. The whole power working behind is nothing but Ajax. Let’s discuss briefly Ajax and its implementation.
What is Ajax?
How does it work?
Thus the summary of the above explanation is that Ajax allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. Now discuss the important part and its implementation. For implementing Ajax, only be aware of XMLHttpRequest object. Now, what actually it is. It is an object used to exchange data with the server behind the scenes. Try to remember the paradigm of OOP which says that object communicates through calling methods (or in general sense message passing). The same case applied here as well. Usually, create this object and use it to call the methods which result in effective communication. All modern browsers support the XMLHttpRequest object.
Basic Syntax: The syntax of creating the object is given below
There are two types of methods open() and send(). Uses of these methods explained below.
The above two lines described the two methods. req stands for the request, it is basically a reference variable. The GET parameter is as usual one of two types of methods to send the request. Use POST as well depending upon whether send the data through POST or GET method. The second parameter being the name of the file which actually handles the requests and processes them. The third parameter is true, it tells that whether the requests are processed asynchronously or synchronously. It is by default true which means that requests are asynchronous. The open() method prepares the request before sending it to the server. The send method is used to send the request to the server.
Sending the parameter through getting or POST request. The syntax is given below
In the above lines of code, the specified query in the form of URL followed by ? which is further followed by the name of the variable then = and then the corresponding value. If sending two or more variables use ampersand(&) sign between the two variables. The above method as shown applies for GET request. Sending the data through the POST, then send it in the send method as shown below.
Use of setRequestHeader() method as shown below.
Events and handling mechanism:
Therefore to keep a track of the response onreadystatechange event which is binding with the event handler(function) which will get executed when a response comes.
When a request to the server is sending perform actions based on the response. The onreadystatechange event is triggered every time the readyState changes. So what actually a ready state is and when will the onreadystate event actually occur and how many times it will occur between the request and response?
The XMLHttpRequest object has a property called as readyState whose value changes in the complete request-response journey i.e when a request is prepared, sent, resolves, processed and when the response comes. That’s why it is called os onreadystatechange.
The onreadystatechange stores a function (or the name of the function)to be called automatically each time the readyState property changes.
The readyState holds different values ranging from 0 to 4.
- request not initialized
- server connection established
- request received
- processing request
- request finished and response is ready
XMLHttpRequest also has a property named as status. The status has following values
- 200: “OK”
- 404: “Page not found”
Now remember it always that when readyState is 4 and status is 200, the response is ready.
The whole thing described above is implemented in coding as given below
(Note: This is only a section of code and moreover describing the communication between client and server so the code described above will not show any effect if run on IDE)
In the above code if the condition is true (i.e the response is ready) then the result is displayed.
- Speed is enhanced as there is no need to reload the page again.
- AJAX make asynchronous calls to a web server, this means client browsers avoid waiting for all the data to arrive before starting of rendering.
- Form validation can be done successfully through it.
- Bandwidth utilization – It saves memory when the data is fetched from the same page.
- More interactive.
- Source code written in AJAX is easily human readable. There will be some security issues in Ajax.
- Debugging is difficult.
- Problem with browser back button when using AJAX enabled pages.
This article is attributed to GeeksforGeeks.org