Listing 2. Pat1_content.html

HTML encoded content goes here.

When I load the page in Firefox, I see the result shown in Figure 1.

Figure 1. The page with the replaced <div> tag

Go back to the code in Listing 1 and look at a few things. The first thing to notice is the loadUrl() function, which requests a URL from the server. This function uses the XMLHTTPRequest object to ask the server for the new content. It also specifies a callback function — in this case, processReqChange — that’s called when the browser has received the content. The processReqChange function then inspects the object to see whether the request has been completed. If it has, the function sets the innerHTML of the <div> tag in the page into the text of the response.

The use of the <div> tag as a placeholder for dynamic content is a staple of Ajax code. These tags have no visible presence (unless you add borders and such, as I have), but they act as a good marker for where content should go. Engineers also use the <span> tag for replaceable segments, as I demonstrate later. The difference between a <div> and a <span> tag is that the former imposes a line break (like a paragraph), while the latter delineates a section of inline text. Getting back to the processReqChange function for a moment, it’s important that the function