Freshening Websites with AJAX: Myths and Pitfalls
Over the past week, I’ve discovered some really neat things that AJAX - Asynchronous Javascript And XML - can do. I’ve now got the photo galleries equipped with something called Lightbox to overlay clicked images over the page, rather than opening a new one or changing the current one. Check it out - click on an image and watch the fullsize pop up in the same window.
More practically to the site as a whole, though, came a Live Search Wordpress Plugin. The code was flexible enough to graft into the theme itself - type something into the search box up top to try it out.
The reason I’ve been so late in implementing things like this has been because of misconceptions which have since been abolished, and because of trepidations I still hold to.
Misconceptions:
1) You need to know Javascript to understand AJAX, or AJAX is hard to implement
Personal testimony here: I don’t know a lick of Javascript. Any I have ever used, which is not much at all, has been scraped from other sites doing what I needed. By my logic, since all the Javascript I’ve ever had to implement has been complicated, AJAX, being much more powerful, must be much more complicated to maintain. But Javascript use has evolved considerably: All that’s usually required for a good AJAX module is inserting a script or two in the header and that’s it. With Lightbox I had to add a ‘rel’ tag to the images, but even that’s not terrible, and I don’t have to soil myself messing with any Javascript whatsoever.
2) Javascript will dirty my code
Old-world Javascript - all of what I had seen in the past - could easily take a beautifully structured and semantic (X)HTML document and make it look like complete garbage. onmouseover, onmousedown, and onmouseout tag properties could drive a developer insane trying to keep up with the script contained in a tag. But Javascript has evolved considerably since then. One of the more remarkable things I’ve noticed is that instead of using mouseover/down/out properties on tags, Javascript can now operate on a tag based on any attribute at all. This makes for extremely modular Javascript with virtually no trace of it in the markup at all. Lightbox recognizes links it’s supposed to operate on by a rel=”lightbox” attribute, and live search was built to automatically recognize the class of the search box - no code editing at all required beyond adding the script tags to the header.
3) AJAX locks my site into badly degrading features with bad cross-browser support
Actually, AJAX degrades extremely well. Without Javascript enabled, Lightbox will just open the image URL in the same window, and without live search, there’s always regular search, which has been there from the beginning. No gremlins appear without it enabled, and because it doesn’t dirty the markup, text-based and mobile browsers won’t notice a difference. As for browser support, because AJAX is generally implemented by libraries such as Scriptaculous or Prototype, browser compatibility is as reliable as it can get, which is surprisingly good.
But as great as AJAX is, it must of course be used in moderation. The trepidation I had about implementing it still exists, for these reasons.
1) It’s distracting and pointless
As much as I love last.fm, I don’t like their summer website update for a number of reasons. But all the others aside, the relevant reason is that it’s simply tacky. They make good use of AJAX in some places such as live deletion of recommendations and live posting to shoutboxes, but the site as a whole is overloaded with visual effects. Minimizing sections on the side produces a fancy-looking scroll effect to zip the section into its header. My objections to moving layouts aside, the scroll effect is just silly. In fact, most of the effects that people use AJAX for nowadays are silly. It adds processing overhead to the site, is visually distracting, and takes more time than a simple disappear. As one can see after 5 minutes of browsing places like Myspace, people like bells and whistles. We found this out in the 90s when the Geocities website stereotype chock full of animated gifs and marquees emerged. Thankfully the ones that know enough to implement AJAX generally do it in a much more tasteful manner than that, but it is nevertheless an unnecessary and visually distracting effect. As AJAX becomes more accessible and mainstream, we may find that AJAX becomes the animated GIF of the 2000s.
2) Overhead
This one’s pretty self-explanatory, and unlike the previous point, this one is a downside to all AJAX use, not just the tasteless variety. Javascript libraries get big - prototype.js will run you up 52k, more than the entire sidebar of this page including images.
AJAX is a pretty amazing tool - I’m having fun playing with it and am impressed by its capabilities and cleanliness, but as with anything, moderation should be the rule.
SHARE{ FacebookDiggRedditNewsVinedel.icio.usStumbleUponSlashdotTechnoratiMa.gnoliaWindows LiveTwitter }