To check if ajax call is synchronous or asynchronous in Browser Dev Tools To check if ajax call is synchronous or asynchronous in Browser Dev Tools ajax ajax

To check if ajax call is synchronous or asynchronous in Browser Dev Tools


no you cant do that but you can run this in console or add this to your code

XMLHttpRequest.prototype.open = (function(open){    return function(method, url, async, user, password) {        console.log("xhr call: "+url +"isAsync: "+async);        open.apply(this, arguments);    };})(XMLHttpRequest.prototype.open);

it logs the infomation :D hope its helpful


I don't know if you are still looking for an answer but I hope this will help someone!

In chrome browser navigate to rightClick/inspect/networkTab/xhr? move the cursor to the time where your requests are processed as shown in below pic:

enter image description here

THIS IS MY ASYNC CODE(default ajax)

`$.ajax({    type: "GET",    contentType: "application/json",          // data type of request    url: //url,    data: //data,    dataType: "json",                             // data type of response    success: function (result) {                  // some code here    }});`

I was making a series of ajax calls to the localhost and each call was linked to the previous call's response. But I got wrong outputs because all the ajax requests were being sent at almost the same time and the responses(blue in color) which should have been received serially were disordered. The timing diagram below shows the issue perfectly(look at the waterfall tab).

enter image description here

THIS IS MY CODE FOR SYNC CALLS(async: false in ajax)

$.ajax({async: false,type: "GET",contentType: "application/json",          // data type of requesturl: //url,data: //data,dataType: "json",                             // data type of responsesuccess: function (result) {      // some code here}

});

enter image description here

Now how to know if async: false is working?

You can see that the timings of ajax calls in async mode are overlapping each other and also the timings for calls in sync mode(async: false) are distinctively separate thus proving that sync calls [async: false] are working fine. If the timings still overlap then sync calls are likely not working, unlike my case.


All ajax requests are asynchronous others wise if its specified to be synchronous hence why they call it Asynchronous JavaScript and XML (AJAX). To make an ajax request synchronous you would have to pass in false inside the open method of an XMLHTTPRequest object like this

var xhr = new XMLHttPRequest();xhr.open("POST", "file to get.php", false);

The third parameter specifies it as synchronous but it defaults to true