What Is AJAX?
Ever heard of this term? Not sure how AJAX works? Fret not, read this blog to get a clear understanding of how AJAX works and how it is being used in practical day-to-day life.
Definition
AJAX stands for Asynchronous JavaScript and XML, It's not a programming language rather it's a set of existing technology that lets you fetch data asynchronously without interfering with the existing page.
So what does this “Asynchronously fetch data” means? This means that it is possible to update parts of a web page, without reloading the whole page. AJAX allows web pages to be updated asynchronously by exchanging data with a web server.
How Does it Work?
Now you must be wondering, how does it communicate with the webserver and updates the webpage by itself? It's pretty simple, we will understand this with an example.
Let us consider a login page, Now when a user enters his/her credentials and clicks on the login button, it fires an AJAX call to the server.
- Here, clicking the login button is an event. It sends an HTTP Request to the server.
Request is basically asking the server, what to do with this credential?
- The server then processes the request and decides whether the entered credential is correct or not and respectively returns a message(response) to the webpage.
Response is the answer given to the webpage, by the server and tells it what to do with the entered credentials.
- The incoming response from the server is then processed by the webpage(through Javascript) and if the credential is correct, the user will be directed to the home page else an error message will be shown.
All this is achieved within seconds without even reloading/refreshing the page. Amazing right?
Why use AJAX?
There are 4 main benefits of using AJAX
- Making Asynchronous calls to the server: AJAX allows you to make asynchronous calls to a web server. This allows the client browser to avoid waiting for all data to arrive before allowing the user to act once more. It also automatically updates the page by itself.
- Improve Network Performance: AJAX is used to make a quick round trip to and from the server to retrieve/save data without posting the whole page back to the server. It updates only a small portion of the webpage by sending only the necessary data thus network utilization is minimized and quicker operations occur.
- Better User Experience: Since no reload/refresh is required and the webpages also get updated automatically, AJAX-enabled applications will always be more responsive, faster, and more user-friendly.
- Increased Speed: The main purpose of AJAX had been to increase the speed. Since the time required to process the entire page is being eliminated and only the necessary portion is being updated the speed, performance, and usability of a web application increases.
Practical Use of AJAX
We use AJAX in a lot of places, I will cite a few examples, and let's see if u knew that the AJAX concept was being used here!
1. Auto-Complete:
Yes, AJAX is used to auto-complete Google suggestions. As you type, Google Suggest requests suggestions from the server, showing you a drop-down list of search terms that you may be interested in. Each suggestion is displayed with a number of results available for the given term to help you decide.
This simple client-server interaction is very powerful and effective, it updates no matter how quickly you type, and, as with autocomplete features in desktop software, you can use the up and down arrows to highlight and select each item in the suggestions list.
2. Rating / Feedback:
Ever seen this type of feedback form? This quickly asks for your mood(feedback) and lets you continue your browsing without refreshing or disturbing the browsing page. They use AJAX to handle this kind of voting so that the users are able to provide, valuable feedback to improve their content.
3. Gmail Service :
The entire Gmail service is based on the AJAX technique. Whenever a new mail comes, the pages are not refreshed instead the new mail just appears on top. Although the actual use is a bit more complicated, this is just to get the idea.
4. Google Maps and Google Earth:
Google Maps uses AJAX to avoid reloading its main page at all, Google Maps enables you to drag the map to move it in various directions.
Same With Google Earth, whenever you move/zoom the globe, it fires an AJAX call to get the images of the new location without refreshing the whole page as you move.
This is not all, a lot more examples exist which I will leave upon your curiosity to search.
Getting Started with AJAX
Now that you are familiar with the basics, working, and the uses of AJAX. It's time to implement that into your project. I would highly recommend going through the following websites :
I hope after reading this blog you feel more confident and knowledgeable about AJAX and can implement this concept in your projects.
