When to Use Asynchronous or Synchronous AJAX

Asynchronous or Synchronous?

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

AJAX, which stands for Asynchronous JavaScript And XML, is a technique that allows web pages to be updated asynchronously, which means that the browser doesn't need to reload the entire page when only a small bit of data on the page has changed. AJAX passes only the updated information to and from the server.

Standard web applications process interactions between web visitors and the server synchronously.

This means that one thing happens after another; the server does not multitask. If you click a button, the message is sent to the server, and the response is returned. You cannot interact with any other page elements until the response is received and the page is updated. 

Obviously, this kind of delay can negatively impact a web visitor's experience — hence, AJAX.

What is AJAX?

AJAX is not a programming language, but a technique that incorporates a client-side script (i.e. a script that runs in a user's browser) that communicates with a web server. Further, its name is somewhat misleading: while an AJAX application might use XML to send data, it could also use just plain text or JSON text. But generally, it uses an XMLHttpRequest object in your browser (to request data from the server) and JavaScript to display the data.

AJAX: Synchronous or Asynchronous

AJAX can actually access the server both synchronously and asynchronously:

  • Synchronously, in which the script stops and waits for the server to send back a reply before continuing.
  • Asynchronously, in which the script allows the page to continue to be processed and handles the reply if and when it arrives.

Processing your request synchronously is similar to reloading the page, but only the requested information is downloaded instead of the entire page.

Therefore, using AJAX synchronously is faster than not using it at all — but it still requires your visitor to wait for the download to occur before any further interaction with the page. Typically, users know that they sometimes need to wait for a page to load, but are not used to continued, significant delays once they are on a site. 

Processing your request asynchronously avoids the delay while the retrieval from the server takes place because your visitor can continue to interact with the web page; the requested information will be processed in the background, and the response will update the page as and when it arrives. Further, even if a response is delayed — for instance, in the case of very large data — users may not realize it because they are occupied elsewhere on the page. However, for most responses, visitors will not even be aware that a request to the server was made.

Therefore, the preferred way to use AJAX is to use asynchronous calls wherever possible. This is the default setting in AJAX. 

Why Use Synchronous AJAX?

If asynchronous calls provide such an improved user experience, why does AJAX offer a way to make synchronous calls at all?

While asynchronous calls are the best choice the vast majority of the time, there are rare situations in which it doesn't make sense 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 in which you can't use an asynchronous call but reloading the entire page is unnecessary. For example, you might need to handle some transaction processing in which the order is important. Consider a case in which a web page needs to return a confirmation page after the user clicked something. This requires synchronizing the requests.