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.
The XMLHTTPRequest Object
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 XMLHTTPRequest object. This JavaScript object is capable of making a connection to the server and issuing an HTTP request without the necessity of an associated page load.
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.
The XMLHTTPRequest object possesses a convenient property to report on the progress of the server request. You can examine this property using JavaScript routines to determine the point at which the server has completed its task and the results are available for use.
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 SOAP and REST.
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.
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.
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.
Summary
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.
That concludes Part I of the book, "Web Basics Refresher." In Part II we shall begin to explore client-side programming using JavaScript.
This chapter is an excerpt from the book, Sams Teach Yourself Ajax, JavaScript and PHP All in One by Phil Ballard and Michael Moncur, Copyright 2009 by Sams Publishing, ISBN 0672329654. Safari Books Online subscribers.
Original: October 7, 2008
Find a programming school near you