- The Need for Ajax
- Introducing Ajax
- The Constituent Parts of Ajax
- Putting It All Together
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Putting It All Together
Suppose that you want to design a new Ajax application, or update a legacy web application to include Ajax techniques. How do you go about it?
First you need to decide what page events and user actions will be responsible for causing the sending of an asynchronous HTTP request. You may decide, for example, that the action of moving the mouse cursor over an image will result in a request being sent to the server to retrieve further information about the subject of the picture, or that the clicking of a button will generate a server request for information with which to populate the fields on a form.
JavaScript can be used to execute instructions on occurrences such as these, by employing event handlers. The details of how will be covered in detail in the following chapters. In your Ajax applications, such methods will be responsible for initiating asynchronous HTTP requests via XMLHTTPRequest.
Having made the request, you need to write routines to monitor the progress of that request until you hear from the server that the request has been successfully completed.
Finally, after receiving notification that the server has completed its task, you need a routine to retrieve the information returned from the server and apply it in the application. You may, for example, want to use the newly returned data to change the contents of the page's body text, populate the fields of a form, or pop open an information window.
Figure 3.5 shows the flow diagram of all this.
)
Figure 3.5 How the components of an Ajax application work together.
In Chapter 13, "Our First Ajax Application," you'll use what you have learned to construct a complete Ajax application.
Ajax Frameworks
While it is essential for a complete understanding of Ajax to understand what role each of the individual components plays, it is thankfully not necessary to rewrite all of your code for each new application. Your Ajax code can be stored as a reusable library of common Ajax routines, ready to be reused wherever they may be needed. There are also many commercial and open-source frameworks that you can use in your projects to do the "heavy lifting."
We shall look at both of these techniques later in the book, where we develop our own JavaScript library for Ajax, and also consider several of the more popular open-source libraries.