Ajax

While reading an article on CBC’s website, I noticed they have added what seem to be newly-designed mega drop-down menus that work in an interesting kind of way.

These looked like a cool and simple thing to reproduce, so I gave it a shot and came up with something that I think works pretty nicely.

It wasn’t as simple as I thought, and I don’t think my code is the greatest, so I’m open to suggestions. I think this could form the basis for a jQuery plugin but I’ve never created a jQuery plugin so holding I’m off on that for now.

Last week I posted a tutorial that demonstrated using a simple application how to implement progressive enhancement into your Ajax projects. The one major flaw in the final Ajax-driven page from that tutorial is the lack of deep linking when JavaScript is enabled.

Although the resulting code is clean, works well, and is easy to maintain, the lack of deep linking is enough to cause a client to balk at the use of progressive enhancement in such a circumstance. So, in this brief tutorial, I’ll describe how to incorporate deep linking into that page.

If you haven’t already gone through the previous tutorial, doing so might help you get up to speed — but it’s not absolutely necessary, since the code we’ll be using is pretty straightforward.

If you’ve done your best to keep up with web development trends over the past five years or more, then it’s likely that you’re familiar with the concept of Progressive Enhancement. I’m not going to provide an explanation of that technique here, but instead, I thought I would demonstrate using a small Ajax-driven page how progressive enhancement can be implemented.

The mini-app we’ll be building in this tutorial is an employee information page. It will consist of a series of links at the top of the page that will determine what employee info is displayed in the content area. The information will be held inside of include files, to simplify the process (as opposed to a database or XML file which might be more practical in a real-world app). Although we’re going to use Ajax to display the information, we’re going to ensure that the same information is displayed even when the user is visiting the page without JavaScript capabilities.

This is the second tutorial in a series explaining how to implement Ajax “from the ground up”, so if you haven’t yet checked out the first tutorial, then please do so now, as this one will be building on code from part one.

In the first part, we learned how to create an instance of the XMLHttpRequest object in a cross-browser fashion. In part 2, we’ll discuss the code needed to start communicating with the server. The result of this tutorial will help us send data to the server.

It started out as an industry “buzzword” and has slowly progressed into one of the most important web technologies in use today. It is easily implemented using your favourite JavaScript framework. It can provide a beautiful layer of enhancement to many web applications, helping to improve page-load times and greatly improve the user experience. It can also degrade the user experience and cause a web application to fail if a particular client-side technology is unavailable.

Yes, I’m talking about the web methodology immortalized by Jesse James Garrett called Ajax. (As Garrett points out, Ajax is not a technology, but several technologies.) This article will begin a multi-part tutorial series in which I will explain how to implement Ajax “from the ground up”. This series will be geared towards web developers who would like to better understand Ajax in its raw format, using pure JavaScript.