What are the drawbacks of using synchronous ajax call?

This question could surely be applied to jQuery but in this case I am referring to Prototype. In the Prototype doc it says,

Since synchronous usage is rather unsettling, and usually bad taste, you should avoid changing this. Seriously.

I'm not sure what the drawbacks of using a synchronous ajax call. It seems that there are many instances where you must wait for the call to return (without using the specific callback functions). For example I currently use Prototype's onSuccess, onFailure and onComplete to handle the rest of the code.

However, the web services I use (all in-house) span most projects and I have been tasked with creating more reusable code. An example would be a customer class that returns customer properties. A simple example (keep in mind I am only showing the basic functions to keep it simple):

Customer = Class.create({ 

    initialize: function(customerId) { 

        new Ajax.Request('some-url', {
            method: 'get',
            parameters: {
                customerId: customerId
            },
            onSuccess: this.setCustomerInfo.bind(this)
        }

    },

    setCustomerInfo: function(response) {

        //for the sake of this example I will leave out the JSON validation

        this.customerInfo = response.responseText.evalJSON();

    } 

});

So, using that simple class I can do the following in any project to get the customer info.

var customer = new Customer(1);

//now I have the customer info
document.write(customer.customerInfo.firstName);

Using the above code will not print out the customer's first name. This is due to the ajax call being asynchronous. It will execute the document.write whether or not the web service brought back the customer data. But I don't want to do anything until the data has come back and the customer variable is set. To fix this I set the ajax call to synchronous so the browser will not continue on until the new Customer(1); is finished.

This method seems to work (setting asynchronous to false) but reading the Prototype docs gives me pause. What is the drawback of using this method? Is there another way to do it, more efficient, etc?

I would appreciate any feedback.

Solution 1:

Let's remind you that JavaScript is single-threaded

A synchronous IO call BLOCKS THE ENTIRE THREAD

A simple fix is to use asynchronous style programming using callbacks.

Customer = Class.create({     
    initialize: function(customerId, cb) { 
        new Ajax.Request('some-url', {
            method: 'get',
            parameters: {
                customerId: customerId
            },
            onSuccess: (function() {
                this.setCustomerInfo.apply(this, arguments);
                cb.apply(this, arguments);
            }).bind(this)
        }
    },
    setCustomerInfo: function(response) {
        //for the sake of this example I will leave out the JSON validation
        this.customerInfo = response.responseText.evalJSON();
    }   
});

var c = new Customer(1, function() {
     document.write(customer.customerInfo.firstName);
});

Solution 2:

Well, in addition to the fact that it is very not JavaScript, it has such pleasant effects as COMPLETELY BLOCKING THE BROWSER'S UI. That is not a minor issue.

Did some research, found cool things. Prototype bases "asynchronous" off of XMLHttpRequest.open. According to Wikipedia, this is not something which is not a required part of the specification and it will prevent "onreadystatechange".

Solution 3:

Most people frown upon synchronous ajax calls because it'll freeze the UI up until it has completed, as it will not allow code to continue until it's completion. Makes for a stutter in the interface I guess you could say.

Solution 4:

Well, i don't find that it is a problem to block the UI if the user is generating a loading image while the synchronous call is done. It could be the same as submitting the form.