If you hang out with designers and developers at all, then you've probably heard the term "Ajax" by now. It's the official buzzword of Web 2.0. But it's also an extremely useful web development technique.
In the course of this tutorial, we're going to look at what Ajax can do. Then we'll use a JavaScript class to simplify your first steps toward the ultimate in speedy user interactivity.
First, what is Ajax? It stands for Asynchronous JavaScript And XML. In simple speak, Ajax allows us to use JavaScript to grab an XML file (or any other text) without reloading the whole web page.
Ajax has been used for a lot of things, but it is most impressive when many small updates are needed in a short period. Think streaming stock quotes or draggable maps.
In our example, we'll use a pair of dropdown menu boxes (SELECT tags in HTML). A selection in the first box affects our list of choices in the second box. It's not exactly cutting edge (Thau did something similar using JavaScript), but it's a proof of concept.
Before we get started, here's the stuff you'll want in your toolbag:
1. A love of extremely basic HTML.
2. Willingness to consult Thau's Javascript Tutorial if you get confused.
3. "Http", a caching XmlHttpRequest wrapper, which you can download to immediately make your life simpler. Plus, if you get into advanced Ajax programming, you may like the caching that is built into this Javascript class.
But that's the future. Let's talk about now, alright? Ajax on three. One, two, three... Ajax!
Before we do any JavaScript Ajax voodoo, let's setup our HTML.
<html>
<head>
<!--
Javascript Ajax voodoo will go here
-->
</head>
<body>
<form name="frmSelect">
<p>
<select name="country" onChange="handleOnChange(this);">
<option>Select country</option>
<option>France</option>
<option>Germany</option>
<option>Spain</option>
</select>
</p><p>
<select name="prez">
<option>Select head of government</option>
</select>
</p>
</form>
</body>
</html>
Here we have created an HTML form containing two dropdown menus. The dropdowns use the SELECT tag, which can contain several options.
The first dropdown has four options: Select country, France, Germany, and Spain. Notice the onChange part of this dropdown:
onChange="handleOnChange(this);"
This will become important later.
The second dropdown has only one option: Select head of government.
What we want to accomplish with our Ajax call is to get the three most recent heads of government for each country and load them into the second dropdown whenever the user changes the first dropdown.
Sounds simple enough, but how are you on recent European presidents and chancellors? One great thing about Ajax is that we can grab content only when we need it. So, we'll connect ourselves to some sort of feed that will give us the head of government for a particular country when we need it.
For the purpose of this example, our feed will be plain text files stored in the same directory as our web page. So, copy the following lines to their own text files.
France.txt:
|Valéry Giscard d'Estaing|François Mitterrand|Jacques Chirac
Germany.txt:
|Helmut Kohl|Gerhard Schröder|Angela Merke
Spain.txt:
|Felipe González Márquez|José María Aznar López|José Luis Rodríguez Zapatero
Notice how the lines contain names separated by vertical lines? Those lines are called "pipes," and the pipe symbol has its own keystroke on your keyboard. Just hold Shift and look for the backslash (\). So, the plan of attack is that whenever Germany is selected (for example), we'll make an Ajax call to retrieve Germany.txt, get rid of those pipes, and put the names in the second dropdown box.
Now that we're ready for the Ajax voodoo, let's get to the nitty gritty on the next page.
next page»
