Anatomy of an Ajax Application [con't]
The Constituent Parts of Ajax
Now let's examine the components of an Ajax application one at a time.
When you click on a hyperlink or submit an HTML form, you send an HTTP request to the server, which responds by serving to you a new or revised page. For your web application to work asynchronously, however, you must have a means to send HTTP requests to the server without an associated request to display a new page.
You can do so by means of the
Did You Know? As a security measure, the
XMLHTTPRequest object can generally only make calls to URLs within the same domain as the calling page and cannot directly call a remote server.
Chapter 5, "Working with the Document Object Model" will introduce the concept of objects in general, and this subject will be expanded in Chapter 7 "Using Functions and Objects."
Chapter 10, "The Heart of Ajax"—the XMLHTPPRequest Object, discusses how to create an instance of the
XMLHTTPRequest object and reviews the object's properties and methods.
Talking with the Server
In the traditional style of web page, when you issue a server request via a hyperlink or a form submission, the server accepts that request, carries out any required server-side processing, and subsequently serves to you a new page with content appropriate to the action you have undertaken.
While this processing takes place, the user interface is effectively frozen. You are made quite aware of this, when the server has completed its task, by the appearance in the browser of the new or revised page.
With asynchronous server requests, however, such communications occur in the background, and the completion of such a request does not necessarily coincide with a screen refresh or a new page being loaded. You must therefore make other arrangements to find out what progress the server has made in dealing with the request.
Your Ajax armory must therefore include a routine to monitor the status of a request and to act accordingly. We'll look at this in more detail in Chapter 11, "Talking with the Server."
What Happens at the Server?
So far as the server-side script is concerned, the communication from the
XMLHTTPRequest object is just another HTTP request. Ajax applications care little about what languages or operating environments exist at the server; provided that the client-side Ajax layer receives a timely and correctly formatted HTTP response from the server, everything will work just fine.
It is possible to build simple Ajax applications with no server-side scripting at all, simply by having the
XMLHTTPRequest object call a static server resource such as an XML or text file.
Ajax applications may make calls to various other server-side resources such as web services. Later in the book we'll look at some examples of calling web services using protocols such as
By the Way: In this book we'll be using the popular PHP scripting language for our server-side routines, but if you are more comfortable with ASP JSP or some other server-side language, go right ahead and use it in your Ajax applications.
Dealing with the Server Response
Once notified that an asynchronous request has been successfully completed, you may then utilize the information returned by the server.
Ajax allows for this information to be returned in a number of formats, including ASCII text and XML data.
Depending on the nature of the application, you may then translate, display, or otherwise process this information within the current page.
We'll look into these issues in Chapter 12, "Using the Returned Data."
Other Housekeeping Tasks
An Ajax application will be required to carry out a number of other duties, too. Examples include detecting error conditions and handling them appropriately, and keeping the user informed about the status of submitted Ajax equests.
You will see various examples in later chapters.
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.
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.
In Chapter 13, "Our First Ajax Application," you'll use what you have learned to construct a complete Ajax application.
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."
This chapter discussed the shortcomings of the traditional web interface, identifying specific problems we want to overcome. We also introduced the various building blocks of an Ajax application and discussed how they work ogether.
In the following chapters we shall look at these components in more detail, eventually using them to build a complete Ajax application.
Original: October 7, 2008