jQuery Ajax - To async or Not ?

Introduction

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

Background

There are many Ajax methods provided by jQuery library to accomplish Ajax calls as listed below:

• get
• post
• getScript
• getJSON
• ajax

All these 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 in understanding its importance and usability by situation.

Using the Code

Here, I am explaining simple examples of 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 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 the second method is dependent on result supplied from the first method, it will definitely have an 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

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);
        }
    });
}

Points of Interest

This will definitely be of help to 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 the right choice at the right place.