1. Technology

Ajax

Asynchronous or Synchronous

By

Designer of two men to see a monitor
Ryouchin/The Image Bank/Getty Images

One of the biggest advantages that Ajax has in web pages is that it can access information on the server without having to reload the web page. This means that to retrieve or update one small piece of information only that information needs to be passed to and from the server instead of having to redownload the entire web page.

There are two ways that Ajax can access the server. These are synchronous (wnere the script stops and waits for the server to send back a reply before continuing) and asynchronous (where the script allows the page to continue to be processed and will handle the reply if and when it arrives).

Processing your request synchronously is a bit like reloading the page but with only the requested information having t0o be downloaded instead of the entire page. This method os therefore somewhat faster than not using Ajax since the information to be downloaded should be significantly smaller and hence faster to retrieve than downloading the entire page over again. It does however still require that your visitor wait for the download to occur. While your visitors are used to having to wait for entire web pages to download, they are not used to having to wait while interacting with a web page for any significant time and so unless the information you are requesting is particularly small so that it can be downloaded extremely quickly you run the risk of alienating visitors who may have been quite happy with a longer wait to download the entire page.

Processing asynchronously avoids the delay while the retrieval from the server is taking place because your visitor can continue to interact with the web page and the requested information will be processed with the response updating the page as and when it arrives. For larger requests where the response will have a noticable delay that delay possibly will not be noticed by your visitors because they are occupied interecting with fields further down the page. For responses that are nearly instantaneous your visitors will not even be aware that a request to the server was made.

The preferred way to use Ajax therefore is to use asynchronous calls where ever possible so as to enhance your visitors experience with the web page and to avoid having the Ajax interfer with the operation of the page. Using Ajax asynchronously is so obviously the right way that Ajax should be used that the A in Ajax is actually considered by those who consider AJAX to be an acronym to stand for Asynchronous (although the originator of the term claims that it is not an acronym and the letrters therefore don't stand for anything).

If asynchronous calls are so much better for your visitor's experience of the page than synchronous calls, why does Ajax provide a way to make synchronous calls at all? While asynchronous calls will work 99.9% of the time, there are rare situations where it just doesn't make any sense at all to allow your visitor to continue interacting with the web page until a particular server side process completes. In many of these cases it may be better to not use Ajax at all and instead just reload the entire page. The synchronous option in Ajax is there for the small number of situations where you can't use an asynchronous call and reloading the entire page is also inappropriate. There are not many such situations but they do exist and so Ajax provides for them.

A trap that many beginners may fall into is to use synchronous Ajax calls where asynchronous calls are more appropriate (as they are most of the time). The reason for this is that synchronous calls are easier to understand how the processing works. The thing is that asynchronous calls actually work exactly the same way except for the processing not waiting for the response but instead just handling the response when it arrives.

The only difference when using asynchronous calls is that you can actually set up multiple Ajax calls that overlap with a second call being made before the first has responded. This is where asynchronous Ajax does become slightly more complicated than synchronous Ajax because you need to make sure that each Ajax request uses a separate Ajax object rather than reusing the same object for all your Ajax requests. If you use the same object for multiple asynchronous Ajax calls then the response handler will only handle the first response that it receives and will disregard any subsequent responses. With overlapping Ajax calls with the same object you have no real way to tell whether the response that gets processed is a response to the first call or the second. By using separate objects for each Ajax call you will have a separate response handler for each request that will handle toe response from the request made by that object.

Using Ajax asynchronously is the better choice for most situations. If you are only making the one Ajax call from the page then it is no different in the way you code it to what you would use for a synchronous call except for the one parameter that identifies how the call is to be processed. With multiple Ajax calls on the same page, the only additional complication is that you need to create a separate Ajax object for each request. As the various Ajax libraries will all do this for you anyway the only time that coding your Ajax to use asynchronous calls will be any different from what you could get away with for synchronous calls is if you are coding all of the JavaScript for the Ajax calls yourself instead of using a library to do it for you.

  1. About.com
  2. Technology
  3. JavaScript
  4. Ajax
  5. Ajax: Why Asynchronous Is Almost Always Better

©2014 About.com. All rights reserved.