AJAX: an acronym that Jesse James Garret of AdaptivePath.com came up with in 2005. Just a few short years later, it seems like every site has a “taste” of AJAX in it. If you’re totally new to AJAX, I’ll just point out that, at its core, AJAX is nothing very scary or horrendous. AJAX isn’t even a new technology or language.

Essentially, AJAX stands for: Asynchronous JavaScript and XML, and it is the technique of using JavaScript and XML to send and receive data between a web browser and a web server. The biggest advantage this technique has is that you can dynamically update a piece of content on your web page or web form with data from the server (preferably formatted in XML), without forcing the entire page to reload. The implementation of this technique has made it obvious to many web developers that they can start making advanced web applications (sometimes called RIAs—Rich Interface Applications) that work and feel more like software applications than web pages.

Keep in mind that the word AJAX is starting to have its own meaning (as you’ll also note its occasional use here as well as all over the Web as a proper noun rather than an all-cap acronym). For example, a Microsoft web developer may use VBScript instead of JavaScript to serve up Microsoft Access database data that is transformed into JSON (not XML) using a .NET server-side script. Today, that guy’s site would still be considered an AJAX site rather than an “AVAJ” site (yep, AJAX just sounds cooler).

In fact, it’s getting to the point where just about anything on a web site (that isn’t in Flash) that slides, moves, fades, or pops up without rendering a new browser window is considered an “Ajaxy” site. In truth, a large portion of these sites don’t truly qualify as using AJAX, they’re just using straight-up JavaScripting. Generally, if you use cool JavaScripts in your Joomla! site, it will probably be considered Ajaxy, despite not being asynchronous or using any XML.

Want more info on this AJAX business? The w3schools site has an excellent introduction to AJAX, explaining it in straightforward simple terms. They even have a couple of great tutorials that are fun and easy to accomplish even if you only have a little HTML, JavaScript and server-side script (PHP or ASP) experience (no XML experience required): http://w3schools.com/ajax/.

Preparing for dynamic content and interactive forms

Gone are the days of clicking, submitting, and waiting for the next page to load, or manually compiling your own content from all your various online identities to post in your site.

A web page using AJAX techniques (if applied properly) will give the user a smoother and leaner experience. Click on a drop-down option and check-box menus underneath are immediately updated with the relevant choices—no submitting, no waiting. Complicated forms that, in the past, took two or three screens to process can be reduced into one convenient screen by implementing the form with AJAX.

As wonderful as this all sounds, I must again offer a quick disclaimer: I understand that, like with drop-down menus and Flash, you may want AJAX to be in your site, or your clients are demanding that AJAX be in their sites. Just keep in mind, AJAX techniques are best used in situations where they truly benefit a user’s experience of a page; for example, being able to painlessly add relevant content via an extension or cutting a lengthy web process form down from three pages to one. In a nutshell, using an AJAX technique simply to say your site is an AJAX site is probably not a good idea.

You should be aware that, if not implemented properly, some uses of AJAX can compromise the security of your site. You may inadvertently end up disabling key web browser features (such as back buttons or the history manager). Then there’s all the basic usability and accessibility issues that JavaScript in general can bring to a site.

Some screen readers may not be able to read a new screen area that’s been generated by JavaScript. If you cater to users who rely on tabbing through content, navigation may be compromised once new content is updated. There are also interface design problems that AJAX brings to the table (and Flash developers can commiserate). Many times, in trying to limit screen real estate and simplify a process, developers actually end up creating a form or interface that is unnecessarily complex and confusing, especially when your user is expecting a web page to, well, act like a normal web page.

Remember to check in with Don’t Make Me Think: This is the Steve Krug book I recommend for help with any interface usability questions you may run into.
Really interested in taking on AJAX? For you programmers, I highly recommend “AJAX and PHP: Building Responsive Web Applications”, Cristian Darie, Bogdan Brinzarea, Filip Chereches-Tosa, and Mihai Bucica, Packt Publishing. In it, you’ll learn the ins and outs of AJAX development, including handling security issues. You’ll also do some very cool stuff, such as make your own Google-style auto-suggest form and a drag-and-drop sortable list (and that’s just two of the many fun things to learn in the book).

So, that said, you’re now all equally warned and armed with all the knowledgeable resources I can think to throw at you. Let’s get to it: how exactly do you go about getting something Ajaxy into your Joomla! site?

Joomla! extensions

Keep in mind, extensions are not part of your template. They are additional files with Joomla!-compatible PHP code, which are installed separately into their own directories in your Joomla! 1.5 installation. Once installed, they are available to be used with any template that is also installed in your Joomla! installation.

Even though these are not part of your template, you might have to prepare your template to be fully compatible with them. Some extensions may have their own stylesheets, which are installed in their extension directory. Once you’ve installed an extension, you may want to go into your own template’s stylesheet so that it nicely displays XHTML objects and content that the extension may output into your site.

Extensions are any component, module or plugin that you install into your Joomla! 1.5 installation.

Components control content that displays in the main type=”component” jdoc tag in your template. Note that components may also have module settings and the ability to display content in assigned module positions. The poll component is a good example of a component that also has module settings.

Modules are usually smaller and lighter and only display in module positions.

Plugins generally help you out more on the backend of your site, say to switch WYSIWYG editors or with enabling OpenID logins, but as we’ll see, some plugins can affect the display of your site to users as well.

Deciding where AJAX is best used

On the whole, we’re going to look at the most popular places where AJAX can really aid and enrich your site’s user experience. We’ll start with users adding comments to articles and pages and streamlining that process. We’ll then take a look at a nice plugin that can enhance pagination for people reading long articles on your site.

