Build Your Own AJAX Web Applications - Part 3
By Matthew Eernisse, SitePoint.com
Chapter 3. The "A" in AJAX
It's flying over our heads in a million pieces.
-- Willy Wonka, Willy Wonka & the Chocolate Factory
The "A" in AJAX stands for "asynchronous," and while it's not nearly as cool as the letter "X," that "A" is what makes AJAX development so powerful. As we discussed in Chapter 1, AJAX: the Overview, AJAX's ability to update sections of an interface asynchronously has given developers a much greater level of control over the interactivity of the apps we build, and a degree of power that's driving web apps into what was previously the domain of desktop applications alone.
Back in the early days of web applications, users interacted with data by filling out forms and submitting them. Then they'd wait a bit, watching their browser's "page loading" animation until a whole new page came back from the server. Each data transaction between the browser and server was large and obvious, which made it easy for users to figure out what was going on, and what state their data was in.
As AJAX-style development becomes more popular, users can expect more interactive, "snappy" user interfaces. This is a good thing for users, but presents new challenges for the developers working to deliver this increased functionality. In an AJAX application, users alter data in an ad hoc fashion, so it's easy for both the user and the application to become confused about the state of that data.
The solution to both these issues is to display the application's status, which keeps users informed about what the application is doing. This makes the application seem very responsive, and gives users important guidance about what's happening to their data. This critical part of AJAX web application development is what separates the good AJAX apps from the bad.
Planned Application Enhancements
To create a snappy user interface that keeps users well-informed of the application's status, we'll take the monitoring script we developed in the previous chapter, and add some important functionality to it. Here's what we're going to add:
- a way for the system administrator to configure the interval between polls and the timeout threshold
- an easy way to start and stop the monitoring process
- a bar graph of response times for previous requests; the number of entries in the history list will be user-configurable
- user notification when the application is in the process of making a request
- graceful handling of request timeouts
Figure 3.1 shows what the running application will look like once we're done with all the enhancements.
The code for this application is broken up into three files: the markup in appmonitor2.html, the JavaScript code in appmonitor2.js, and the styles in appmonitor2.css. To start with, we'll link all the required files in to appmonitor2.html:
Example 3.1. appmonitor2.html (excerpt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>App Monitor</title>
<script type="text/javascript" realrealrealsrc="ajax.js" src="http://www.netregistry.com.au/news/admin/ajax.js" src="http://www.netregistry.com.au/news/admin/ajax.js" src="http://www.netregistry.com.au/news/admin/ajax.js"></script>
<script type="text/javascript" realrealrealsrc="appmonitor2.js" src="http://www.netregistry.com.au/news/admin/appmonitor2.js" src="http://www.netregistry.com.au/news/admin/appmonitor2.js" src="http://www.netregistry.com.au/news/admin/appmonitor2.js"></script>
<link rel="stylesheet" realrealrealsrc="appmonitor2.css" src="http://www.netregistry.com.au/news/admin/appmonitor2.css" src="http://www.netregistry.com.au/news/admin/appmonitor2.css" href="http://www.netregistry.com.au/news/admin/appmonitor2.css"
type="text/css" />
</head>
<body>
</body>
</html>
Figure 3.1. The running application
Report a bug