Flirting with Ajax

Album Cover: Sea Change

"How could this love, ever changing, never change the way I feel?"
Beck / Lonesome Tears

Posted on August 24, 2005 10:58 PM in Web Development
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

I wasn't kidding when I said very soon. I've made yet another change to my search page, and while it may not be all that monumental for users, it is pretty monumental for me personally. Why? Because it's my first foray into the world of Ajax.

It's a real shame how long it takes me to go from a concept in my head to actually implementing it here on my blog, but better late than never, I suppose. Now for a little explanation of what it does, how it works, etc.

If you head on over to my search page, you'll notice that it looks the same as it always did. In fact, the old functionality is still there and did not change a bit (more on this a little later). You shouldn't notice any change until you start to enter search terms into the input box. If you type in something like "Mozilla Firefox" or "Asa Dotzler," you'll notice that search results are displayed below the form on-the-fly, all via the beauty of Ajax.

In order to implement the dynamic searching I followed along with Bill Bercik's Guide to Using XMLHttpRequest. I was able to use most of his code and only tweak a few things so that it was more appropriate for searching and updating search results in a div (rather than in some form element...which isn't as aesthetic). The "Google Suggest Hack" over at Basic AJAX Examples came in handy too, simply because it showed me how to update a div on-the-fly.

One of the great things about how I implemented this new functionality is that I didn't have to lose the old functionality in the process. This means that if you completely disable JavaScript in your browser (or for some crazy reason your browser doesn't support it), you'll still be able to type in search terms and hit the "Search" button to get results. I even made sure to wrap those results in the same div that encloses the Ajax results so that they can still be updated on-the-fly in the case that a user wants to mix-and-match searching methods.

All-in-all, this was an excellent exercise for me in that it gave me real hands-on experience with Ajax. I plan on working on a web project in the near future that will be very Ajax intensive, so having this experience under my belt should help a great deal. It may not add all that much to my site overall, but I think this new functionality combined with the full-text searching I added earlier tonight at least accomplish my goal of making my search page mo' betta, and mo' robust.

If you have comments, questions, or would like to see more of the technical details of how this was implemented, leave a comment or drop me an email.

Comments

Ryan on August 25, 2005 at 1:39 AM:

Now this *is* nifty.

Permalink

Mike on August 25, 2005 at 10:38 AM:

Nice work Bernie, always nice to see the new stuff you've been working on. One thing I noticed (that hopefully you're still working on), is that after visiting a search result and going back to the search page, all the results are gone, yet the search term still appears in the search box (OS X Tiger, Safari 2.0). Minor issue, but it would be nice to have them still present.

Permalink

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.