This article is intended to explain the simplest way to make XMLHttpRequest work within Etomite. I have been making use of XMLHttpRequests more and more often recently and while I am not fond of any of the many AJAX libraries I have tested, and I've tested quite a few, I do like being able to perform real-time data validations and check database tables for duplicate records during form data entry. In order to accomplish these tasks with a bare minimum of AJAX overhead I have been writing my own javascripts as needed. As usual, most of my scripts are relatively compact while giving a lot of "bang for the buck". I will be using some of my code in this article to confirm my proof of concept but will not address the integration of third party AJAX libraries at this time. Once the basics are explained I will leave it up to individual developers to integrate these concepts for their own use.

The example presented here will perform an XMLHttpRequest that will pull in another document, complete with snippet and chunk calls, and display it within a DIV tag pair. Several prerequisites must be addressed before going further, however.

First and foremost, we need to have access to a Javascript/AJAX library that contains our XMLHttpRequest function. My library contains several such functions with each one performing slightly different actions once the external data has been retrieved. For this example we will be using my putXMLHttpRequest function. As the name implies, it "puts" the results in a specific location which we define in the function call. More on this later.

Second, we need to have an Etomite page template which will be used by the Etomite parser when an XMLHttpRequest is made. My template is named XMLHttpRequest. The only content that this template contains is a [ *content* ] tag and a call to the [ !DontLogPageHit! ] snippet which tells the parser that we don't need these page hits logged.

Third, we need to have our target document which contains our content and/or snippet and/or chunk calls. This document will use the template from above, XMLHttpRequest. This document must be published but should not be flagged as cacheable, searchable, or displayed in menus. The document can be set as cacheable if it only contains textual content, however. With this being our example document we will be calling in another document named ajax_demo_one.html which contains a sparse amount of actual content. We have called in this document by using the chunk call listed below. We are using a chunk here because Javascript code should never be written directly into a document. We could just as easily write a snippet that could perform many different actions such as AJAX menu rendering, for example.

What appears below the line is the rendered content returned by our putXMLHttpRequest call listed above. I have added a chunk call below the line and the chunk makes the magic happen. That's about all there is to it. No real smoke and mirrors, just a few resources combined to get the job done. With a little creativity it would be possible to make a semi-generic snippet that can call any number of AJAX type routines, or you could write several task-specific snippets that might also include code stored in chunks. My preference is to store all of the Javascript code blocks as chunks and then use parseChunk to pass any snippet parameters into the Javacript itself. I'll leave that idea as a seed for your imagination. If the need arises I might be inclined to write a more advanced tutorial that includes several of these concepts.

THE END