Once upon a time I went for an interview and the interviewer asked me one common question.The question was “what is Ajax? and what is the main purpose ajax?”
The first thing that struck my mind is “Ajax is basically an asynchronous JavaScript and XML used to get content without refreshing page” but is it proper or valid answer? The answer is “No”. because the actual answer is : Ajax is also used for “Asynchronous” as well as “Synchronous” call request.
So in this article, I am going to share what is the Asynchronous and Synchronous AJAX call.
What is AJAX?
AJAX stands for “Asynchronous Javascript and XML” refers to a web application for creating interactive web development technologies. AJAX is a subset of the standardized and generalized Markup Language. AJAX is a technique used to create dynamic web pages quickly. By performing a small amount of data exchanged with the server in the background. Also, AJAX can make asynchronous page updates so without reloading the entire page. the section of the page is updated.
What is Synchronous Ajax?
Synchronous Ajax request is the process in which execution of the request stops until a response is received and Asynchronous Ajax request means the script continue the process without waiting for the server to reply. It will handle the reply if it arrives.
Ajax principle is simple to send an asynchronous request to the server object is to obtain data from the server, and then use javascript to manipulate the DOM and update the page. This is the most critical step is to obtain the requested data from the server.
By default, Ajax request is Asynchronous but sometimes you need to send your request synchronously.
Javascript Examples:
1 2 3 4 5 | var req = new XMLHttpRequest(); req.send(); |
jQuery Examples:
1 2 3 4 5 6 7 8 9 |
$.ajax() returns the XMLHttpRequest.
Let’s have a look at the below example to loads data synchronously which completely blocks the browser while the requests are active.
JavaScript Example:
1 2 3 4 5 | var req = new XMLHttpRequest(); req.open("POST", "example.php”, false); // synchronous request req.send(); |
JQuery Example:
1 2 3 4 5 6 7 8 9 10 | // Instantiate a request var sync_request = $.ajax({ url: "example.php", async: false, success: function(data){ //response script here } }); |
Here, we just have to pass “async:false” when you want the synchronous request.The previous example had true for the last argument in open whereas in this example it is set to false so the request is synchronous.
Advantages of AJAX
Ajax gives us the following benefits:
- The biggest thing is no page refresh in the page communicate with the server to the user experience is very good.No need to load all the data in each and every request.
- Ajax uses asynchronous communication with the server without interrupting the user’s operation, with a more rapid response capability.
- It reduces the usage of bandwidth which saves the space and rental costs.
- Ajax is based on standardized and widely supported technologies without having to download plug-ins or libraries.
Do let me know you find this article helpful and how likely you are going to recommend it to others.Use the comments section below to tell me your thoughts.
