jquery - What are the drawbacks of using synchronous ajax call?

Question

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.

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