We’ll then move on to the RSS Reader module, which can enhance the content in your modules (and even makes your users have fun arranging them). Finally, we’ll realize that AJAX isn’t just for impressing your site users. You, as an administrator, can (and do) take advantage of AJAX as well.

Please note: These extensions were chosen by me based on the following criteria:

1. They provided some useful enhancement to a basic site.
2. They, at the time of this writing, were free and received very good feedback on Joomla!.org’s extensions site: http://extensions.Joomla.org.

In the next few pages, I’ll walk you through installing these extensions and discuss any interesting insights for doing so, and benefits of their enhancements (and some drawbacks). But you must use the extension links provided to make sure you download the latest stable versions of these extensions and follow the extension author’s installation guides when installing these into your Joomla! site. If you run into any problems installing these extensions, please contact the extension’s author for support. Always be sure to take the normal precaution of backing up your site before installation, at least for any non-stable extensions you may decide to try.

Installing the Joomla! comment component

Chances are, if you’ve invested in Joomla! 1.5 as your CMS, you need some powerful capabilities. Easy commenting with “captcha” images to reduce spam is always helpful:

http://extensions.Joomla.org/extensions/contacts-&-feedback/comments/4389/details

To install this extension (and the other few coming up), you have to basically go to Extensions | Install/Uninstall and upload the extension’s ZIP file. You’ll then proceed to the plugin, component, and/or modules panel and activate the extension so that it is ready to be implemented on your site.

Upon installing this comment component, to my surprise, it told me that it was for an older version of Joomla! Everything on the download page seemed to indicate it worked with 1.5. The installation error did mention that I just needed to activate the System Legacy plugin and it would work. So I did, and the comment form appeared on all my article pages. This may seem like a step backward, but for extensions like this, which are very useful, if they work well and stay stable in Legacy Mode, a developer may have made the decision to leave well enough alone. The developer will most likely eventually upgrade the extension (especially if Legacy Mode goes away in future versions of Joomla!). Just be sure to sign up for updates or check back on any extensions you use if you do upgrade your site. You should do this regardless of whether your extensions run natively or in Legacy Mode.

The advantage of AJAX in a comment form is that a user isn’t distracted and comments post smoothly and right away (a bit of instant gratification for the user, even if you never “confirm” the post and it never gets actually published for other viewers). This extension outputs tables, but for the ease of handling robust comments and having a great admin area to manage them, I’ll make do. The following screenshot shows the Joomla! comment component appearing in an article page:

As you can see in my previous image, I have some strong styles that are trying to override the component’s styles. A closer look at the output HTML will give me some class names and objects that I can target with CSS. The administration panel’s Component | Joomla! Comment | Other Component settings page also allows quite a few customization options. The Layout tab also offers several included style sheets to select from as well as the option to copy the CSS sheet out to my template’s directory (the component will do this automatically). This way, I can amend it with my own specific CSS, giving my comment form a better fit with my template’s design.

Installing the core design Ajax Pagebreak plugin

If your site has long articles that get broken down regularly in to three or more pages, Pagebreak is a nice plugin that uses Ajax to smoothly load the next page. It’s a useful feature that will also leave your site users with a little “oh wow” expression.

http://www.greatJoomla.com/news/plugins/demo-core-design-ajaxpagebreak-plugin.html

After successfully installing this plugin, I headed over to the Extensions | Plugin Manager and activated it.

I then beefed out an article (with Lorem Ipsum) and added page breaks to it on the Home Page. It’s hard to see in a screenshot, but it appears below the Prev and Next links without a full browser redraw. I’ve set my site up with SEO-friendly URLs, and this plugin does amend the URLs with a string; that is, http://yoururl.com/1.5dev/menu-item-4?start=1. I’m not sure how this will really affect the SEO “friendliness” value of my URL, but it does give me a specific URL to give to people if I want to send them to a targeted page, which is very good for accessibility. One thing to note, the first page of the article is the original URL; that is, http://yoururl.com/1.5dev/menu-item-4. The second page then appends ?start=1, the third page becomes ?start=2, and so on. Just be aware that when sending links out to people, it is always best to pull the URL directly from the site so that you know it’s correct!

Installing the AJAX RSS Reader Version 3 with Draggable Divs module

RSS feeds are a great way to bring together a wide variety of content as well as bring all your or your organization’s “social network happenings” to one place in your own site. I like to use RSS feeds to get people interested in knowing what an organization is doing (or tweeting), or reading, and so on. Having links and lists of what’s currently going on can compel users to link to you, join your group, follow you, and become a friend, a fan, or whatever.

This AJAX powered module has the extra feature of being draggable and somewhat editable. This is a nice way to draw a user in to the feeds and let them play with them and arrange the information to their taste. Sometimes, sorting and reorganizing makes you see connections and possibilities that you didn’t see before. The next image may seem confusing, but it’s a screenshot of the top div box being dragged and dropped: http://extensions.Joomla!.org/extensions/394/details

AJAX: It’s not just for your site’s users

I’ve already mentioned, when applied properly, how AJAX can aid in interface usability. Joomla! attempts to take advantage of this within its Administration panel by enhancing it with relevant information and compressing multiple page forms into one single screen area. Here’s a quick look at how Joomla! already uses AJAX to enhance its Administration panel forms:

The following image shows how the image uploader uses a “lightbox” div layer effect so that you can keep track of where you are in the content editor.

In the next image, you can see how Joomla! helps keep the administration area cleared up by using smooth-sliding accordion panels. This helps you see everything on one page and have access to just what you need, when you need it.