Ajax Patterns And Best Practices (2006)

Figure 1. Hierarchy of patterns explained in the book

The road map for the patterns of Figure 1 is as follows:

•Chapter 3—Content Chunking pattern: Makes it possible to incrementally build an HTML page, allowing the logic of an individual HTML page to be distributed, and allowing the user to decide the time and logic of the content that is loaded.

•Chapter 4—Cache Controller pattern: Provides the caller a mechanism to temporarily store resources in a consistent manner, resulting in an improved application experience for the caller.

•Chapter 5—Permutations pattern: Used by the server to separate the resource (URL) from the representation (for example, HTML or XML). This separation makes it possible for an end user to focus on the resource and not have to worry about the content. For example, if a client’s bank account is at the URL http://mydomain.com/accounts/user, the same URL can be used regardless of device (phone, PC, and so on).

•Chapter 6—Decoupled Navigation pattern: Defines a methodology indicating how code and navigation on the client side can be decoupled into smaller modular chunks, making the client-side content simpler to create, update, and maintain.

•Chapter 7—Representation Morphing pattern: Combines the state with a given representation, and provides a mechanism whereby the representation can morph from one representation to another without losing state.

•Chapter 8—Persistent Communications pattern: Provides a mechanism whereby a server and a client can communicate on a continuing basis, allowing the server to send data to the client, and vice versa, without prior knowledge.

xxii■I N T R O D U C T I O N

•Chapter 9—State Navigation pattern: Provides an infrastructure in which HTML content can be navigated, and the state is preserved when navigating from one piece of content to another.

•Chapter 10—Infinite Data pattern: Manages and displays data that is seemingly infinite, in a timely manner.

•Chapter 11—REST-Based Model View Controller pattern: Accesses content that is external to the web application and transforms the content so that it appears as if the web application generated it.

C H A P T E R 1

■ ■ ■

Introduction to Ajax

Asynchronous JavaScript and XML (Ajax)1 is both something old and something new—old because already existing technologies are used, but new because it combines these existing technologies into techniques that very few considered previously. Simply put, because of Ajax a new generation of applications and ideas are bubbling on the developer scene.

A very brief definition of Ajax is as follows:

Ajax is a technology that complements Web 2.0 and the integration of many web services at once.

This brief definition poses more questions than it answers, as now you are likely wondering what Web 2.0 is and what the integration of many web services are.

