1.7. Anatomy of a Server Call At a lower level, how does an Ajax interaction look? Here's a typical sequence of events. Let's begin with the application startup sequence (Figure 1-4): Figure 1-4. Typical startup sequence 
User points browser to Ajax App. The user begins interacting with an Ajax application by visiting it in the usual way; e.g., by following a link or selecting a bookmark. Browser loads initial content. The browser fills up with initial content sent out by the Ajax application. This includes the initial HTML to be displayed, the CSS to establish styling, and the JavaScript code to manage further interaction. The HTML is sometimes as raw as a general page structure, in which case the initial content will subsequently be pulled down in a second call. The code will usually set up event handlers to dictate how the system should respond to user actions.
Once the application has loaded, further activity will be triggered by events. Following is the typical sequence for each event (Figure 1-5): Figure 1-5. Typical event-handling sequence 
User does something. Most events are triggered by user actions such as mouse clicks. As explained in Dynamic Behavior patterns, JavaScript functions can be registered against particular event types on particular page elements; e.g., you can arrange for the purchase( ) function to be called whenever a shopping item (the page element) is double-clicked (the event type). Thus, the user action will typically cause an event handler to be invoked. Event handler sends request to server. Certain events require server interactionfor example, the user has just entered some information that should be validated by the server; or the user has just requested some new information. XMLHttpRequesta key Ajax technologyis designed specifically for this purpose. It's a way for JavaScript code to directly call the server, and in doing so, the code will indicate a callback function that will be notified when the response eventually arrives. Browser-server interaction is described in Web Remoting (Chapter 6) patterns. Server processes request. In the server, a web service (see the Web Service [Chapter 6] pattern) receives the request. Server responds. The web service receives the request and outputs a response using standard HTTP techniques that will be familiar to anyone who has worked on traditional web applications. Browser callback function receives response. Back in the browser, the callback function is notified that the call has completed and can read the server response. It's free to use the response however it wants, but the most common activity is changing the display. This relies on manipulating the DOM, a representation of the web page that can be altered with JavaScript. See the Display Manipulation (Chapter 5) patterns for more details.
The sequence gives a quick overview of the technologiesthere's a hands-on introduction to each of them in the next chapter, and the first part of the patterns, Foundational Technology Patterns (Part II) covers them in more detail. |
