• Choose a category
• All
• Classic-Fiction

By Root 4184 0

by setting its width and height to zero pixels. We could use a styling of display:none, but certain browsers will optimize based on this and not bother to load the document! Note also that we need to wait for the document to load before looking for the IFrame, by calling getElementById() in the window.onload handler function. Another approach is to programmatically generate the IFrames on demand, as in listing 2.7. This has the added advantage of keeping all the code related to requesting the data in one place, rather than needing to keep unique DOM node IDs in sync between the script and the HTML.

Document content

Requestor

Callback function

Server

1. Invoke request

2. Quick notify

2a. HTTP request

3. HTTP response

4. Update user interface

Figure 2.5 Sequence of events in an asynchronous communication in a web page. User action invokes a request from a hidden requester object (an IFrame or XMLHttpRequest object), which initiates a call to the server asynchronously. The method returns very quickly, blocking the user interface for only a short period of time, represented by the height of the shaded area. The response is parsed by a callback function, which then updates the user interface accordingly. Licensed to jonathan zheng

56

CHAPTER 2

First steps with Ajax

Listing 2.7 Creating an IFrame

function fetchData(){

var iframe=document.createElement('iframe');

iframe.className='hiddenDataFeed';

document.body.appendChild(iframe);

var src='datafeeds/mydata.xml';

loadDataAsynchronously(iframe,src);

}

The use of createElement() and appendChild() to modify the DOM should be familiar from earlier examples. If we follow this approach rigidly, we will eventually create a large number of IFrames as the application continues to run. We need to either destroy the IFrames when we’ve finished with them or implement a pooling mechanism of some sort.

Design patterns, which we introduce in chapter 3, can help us to implement robust pools, queues, and other mechanisms that make a larger-scale application run smoothly, so we’ll return to this topic in more depth later. In the meantime, let’s turn our attention to the next set of technologies for making behind-thescenes requests to the server. 2.5.2 XmlDocument and XMLHttpRequest objects

IFrames can be used to request data behind the scenes, as we just saw, but it is essentially a hack, repurposing something that was originally introduced to display visible content within a page. Later versions of popular web browsers introduced purpose-built objects for asynchronous data transfer, which, as we will see, offer some convenient advantages over IFrames.

The XmlDocument and XMLHttpRequest objects are nonstandard extensions to the web browser DOM that happen to be supported by the majority of browsers. They streamline the business of making asynchronous calls considerably, because they are explicitly designed for fetching data in the background. Both objects originated as Microsoft-specific ActiveX components that were available as JavaScript objects in the Internet Explorer browser. Other browsers have since implemented native objects with similar functionality and API calls. Both perform similar functions, but the XMLHttpRequest provides more fine-grained control over the request. We will use that throughout most of this book, but mention XmlDocument briefly here in case you come across it and wonder how it differs from XMLHttpRequest. Listing 2.8 shows a simple function body that creates an XmlDocument object. Licensed to jonathan zheng

Loading data asynchronously using XML technologies

57

Listing 2.8 getXmlDocument() function

function getXMLDocument(){

var xDoc=null;

if (document.implementation

&& document.implementation.createDocument){

xDoc=document.implementation

.createDocument("","",null);

Mozilla/Safari

}else if (typeof ActiveXObject != "undefined"){

var msXmlAx==null;

try{

msXmlAx=new ActiveXObject

("Msxml2.DOMDocument");

Newer Internet Explorer

}catch (e){

msXmlAx=new ActiveXObject

("Msxml.DOMDocument");