Traditional Web Applications vs. Ajax Applications
In this section, we consider the key differences between traditional web applications and Ajax-based web applications.
Traditional Web Applications
Figure 15.1 presents the typical interactions between the client and the server in a tradi-tional web application, such as one that uses a user registration form. First, the user fills in the form’s fields, then submits the form (Fig. 15.1, Step 1). The browser generates a re-quest to the server, which receives the request and processes it (Step 2). The server generates and sends a response containing the exact page that the browser will render (Step 3), which causes the browser to load the new page (Step 4) and temporarily makes the browser win-dow blank. Note that the client waits for the server to respond and reloads the entire page with the data from the response (Step 4). While such a synchronous request is being pro-
cessed on the server, the user cannot interact with the client web page. Frequent long pe-riods of waiting, due perhaps to Internet congestion, have led some users to refer to the World Wide Web as the “World Wide Wait.” If the user interacts with and submits an-other form, the process begins again (Steps 5–8).
This model was originally designed for a web of hypertext documents—what some people call the “brochure web.” As the web evolved into a full-scale applications platform, the model shown in Fig. 15.1 yielded “choppy” application performance. Every full-page refresh required users to re-establish their understanding of the full-page contents. Users began to demand a model that would yield the responsive feel of desktop applications.
Ajax Web Applications
Ajax applications add a layer between the client and the server to manage communication between the two (Fig. 15.2). When the user interacts with the page, the client creates an
XMLHttpRequest object to manage a request (Step 1). The XMLHttpRequest object sends
the request to the server (Step 2) and awaits the response. The requests are asynchronous, so the user can continue interacting with the application on the client-side while the server processes the earlier request concurrently. Other user interactions could result in addition-al requests to the server (Steps 3 and 4). Once the server responds to the original request (Step 5), the XMLHttpRequest object that issued the request calls a client-side function to process the data returned by the server. This function—known as a callback function— uses partial page updates (Step 6) to display the data in the existing web page without re-loading the entire page. At the same time, the server may be responding to the second re-quest (Step 7) and the client-side may be starting to do another partial page update (Step 8). The callback function updates only a designated part of the page. Such partial page up-dates help make web applications more responsive, making them feel more like desktop applications. The web application does not load a new page while the user interacts with it.
Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.