Stuff I've learned recently…

Since my previous post vanished into the ether, I'll try to regenerate it. Grr again.

I spent this week developing Ajax materials for a client. They asked me to put together a half-day of materials, including PowerPoint slides and a lab. This request had a few elements in its favor:

1. I really like this client and want to make them happy.
2. I like Ajax, too, and wanted to dig into it a bit more. Besides, on of my favorite technical books at the moment is Ajax in Action by Dave Crane (Manning), though I did spend a lot of time with Foundations of Ajax (Apress).
3. The request seemed like it was going to be easy and quick. (Yeah, right.)
4. They were going to pay me.

All good things, you must admit. At any rate, I said yes, cranked up the old MyEclipse editor, and went to town.

Unfortunately, I hadn't yet made my 10 Canonical Errors in Ajax. 10 Canonical Errors you ask? I need to make a separate post about that, but in short, my feeling is that in any new technology there are at least 10 canonical errors you have to make before you become productive. Each one will likely cost you hours of debugging time. The difficulty is that there's no way to know what those errors are before you make them. It's just part of the learning process.

Why 10? No reason. It's just a nice, round number and it's also probably a significant underestimate.

When building my Ajax demos and labs for these materials, here are a few of the ones I stumbled across.

• XHTML is evil in at least one respect. When an element is defined in the spec to be not empty (i.e., the content model is anything other than EMPTY in the DTD), you have to write it as separate start and end tags rather than in its minimized form. Otherwise the browsers don't understand it. Yikes.

That means use <script src="myscript.js"></script> rather than <script src="myscript.js" />. The same goes for <div id="message"></div> instead of <div id="message" />. This is actually in the spec, but it took a while for me to find. Check out section C.3 here.

• The onreadystatechange property of the XMLHttpRequest object needs to be assigned to a function pointer, not a function.

Duh, and duh. Use xhr.onreadystatechange = handler instead of xhr.onreadystatechange = handler(). The former is a pointer to a function defined in the same file. The latter is a definition of an empty function.

• The text value of an element in the DOM is in its first child. Yeah, I've known that for years, but that didn't stop me from making that error again.
• For an HTML form element in the DOM, you set its value using the value property. For an XML DOM element, you use the nodeValue property. Sigh.

These two I can describe together. To set a form value based on an XML node value, use

document.getElementById("name").value = doc.getElementsByName("name")[0].firstChild.nodeValue

Wow. I guess that's why we need frameworks and libraries, like scriptaculous.

In the end the materials got developed, and I used them on Saturday in my Rensselaer Developing Enterprise Applications class, too. It was an interesting experience.

Now I'm ready to go back to Hibernate materials development for Will Provost.