Java Reference
In-Depth Information
Figure 10.2: A Simple Page in the DOM Inspector
The DOM provides a programmatic way to access the contents of the web site. For ex-
ample, the following JavaScript code would change the text “One”, from Figure 10.1 to “Hello
World”.
document.getElementById('rect1').innerHTML='Hello World';
As you can see from the above code, the value of the tag, named
rect1
can be changed
on the fly. Here it is being changed to the words “Hello World”.
This is the heart of AJAX programming. You modify the page that is currently being
displayed. This limits the number of times the web browser has to go back to the web server
for a complete page.
Communicating using the XMLHttpRequest Object
The
XMLHttpRequest
object allows JavaScript to communicate directly with the
web server. This communication occurs through the HTTP protocol. However, the data ex-
changed with the
XMLHttpRequest
objects goes to the JavaScript program and does
not redisplay the entire page. The AJAX browser application can then interpret the HTTP
response as needed and update itself using the DOM.