Traditional page-based web applications process every request entirely on the server and sends across a HTML response that is rendered on the browser of the client machine. The HTML will contain the content [the HTML markup] and data. Refer Figure 1.
Figure 1: The traditional request-response web application architecture [please click the image for a larger view]
This request-response strategy is characterized by:
• high end server hardware.
• a browser on the client machine acting as a dumb terminal.
• complicated state management.
• the user waiting for a response after every request because of the synchronous nature of the request-response operation.
Considering that client machines are quite powerful nowadays, it makes sense to move part of the processing from the server to the client. This is the strategy followed in Ajax enabled web applications. The immediate gain is that this frees server resources, allowing the same server hardware to service more client requests concurrently. Ajax enabled web applications scale better than the traditional applications.
In an Ajax enabled web application, the only time the server processes a request entirely on the server is when the page is loaded the first time. This is the only time that the server serves content and maybe some data. For subsequent requests it serves only raw data, encoded in a given format. The client receives data feeds and updates only the parts of the Web page that have changed using JavaScript. In Ajax enabled web applications, UI updates take effect without postback. Refer Figure 2.
Figure 2: The Ajax enabled web application architecture [please click the image for a larger view]
Since only raw data is served, the size of the data is much smaller than what would be served by a traditional web application. This speeds up individual request and response, resulting in reduced network traffic and bandwidth requirements. Ajax enabled web applications are faster than the traditional applications.
By default the request-response strategy of an Ajax enabled web application is asynchronous in nature. This means that the user can continue to use the application while the client requests information from the server in the background and updates the UI [think Google Map]. Ajax enabled web applications are more responsive than the traditional applications.
In Ajax enabled web applications UI processing happens at the client. This makes it possible to achieve rich functionalities such as drag and drop, auto-completion, smooth animation, client side calculation, validation, etc. JavaScript libraries, such as ExtJS, bring in more sophistication to the UI. Ajax enabled web applications result in a rich user experience.
In summary, Ajax enabled web applications [with respect to traditional web applications] can be expected to:
1. scale better
2. have better overall performance
3. result in a richer user experience
