Ajax (another try)

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.

About Ken Kousen
I teach software development training courses. I specialize in all areas of Java and XML, from EJB3 to web services to open source projects like Spring, Hibernate, Groovy, and Grails. Find me on Google+ I am the author of "Making Java Groovy", a Java / Groovy integration book published by Manning in the Fall of 2013, and "Gradle Recipes for Android", published by O'Reilly in 2015.

One Response to Ajax (another try)

  1. Jens E. says:

    Glad to hear you’re using MyEclipse. If you have any suggestions about how we could improve or enhance our AJAX Tools, please don’t hesitate to drop us a line. Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: