Unobtrusive Ajax

Examples

It's time we really got into some more complex examples of unobtrusive development. Here, I'll go over a few typical web development challenges, complete with some fairly heavy code examples. I think it will be worth it, though, so you can see how the practice of unobtrusive development can be applied to very typical development scenarios.

These examples will be written in PHP (because it's rather common, and it's what I'm comfortable in, and I don't think anyone would benefit from trying to understand my pseudocode), but I won't be doing anything very PHP-specific, so you should be able to read along and apply the concepts to any language, even if you haven't seen PHP before in your life.

These examples will also take advantage of the JavaScript functions discussed in the previous chapter. Feel free to replace them with the equivalents in your JavaScript library.

Dynamic Ajax Tabs

Thanks to Ajax, we can make a web page look and work similar to a desktop application, complete with tabs.

Tabs were possible in the Web before Ajax, too. They just acted different. When you clicked a tab, the page reloaded, the tab was highlighted, and the appropriate content was displayed. With Ajax, the tab highlight can change with the content without reloading the page. In this example, we will get both working on the same page using Unobtrusive Ajax.

We'll start with our data—in this case, the pages themselves. A page just consists of a title and a body. Typically this will come from the database, ...