HTML and CSS Reference
In-Depth Information
EXAMPLE
18.6 (
CONTINUED
)
} //End getText() function
</script>
</head>
<body>
<span style="cursor: pointer; text-decoration: underline"
7
onclick="getText('ajaxtext.txt')"
>
Fetch text from a file
</span>
<p>
8
<div id=data class="divStyle">
</div>
</p>
</body>
</html>
EXPLANATION
1
A new
XMLHttpRequest
object, called
ajaxRequest
, is created (code is in “ajaxRe-
quest.js”, Example 18.8).
2
The callback function is defined and assigned to the
onreadystatechange
event
handler used to monitor the state of the server.
3
When the
readyState
of the server is 4, the request is complete. If the HTTP status
is OK (200), the program proceeds.
4
The
getElementById()
method will return a reference to the
div
container named
“data” on line 8. The
ajaxRequest.responseText
property contains the ASCII text
that was returned. The
innerHTML
property will put that text in the <
div
> con-
tainer.
5
The
XMLHttpRequest
object's
open()
method initializes the object. The request will
be sent as an HTTP GET request to get data from a file called “ajaxtext.txt”.
(When using Internet Explorer the URL was
http://localhost/ajaxtext.txt
with
Firefox just the name of the file was given.)
6
The request is sent to the server.
7
When the user clicks the underlined text defined by the
span
tag, the
getText()
function will be launched. Its argument is the name of the text file that will be pro-
cessed, shown in Example 18.7.
8
This is the
<div>
container where the results of the HTTP request will be dis-
played. See Figure 18.14.
The Text File—“ajaxText.txt”
EXAMPLE
18.7
Once upon a time there were
three little bears.
