Information Technology Reference
In-Depth Information
example, and then move into something a bit more complex, referencing both a web
service and our own local database.
AJAX-of-the-Day
It was recently reported that the “word of the year” for 2011 was “pragmatic.” This was
because one dictionary-serving website found it to be the most looked up word in that
year, and thus crowned it the winner. Perhaps you're looking at this going, “I've always
wondered what 'pragmatic' means” (or maybe, “What kinda moron doesn't know what
'pragmatic' means?!?”), and wondering why we don't have more web applications
bringing us content like this. Well, today is your lucky day, because you're about to write
one.
For the word-of-the-day application, we're going to create a rather bare-bones
mechanism to provide said word. Later in this chapter we'll discuss how to use AJAX to
pull in information from a database or web service, but for now we're going to use a
good, old-fashionedflat text file. Named, aptly,
word.txt
:
Listing 12-1.
word.txt
<em>Pragmatic</em>: relating to matters of fact or practical affairs. <i>-<A
HREF=
http://www.merriam-webster.com/dictionary/pragmatic>
Merriam-Webster.com</A></i>
The file
word.txt
has some bits of HTML in it (in this case, we're using simple style
tags, however we could use CSS-themed div statements), and if we load it up in our
web browser (Figure 12-5), we'll see it displayed as simple text:
Figure 12-5.
The word-of-the-day word.txt file
Next up, I'm going to build an HTML page that will load up the word-of-the-day when
the user presses a button. It's going to look something like Listing 12-2, in code terms.
We'll walk through this stepbystep.
Listing 12-2.
word.html, Part 1: The Initial JavaScript Function to Load the Word
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Word of the Day</title>
<script type="text/javascript">
function loadword(){
