• Choose a category
• All
• Classic-Fiction

By Root 4162 0

and the nested text node can be added in a single statement. Note also that it is appending to the property using the += operator, not assigning it directly. Deleting a node using innerHTML would require us to extract and parse the string. innerHTML is less verbose and suited to relatively simple applications such as this. If a node is going to be heavily modified by an application, the DOM

nodes presented earlier provide a superior mechanism.

We’ve now covered JavaScript, CSS, and the DOM. Together, they went under the name Dynamic HTML when first released. As we mentioned in the introduction to this chapter, Ajax uses many of the Dynamic HTML techniques, but it is new and exciting because it throws an added ingredient into the mix. In the next section, we’ll look at what sets Ajax apart from DHTML—the ability to talk to the server while the user works.

2.5 Loading data asynchronously

using XML technologies

While working at an application—especially a sovereign one—users will be interacting continuously with the app, as part of the workflow. In chapter 1, we discussed the importance of keeping the application responsive. If everything locks up while a lengthy background task executes, the user is interrupted. We discussed the advantages of asynchronous method calls as a way of improving UI responsiveness when executing such lengthy tasks, and we noted that, because of network latency, all calls to the server should be considered as lengthy. We also noted that under the basic HTTP request-response model, this was a bit of a nonstarter. Classical web applications rely on full-page reloads with every call to the server leading to frequent interruptions for the user.

Licensed to jonathan zheng

54

CHAPTER 2

First steps with Ajax

Although we have to accept that a document request is blocked until the server returns its response, we have a number of ways of making a server request look asynchronous to users so that they can continue working. The earliest attempts at providing this background communication used IFrames. More recently, the XMLHttpRequest object has provided a cleaner and more powerful solution. We’ll look at both technologies here.

2.5.1 IFrames

When DHTML arrived with versions 4 of Netscape Navigator and Microsoft Internet Explorer, it introduced flexible, programmable layout to the web page. A natural extension of the old HTML Frameset was the IFrame. The I stands for inline, meaning that it is part of the layout of another document, rather than sitting side by side as in a frameset. An IFrame is represented as an element in the DOM tree, meaning that we can move it about, resize it, and even hide it altogether, while the page is visible. The key breakthrough came when people started to realize that an IFrame could be styled so as to be completely invisible. This allowed it to fetch data in the background, while the visible user experience was undisturbed. Suddenly, there was a mechanism to contact the server asynchronously, albeit rather a hacky one. Figure 2.5 illustrates the sequence of events behind this approach. Like other DOM elements, an IFrame can be declared in the HTML for a page or it can be programmatically generated using document.createElement(). In a simple case, in which we want only a single nonvisible IFrame for loading data into, we can declare it as part of the document and get a programmatic handle on it using document.getElementById(), as in listing 2.6.

Listing 2.6 Using an IFrame

Licensed to jonathan zheng

Loading data asynchronously using XML technologies

55

-->

id='dataFeed'

style='height:0px;width:0px;'

>

The IFrame has been styled as being invisible