Web 2.0 can be thought of as the Internet economy.2 Think about something as typical as an encyclopedia, and you will start to think about salespeople who carry extremely heavy books and knock on doors. In a Web 2.0 context, an encyclopedia means Wikipedia (http:// www.wikipedia.org). The Wikipedia project is an open effort by humanity to record itself. Whereas for a traditional encyclopedia a set of writers and editors write about certain topics, Wikipedia is created by people who write about what they know. Get enough people together and you get an encyclopedia that is on the Internet. What is thought-provoking about the Wikipedia project is that anybody can edit it, and therefore it usually contains more current and unusual information than a traditional encyclopedia. In some instances Wikipedia’s selfcorrecting capabilities have proven to be problematic, but considering the scale and depth of the project, those instances have been exceptions.

The second part of Ajax is the integration of many web services at once. Ajax allows a higher level of interactivity in a HyperText Markup Language (HTML) page than was possible without Ajax technologies. The result is that an Ajax application changes from a web application to a web service manipulation technology. In a traditional web application, navigating content meant changing HTML pages. With Ajax, navigating content means navigating web services that could be generating HTML content, or Extensible Markup Language (XML) content, or other content.

The initial web page seems very similar to those of most web applications, but the difference becomes apparent when you input an address to search for. Let’s search for my old address: Muelistrasse 3, 8143 Stallikon, which is illustrated in Figure 1-2. You enter the address in the two text boxes in the upper-right corner and then click the Suchen (Search) button. Figure 1-3 illustrates where to put the address details (or those who don’t speak German can reference Figure 1-1, which is in English).

Figure 1-2. Searching for my old address in Switzerland

The page changes, and in the map portal a red circle appears along with some smaller colored-in circles and some satellite images of houses. The red circle highlights the house I lived in, and the other smaller circles represent landmarks. The picture generated by Map.search.ch is an aerial view overlaid with a semitransparent street map. The combination is a map that makes it possible to explain where something is in relation to something else. For example, in Figure 1-2 you can see that the house I lived in has a red roof, and to the left seems to be some type of grey complex. The grey complex is a specialty meat company.

The multilayer map is not Ajax specific because traditional web applications could have done the same thing. What is Ajax specific is the map’s capability to dynamically reconstruct itself as you drag the mouse over a part of the map. As you click and hold the mouse button and drag across the map, Ajax retrieves map pieces from the server. In a traditional web application, you would have clicked buttons to the left, right, top, and bottom of the map to change your view of it.

The advantage of the multilayer approach is the user’s ability to easily explain directions. Usually we say, “Turn left, and on the right is a gas station.” It is easy to understand that there is a gas station on the right, but how far down the street? Is it on the corner? Is it one or two houses down the street? However, with Map.search.ch I can say, “Turn right, and see on the map the meat company? Well, there is a parking lot, too, right on the map.” The person who is receiving the explanation can mentally coordinate their driving to what they expect to see. Using this approach, when they see a gas station on the right, they will know precisely where on the right.

The problem of explaining directions is that one person knows the area, and the other does not. The person who knows the area will highlight things that he remembers and considers important—or worse, will explain according to things as he thinks they are. The person who does not know the area will focus on irrelevant things when driving through and hope to find the landmarks explained. With the overlaid map illustrating the color of houses, orientation of fields, and so on, each person has a common base to explain and understand the directions.

Let’s focus on some other aspects of Map.search.ch. Notice the little blue circle to the northeast of my old house. That little circle represents a bus stop. If you hover your mouse over the circle, a dialog box appears, telling you the bus stop details and starting and ending points of the route, as illustrated in Figure 1-3.

Figure 1-3. Investigation of the bus stop near my old address in Switzerland

With the information in the dialog box, you know the details of the busses, trains, or trams that pass by. The dynamically appearing dialog box is Ajax specific because the information within it is dynamically retrieved after you hover over the bus stop circle. In the dialog box the word “Sellenbueren” is highlighted, indicating that there is more information. If you click the link, a web page similar to Figure 1-4 is generated.

Figure 1-4. Web page used to find a public transportation connection from my old address

The web page in Figure 1-4 is a link to the SBB, which is the Swiss train service, but the page also includes bus stops. From this page you could plan your travel to another destination based on some date.

■Note The shifting of focus from one HTML page to another HTML page is not Ajax specific, as that is possible without Ajax. What is interesting, though, is that a user will consider the entire process of finding a connection that clearly involves two websites, as one application. There is a cooperation between the two websites so that the user has a good experience. This shifting of focus is an example of the Internet economy.

For the sake of exploration, let’s go back to the web page illustrated in Figure 1-3 and hover over the other circle, which displays a dialog box containing information about the restaurant and is similar to Figure 1-5.

Figure 1-5. Restaurant details near my old address

Based on the restaurant details illustrated in Figure 1-5, you could phone and ask for a reservation, menu, or hours of operation. This is another example of Web 2.0, as information is retrieved dynamically from a server without requiring the user to look up the information in a telephone book. With Ajax information is assembled in a multidimensional fashion, that is, the combination of a map with telephone information.

The functionality that was illustrated goes beyond restaurants and public transportation. It includes public parking garages, government buildings, and whatever is of interest to the user of the website application.

Another Ajax Example

Another Ajax application that has received plenty of attention is Google Maps, which is illustrated in Figure 1-6.

Figure 1-6. Home page of Google Maps

The home page http://maps.google.com is a view of North America. Like map.search.ch, the web application is multidimensional and combines a search with geographic information. Take the example where I am driving in to Montreal and want to know where a Starbucks coffee shop is. In the text box I type in Starbucks Montreal. The results are displayed in Figure 1-7.