Synchronous vs. asynchronous

HTTP requests can be made in two ways; synchronously and asynchronously.

A synchronous request is a blocking request, where everything has to be done in an orderly fashion, one step after another, and where the following step has to wait until the previous one has completed its execution. Let's assume that there are four independent components on a web page when the page is loaded; if one component takes a long time during execution, the rest of the page is going to wait for it until its execution is complete. If execution fails, the page load fails too. One other example is when there is a poll and a rating component on the web page; if the user chooses to answer the poll and give a rating to fulfill these requests, two requests have to be sent out one after the other if we go with a synchronous requesting mechanism.

To tackle the issue of synchronous requests, the development community has gradually made progress in the field of asynchronous HTTP requests. The first product to come out that allowed asynchronous requests was IFrame tags, introduced by Microsoft; they used IFrames via Internet Explorer to load content asynchronously. After IFrame, next in line to revolutionize the Internet was the XML HTTP ActiveX control. In later years, all the browsers adopted this control under the new XMLHttpRequest JavaScript object, which is part of the XMLHttpRequest API. The XMLHttpRequest API is used to make an HTTP (or HTTPS) call to a web server. It can be used to make both synchronous and asynchronous calls. Asynchronous requests allow developers to divide web pages into multiple components independent of each other, thereby saving a lot of memory by sending data on demand.

Jesse James Garrett named this phenomenon "AJAX". In AJAX (Asynchronous JavaScript and XML), web requests are made via JavaScript and the data interchange originally happened in XML. The "X" in AJAX was originally considered to be XML, but today it can be any data interchange format, such as XML, JSON, text file, or even HTML. The data format being used for the data transfer has to be mentioned in the MIME type headers. In Chapter 1, Getting Started with JSON, we have already highlighted why JSON is the preferred data interchange format. Let us take a quick look at what we would need to make our first AJAX call with JSON data.

Essentially, web developers can use the principles of AJAX to fetch data on demand to make websites more responsive and interactive; it is very important to understand what generates that demand. The trigger for such a demand for data is commonly an event that occurs on the web page. An event can be described as a reaction to an action that was performed; for example, ringing a bell produces a vibration inside the bell that generates the sound. Here, ringing a bell is the event, while the sound that is produced is the reaction to the event. There can be multiple events on a web page; a few such events are clicking a button, submitting a form, hovering over a link, and choosing an option from a drop-down, all of which are very common events. We have to come up with a way in which they are programmatically handled when these events occur.