18

CHAPTER 1

A new design for the Web

Web browser

Server

Login

Business

logic

User's

Web

data

page

model

Web

page

User

session

Web

page

Logout

Exit

page

Shared

data

model

Figure 1.11 Lifecycle of a classic web application. All the state of the user’s “conversation” with the application is held on the web

server. The user sees a succession of pages, none of which can

advance the broader conversation without going back to the server.

now. An Ajax application moves some of the application logic to the browser, as figure 1.12 illustrates.

When the user logs in, a more complex document is delivered to the browser, a large proportion of which is JavaScript code. This document will stay with the user throughout the session, although it will probably alter its appearance considerably while the user is interacting with it. It knows how to respond to user input and is able to decide whether to handle the user input itself or to pass a request on to the web server (which has access to the system database and other resources), or to do a combination of both.

Because the document persists over the entire user session, it can store state. A shopping basket’s contents may be stored in the browser, for example, rather than in the server session.

Licensed to jonathan zheng

The four defining principles of Ajax

19

Web browser

Server

Login

Business

logic

User's

User's

Deliver

data

partial

client app

model

data

model

(JavaScript)

Frequent

requests

for data

User

Client

session

application

Logout

Exit

page

Shared

data

model

Figure 1.12 Lifecycle of an Ajax application. When the user logs

in, a client application is delivered to the browser. This application can field many user interactions independently, or else send

requests to the server behind the scenes, without interrupting the

user's workflow.

1.2.2 The server delivers data, not content

As we noted, the classic web app serves up the same mixture of boilerplate, content, and data at every step. When our user adds an item to a shopping basket, all that we really need to respond with is the updated price of the basket or whether anything went wrong. As illustrated in figure 1.13, this will be a very small part of the overall document.

An Ajax-based shopping cart could behave somewhat smarter than that, by sending out asynchronous requests to the server. The boilerplate, the navigation lists, and other features of the page layout are all there already, so the server needs to send back only the relevant data.

The Ajax application might do this in a number of ways, such as returning a fragment of JavaScript, a stream of plain text, or a small XML document. We’ll Licensed to jonathan zheng

20

CHAPTER 1

A new design for the Web

(A)

Data

Data

Branding

Content

Login

New

New

New

Logout

page

page

page

Time

(B)

Data

Data

Presentation

Logic

Login

Logout

Time

(C)

lative Datau

Classic

Ajax

Cum

Login

Logout

Time

Figure 1.13 Breakdown of the content delivered (A) to a classic web application and (B) to an Ajax application. As the application continues to be used, cumulative traffic (C) increases.

Licensed to jonathan zheng

The four defining principles of Ajax

21

look at the pros and cons of each in detail in chapter 5. Suffice it to say for now that any one of these formats will be much smaller than the mish-mash returned by the classic web application.

In an Ajax application, the traffic is heavily front-loaded, with a large and complex client being delivered in a single burst when the user logs in. Subsequent communications with the server are far more efficient, however. For a transient application, the cumulative traffic may be less for a conventional web page application, but as the average length of interaction time increases, the bandwidth cost of the Ajax application becomes less than that of its classic counterpart. 1.2.3 User interaction with the application

can be fluid and continuous