Understanding jQuery Ajax - to async or not ?

Introduction:
This article explains a clear understanding on making synchronous and asynchronous ajax calls through jQuery ajax method. After going through it you can have a clear idea on how and when to do asynchronous ajax calls.

Ajax(Asynchronous Javascript + XML) is a new approach now a days very popular in web development.
Ajax taken our classic web development to a different level. It is a new approach to create
fast and dynamic web pages.It toally removed the reloading part from the classical web development.

There are many Ajax methods provided by jQuery library to accomplish ajax calls as listed below :-
get
post
getScript
getJSON
ajax

These all ajax methods can be used as per requirements you are having but, if you need extensive configurability and want to handle errors by yourself then '.ajax()' method is the best.

To work with the jQuery ajax method we need to set the options available for it properly, from which
'async' is an important setting about which we are going to discuss here as setting its value will have a major impact in getting response properly.

As async is an boolean property, we can set either TRUE or FALSE value for it.
Here i will explain various scenarios on setting each values for the particular property(async) and to help you understanding its importance and usability by situation.

Example:
Here i am explaining simple examples how and when to make your choice in between asynchronous or synchronous ajax calls using jQuery.

Both methods independent of each other :-

There will be no impact on result if both are independent whether it is a asynchronous or synchronous ajax calls :-

$(function () {
    // When both the method are independent & async=false
    // Ajax call will happen one by one
    GetData1(false); // called first
    GetData2(false); // called after GetData1 method processing finished
​
    // When both the method are independent & async=true
    // Call will happen simultaneously
    GetData1(true); // Both are called simultaneously in different threads
    GetData2(true); // Both are called simultaneously in different threads
});

First Method:-

function GetData1(isAsync) {
    $.ajax({
        type: "POST",
        url: "../WebMethods/WebService.asmx/GetData1",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: isAsync,
        success: function (response) {
            var result = JSON.parse(response.d);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}

Second Method:-

function GetData2(isAsync) {
    $.ajax({
        type: "POST",
        url: "../WebMethods/WebService.asmx/GetData2",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: isAsync,
        success: function (response) {
            var result = JSON.parse(response.d);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}

Second method dependent on first one :-

But when second method is dependent on result supplied from first method it will definitely have impact

$(function(){
// When second method depends on result of the first method & async=false
// If it is a synchronous call then you can get 
the result from first method before the second method call
    var result = GetData3(false); 
// As second method will be called after first method execution completed 
// so proper result can be found in above method
    GetData4(false, result);

// When second method depends on result of the first method & async=true
// If it is an asynchronous call then both the calls will 
happen asynchrously/simultaneously and 
    // you will not get the result from first method before call of 
second method as happens in below example
    var result = GetData3(true); 
// As both the methods will be called simultaneously second method will be called 
// before first method returning the result and here it will get NULL value in result.
    GetData4(true, result);
});

First Method:-

function GetData3(isAsync) {
    var result = null;
    $.ajax({
        type: "POST",
        url: "../WebMethods/WebService.asmx/GetData3",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: isAsync,
        success: function (response) {
            result = JSON.parse(response.d);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
    return result;
}

Second Method : Takes an extra argument which is the result of first method.

function GetData4(isAsync, result) {
    $.ajax({
        type: "POST",
        url: "../WebMethods/WebService.asmx/GetData4",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: isAsync,
        success: function (response) {
            if (result.id == 1) {
                var result = JSON.parse(response.d);
                // do your operation here
            }
            else alert('No operation required..');
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}

Note-

This will definitely of help to the developers who started working on jQuery Ajax method. There are many scenarios and requirements, we need to understand the fundamentals so that we can make right choice one at right place.