Information Technology Reference
In-Depth Information
</span>
</body>
</html>
When viewed on the Android web browser, the page loads and shows the default state
(see Figure 12-6).
Figure 12-6.
The initial page of the Word-of-the-Day example
Now when the user clicks the “Get the Word!” button, the ellipsis is replaced with the
actual word of the day, drawn from
word.txt
(see Figure 12-7). You'll also notice that
the text seems to shrink up a bit—this is because the AJAX request is taking up the
entirety of the
'theword' <div>
section, including the
<h2>
tag which normally would
provide more spacing. I've done this intentionally to point out that the nesting of tags is
important when considering AJAX requests. Placing the
<h2>
outside the
<div>
would
preserve the space.
Figure 12-7.
The word is now put into the page, without the page reloading!
Success! We've changed the content of the page, by making a call to the server, without
actually reloading the page. Better yet, if the user hits “reload” on the browser, we'll
avoid an ugly error similar to that in Figure 12-8, since we didn't actually send any
“POST” data to the server (in the traditional sense).See the “AJAX Considerations”
section at the end of this chapter for more information on POST data.
