My fellow Brightonian Glenn Jones, who runs a company called Madgex, is a nice guy and I’m not just saying that because he had such kind words to say about my book and invited me ‘round to the office Christmas booze-up (cheers, Glen). He recently joined the blogging brigade and he’s been posting some great, in-depth articles.
A little while back, he wrote up the documentation for an Ajax link tracker he put together. It’s a really nice, seamless use of Ajax and DOM Scripting. Go ahead and try it: go to the post and press ctrl and x. Statistical information is called up via Ajax and overlaid on the page using DOM Scripting.
There are two different types of Ajax functionality being used:
- Capturing information when a link is clicked and passing that information to the server.
- Requesting statistical information from the server when a key combo is pressed and overlaying that information on the page.
The functionality for capturing the link tracking is nicely unobtrusive, as Glenn outlines:
I used the JavaScript page-hijacking technique. On loading, the JavaScript finds all the links and attaches a
mousedownevent to each link.
Likewise, the overlay is generated without inline event handlers. There’s a listener for keydown that waits for the ctrl x combo and then generates the overlaid information using the DOM methods createElement, createTextNode, and appendChild.
For the actual Ajax legwork, Glenn is using a stripped down version of Prototype, taking just the bits he needs. That’s the way to use a framework — understand how it works and bend it to your needs, rather than treating it as an unknown black box that you can’t configure.
If you’re interested in what happens to the information that’s sent to the server when a link is clicked, Glenn has also documented the API he created for the back end. When ctrl x is pressed, the API returns XML in the responseXML property of the XMLHttpRequest object which is then parsed by JavaScript using DOM methods and properties. Ajax and APIs go together like peas in a pod, especially when the API is sitting on the same site.
You can check out the JavaScript code but more importantly, the write-up on the blog shows the methodology and forethought that went into this neat experiment.
Posted by Jeremy on Thursday, December 29th, 2005 at 9:17pm
Sorry. Comments are closed.