AJAX ASYNC False vs. True

Question

I have a test site here (kdmalikdesign.com/test/rsd/index.html). I am in the middle of doing a bunch of things with it. My main concern is right now it does not work unless ASYNC is FALSE which I hear is bad practice?

Now I have determined the reason that async is false is because when i fire the success callback the xml data isn't loaded but when I load a completed callback everything loads fine. I had to change it to async false to get it to work correctly with the success callback.

Is there a specific way to go about doing this? Basically what the ajax call is doing is grabbing an xml file and reading through it depending on the filename populating the page with specific data. I am doing it basically as practice/excercise.

Thank you, Kamron

Answer 1

Running a synchronous call is usually a malpractice, as you are effectively running a request while losing all the benefits for asynchronicity, when you could be using callbacks to do the same thing in an asynchronous fashion.

async:false will cause the jQuery.ajax() call to block until it returns. Effectively, in pseudocode, instead of this:

function ajax:
   perform request
   callback with results

You are doing this:

function ajax:
   perform request
   while (no results) wait
   return results

This completely blocks the execution of anything else until this is over...which is pretty horrible. The obvious use case for it is running stuff in a waterfall pattern: task 1 -> task 2 -> task 3, which can happen.

If you can afford to block your browser, still consider using callbacks. They will allow you to keep the rest of your site active and well, while processing stuff. You can easily do this by setting async:true and providing a callback with your next step. You may end up in a callback spaghetti, however, and may want to use a library to manage large operations if you have them.

A very good candidate for this hails from Node.JS and is called async.js. It is the tool for MapReduce stuff, and implements both waterfall and parallel running models.

Morale of the story: async:false can 100% of the time be replaced with a callback.

Answer 2

If you would like to implement asynchronous calls, then you want to organize all logic that is to be done with the resultant data into the .succcess() callback.

the reason that async is false is because when i fire the success callback the xml data isn't loaded but when I load a completed callback everything loads fine.

That line from your question is a bit confusing because the by definition, the success callback is executed once the request completed and any data returned is available.

This is an example of what you cannot do with async: true:

function ajaxrequest() {
    var someValue;
    $.get('serverFile.php', function(data){
        someValue = data;
    });
    return someValue;
}

In that case, the variable someValue will be empty when it is returned because the callback you supplied isn't executed synchronously, or in-line, with the rest of your code.

To use async:true you can organize your code like this:

function getData() {
    return $.get('serverFile.php');
}
function alertData() {
    getData().done(function(data){
        alert(data);
    });
}
function logData() {
    getData().done(function(data){
        console.log(data);
    });
}

I have broken it up this way so you can see that it can be helpful to isolate your request methods and have them return the jQuery Deferred object so that multiple other functions can utilize the same request if needed.

Answer 3

async true with same request location makes it critical for data overflowing , specially in database query , it will produce too many connection problem specially if the request is repetitive

and second to nth request will respond longer