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:
- smoother refresh, since no page reset/refresh is required
- faster, since only a small amount of content is fetched
- allows you to import content that is newer than the original page
However, there are also a few drawbacks:
- requires Javascript to be enabled, and an active internet connection
- 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.