Hello Ajax

UPDATE UPDATE UPDATE!

Version 3: AJAX Progressive Enhancement = persistent Flash jukebox. Try it with Javascript on and off. Check out the source to see what’s happening. Read on to know why.

I haven’t mentioned it yet, but I’m working on a big project for my web programming class, and my group is going way beyond what is expected for it… whether they like it or not! The class expects XHTML, PHP, MySQL, and CSS, but we’re throwing AJAX into the mix for good measure. And while we aren’t expected to build a CMS for our client, we’re doing that too.

So here’s the thing: we are making a site for a band. This site could benefit from one feature: a persistent jukebox. That way visitors could listen to the band’s music and still browse the site. The answer was clear: AJAX.

The only thing was that I actually needed to learn AJAX. And the site will need to use progressive enhancement, so as to make sure that the site still works, without any problems, for users without Javascript. After a couple hours, I think I’ve solved both problems.

What really came through was Taconite, a great framework that makes it totally painless to create XMLHttpRequests with cross-browser compatibility. The documentation was very slim, but I was able to use my own knowledge of Javascript and DOMscripting to use Taconite and take a page that works just fine without AJAX and handle the data with AJAX, so that the only data being updated is the main content, instead of the entire page.

What I’ve put together is like a template, or a series of templates. Taconite templates the XML for me, and then I use PHP to use the same file for the XML and the static content used when Javascript is off. If there is no Javascript, the file gets included in the content and the output is text/html. The file calls GET variables and chooses what to load based on that. When there is Javascript, the navigation links are replaced with “onclick” calls that do the requests, and the calls send GET variables to the file which uses them to send back the right data, served as text/xml. It’s really complicated and it’s too late for me to explain any further, but I just had to share this as I’m excited… I have a framework for integrating PHP, MySQL, and AJAX in a clean, unobtrusive, standards-compliant way that is capable of scaling to any amount of content and still be very cross-browser compatible. I’m sure it’s been done before but I’m off to celebrate anyway. I’ll share more later.