jQuery Ajax - to async or not ?

[Aerosol]

This article tries to create 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.

Introduction

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.

Background

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.

Using the code

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
    GetData1(false);
    GetData2(false);
    // When both the method are independent & async=true
    GetData1(true);
    GetData2(true);
});

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); // proper result can be found
    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); // result will be null here
    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);
        }
    });
}

Points of Interest

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.

Source

[JIHAD]

si concluzia care este? in afara de faptul ca ai dat un cp.

plus ca dai reputatie negativa ca te intreb care e concluzia post-ului tau?

to async or not? well? to async or not?

Edited December 29, 2014 by JIHAD

[quadxenon]

si concluzia care este? in afara de faptul ca ai dat un cp.

plus ca dai reputatie negativa ca te intreb care e concluzia post-ului tau?

to async or not? well? to async or not?

Relax ca nu esti singurul , asa face cu toti.Cand nu mai poate da el -rep il pune pe kronzy.

[JIHAD]

eu vroiam sa stiu parerea lui de programator. l-am intrebat care e si mi-a dat -rep.

[Aerosol]

eu vroiam sa stiu parerea lui de programator. l-am intrebat care e si mi-a dat -rep.

Nu am ce concluzie sa dau cand vine vorba de acest subiect, pur si simplu am postat,

puteai sa iti spui tu parerea!

Cat despre rep - am dat fiindca comentariul tau era total

pe langa subiect!

@JIHAD nu ai primit rep - pentru ca ai intrebat ai primit pentru

offtopic si pentru ca meritat!

Aici terminam discutia!

Edited December 29, 2014 by Aerosol

[JIHAD]

ba nene, du-te cu posturile astea d-aici. aduna-ti posturi la Offtopic sau discutii despre vreme/filme/etc.

Aici baietii discuta despre programare. Nu dau -rep cand sunt intrebati ceva.