AJAX stands for Asynchronous Javascript And XML, which has become a bit of a misnomer.  The term is generally used to refer to the technique of loading some content after the main page is loaded, using Javascript calls to fetch the content, and DHTML manipulations to update the DOM.  This technique has a few benefits:

1. smoother refresh, since no page reset/refresh is required
2. faster, since only a small amount of content is fetched
3. allows you to import content that is newer than the original page
   

However, there are also a few drawbacks:

1. requires Javascript to be enabled, and an active internet connection
   
2. the URL no longer defines the page state, so AJAX screens are hard to bookmark or index in search engines
   

Although AJAX programming is not especially difficult, the fact remains that it is still programming, and may be beyond the reach of many web designers and content editors.  Even for capable web developers, it may not be feasible to rebuild a whole application to work in the AJAX paradigm.

ExSite provides a simple AJAX interface that works with any ExSite plug-in.  The plug-in does not have to be written with an understanding of AJAX.  ExSite manages the AJAX protocol on behalf of the plug-in, which means that every plug-in is automatically AJAX-capable.  That is to say, an ExSite plug-in will work as a conventional web application or an AJAX plug-in with no extra effort on behalf of the programmer.

How to run a plug-in in AJAX mode

Plug-ins are invoked using a specially-formatted HTML tag that looks like this:

<!--&MyPlugin(parameters)-->

where "MyPlugin" is the name of the plug-in being invoked, and "parameters" is an optional parameter string that gets passed to the plug-in to request particular types of output.

The above syntax invokes the plug-in in conventional mode;  the plug-in content is fetched at the time the page is built, and inlined into the HTML that is returned to the client browser.  If the plug-in generates any self-referential links, those will regenerate the entire page from scratch.

To invoke the plug-in in AJAX mode, simply add an extra ampersand to the above tag:

<!--&&MyPlugin(parameters)-->

Now the plug-in runs in a different manner altogether.  The plug-in is not actually invoked at all when the page is built.  Instead, we insert some basic Javascript to invoke the plug-in as part of a separate web request.  This Javascript will insert exactly the same content you see in the previous method, so for the end user there is no difference in the final result (assuming they have Javascript running and a working internet connection).  However, because the previous method generated self-referential links that regenerate the whole page, you will jump out of AJAX mode if you follow any of those links.

To have all of the plug-in links be AJAX-enabled so that you stay in AJAX mode as you click your way through the plug-in data, add one more ampersand to the above tag:

<!--&&&MyPlugin(parameters)-->

Now, all of the self-referential links are modified to be AJAX-friendly.  As long as you stay within your plug-in's links, your main page is never refreshed, and you may experience a faster, smoother interface to the plug-in.

Which Plug-in Method Should I Use?

Use full-AJAX (triple-ampersand) when:

• you want smoother updates when following links within a plug-in.
• you want to delay loading content until it has been specifically requested by the viewer.
• you want to update the plug-in content with information that was just provided by the user, without reloading the entire page.
  

Use half-AJAX (double-ampersand) when:

• you want to embed a dynamic application into a static (published) page, to display current data on a page that may have been published days or weeks before.
  

Use non-AJAX (single-ampersand) when:

• Your viewers may not have access to Javascript-enabled browsers.
• You want the page state to be searchable or bookmarkable.

Examples

The Calendar plug-in allows the viewer to browse through various month views and check out the events scheduled in each month.  Many sites desire to include a "preview" of upcoming events in a sidebar or other secondary content area on published pages (especially the home page, index.html).  This can be a problem if those pages are published infrequently, since the preview will become stale.  Half-AJAX solves this problem by generating the preview dynamically and inserting it into the older published page:

<!--&&Calendar(upcoming)-->

The SlideShow plug-in allows the viewer to page through the various images in an album/library.  Each click to the next image redraws the entire page, which is both slow and jerky.  You can get a smoother slideshow effect by running in full-AJAX mode, so that the main page is unaffected, and only the slideshow itself is updated:

<!--&&&SlideShow()-->

Note that the slideshow will be smoothest if the images are all of the same or similar dimensions.  Widely-differing image sizes may cause the page itself to reflow as each new image is inserted.

Best Practices

Although the plug-in programmer does not have to go to special effort to support AJAX, you still must follow some standard practices to ensure that your plug-in will behave as ExSite expects:

• Use ExSite::BaseDCD::link() to generate self-referential links
• Do not attempt to manipulate the page structure or template within your plug-in.
  
• Keep AJAX content confined to a single region of the page, otherwise ExSite does not know which block of content to update.  Similarly, avoid placing the same plug-in on the same page twice in AJAX mode.
  
• Avoid use of DIVs that have an ID equal to the plug-in module name.  ExSite creates such a DIV as a target for AJAX updates.