Copy and Paste Ajax Engine

This article provides the source code of an Ajax engine you can use over and over, on many different web pages. And shows you how to use it.

The focus is to make Ajax available even to those who have learned no programming skills.

Ajax technology has been with us for years. The original excitement and flurry of articles and opinions about it and how to use it are pretty much over.

It's the perfect time for presenting a solid Ajax engine built upon the work gone before.

In essence, Ajax is JavaScript written to retrieve additional content from the server without disturbing the web page currently in the browser. Usually, the retrieved content is also published on the web page itself — without reloading the page.

You will find several working examples.

The code that is the Ajax engine can be imported into a web page from an external file. Or, it can be pasted directly into the web page where it will be used.

In a moment, I'll show you how to us the Ajax engine. But first, here is the source code of the engine itself:

<script type="text/javascript" language="javascript">
function GetContent(url,id) {
var httpRequest;
if (window.XMLHttpRequest) {
   try { httpRequest = new XMLHttpRequest(); }
   catch(e) {}
   } 
else if (window.ActiveXObject) {
   try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch(e) {
      try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } 
      catch(e) {}
      }
   }
if(! httpRequest) {
   alert('\n\nSorry, unable to open a connection to the server.');
   return false;
   }
httpRequest.onreadystatechange = function() { PublishContent(httpRequest,id); };
httpRequest.open('GET',url,true);
httpRequest.send('');
}

function PublishContent(content,id) {
try {
   if (content.readyState == 4) {
      if(content.status == 200) { document.getElementById(id).innerHTML=content.responseText; }
      else { alert('\n\nContent request error, status code:\n'+content.status+' '+content.statusText); }
      }
   }
catch(error) { alert('Error: '+error.name+' -- '+error.message); }
}
</script>

No customization is required. The engine is good to go. Just paste it where it will be used.

If the Ajax engine will be imported into a web page from an external file, then do not include the script tags in that external file. The JavaScript to import the file already has script tags.

Here is example code to import an external JavaScript file. It assumes the external file is saved as ajax.js in the document root.

<script type="text/javascript" src="/ajax.js">
</script>

Using the Ajax Engine

The web page must have the Ajax engine code. As mentioned earlier, that can be done by pasting the code into the web page or by importing the code from an external file.

All that's left to do is to tell the Ajax engine what content to retrieve and where to publish it.

A div tag (or any other HTML tag that can contain web page content) is provided as the place to put the retrieved content. The tag must have an id assigned that is unique on the web page. Example:

<div 
   id="MyUniqueID"
   style="border-style:dashed; padding:15px;">
Optional content when page is first loaded.
</div>

The above is an HTML div tag styled with a border. It has an id value of "MyUniqueID". The content in the example will be replaced with the content the Ajax engine retrieves.

Here is one way to retrieve content with the Ajax engine, a clickable link:

<a href="javascript:GetContent('/','MyUniqueID')">
Get site default page.
</a>

You'll notice two parameters for the GetContent() function.

The first parameter is the URL of the web page or script from which to get the content (in this case, the default web page at the document root). The second is the unique ID of the div tag where the retrieved content is to be published.

Go ahead. Try it.

Paste the Ajax engine into your web page source code, along with the div tag and the link. Upload the web page to your server. Type the URL of the web page into your browser.

Now, click your link.

The content of your domain's default web page (probably file index.html) will be published in the container the div tag provides.

Without a page reload.

It's akin to magic.

Let me give you one more example. After that, I'll talk about URL restrictions.

This second example automatically retrieves content. However, it generally does not slow the rest of the page load.

<script type="text/javascript">
setTimeout("GetContent('/','MyUniqueID')",3000);
</script>

Three seconds after the above JavaScript loads into the browser, the Ajax engine starts up to retrieve the content and publish it into the div container.

The reason for building in the delay is to ensure the Ajax engine code is fully loaded into the web page before it is asked to retrieve content. (Were the engine pasted into the source code of the web page somewhere above the example JavaScript, instead of imported from an external file, no delay would be needed.)

Quick Implementation

For a quick implementation, copy the Ajax engine code and paste it into your web page. The engine is now ready to be used.

The place where the Ajax engine shall publish to must be an HTML tag that can contain content, and it must have a unique id value. That is the container.

Examples of HTML tags that can contain content are div, span, h1, p, and td.

The id's value needs to begin with a letter. The rest of the id can be any combination of letters and numbers. But no spaces or punctuation characters or symbols.

Now, you're ready to tell the Ajax engine which URL to retrieve content from and the id of the container where the content shall be published.

Earlier in the article are two examples, a clickable link to tell the engine to retrieve content and an automatic retrieval.

Use either. Or both. A web page can have more than one container for the Ajax engine to publish into, so long as each container has a unique id.

Will Bontrager