Categories:

Including the contents of an external page using Ajax

You may have heard of a little something called Ajax these days, even if you're still not quite sure what it is. Instead of focusing on what it is, lets just focus on what's possible using Ajax, specifically, how to include the contents of another document onto the current using it. Ok, ok, I relent. Ajax stands for Asynchronous JavaScript and XML, and basically is a fancy term for describing using JavaScript to dynamically fetch and send data to the server.

Creating an Ajax processing function

Before creating any sort of Ajax powered scripts, we need a function that handles the boring stuff- accessing the relevant JavaScript object in for asynchronous transfers. Here it is:

function HttpRequest(url){
var pageRequest = false //variable to hold ajax object
/*@cc_on
   @if (@_jscript_version >= 5)
      try {
      pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
      }
      catch (e){
         try {
         pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
         }
         catch (e2){
         pageRequest = false
         }
      }
   @end
@*/

if (!pageRequest && typeof XMLHttpRequest != 'undefined')
   pageRequest = new XMLHttpRequest()
return pageRequest
}

I won't go into detail the technical aspect of this function, though "pageRequest" now contains a cross browser Ajax object that enables asynchronous requests. Since IE and Firefox differs in their implementation of Ajax, two different objects are used. For more info, please see here. The "url" parameter is left unused at this point.

Including the contents of an external page using Ajax

To include an external page using Ajax, we just need to extend the Ajax function by a few lines to fetch any external page based on the "url" passed into the function.

function HttpRequest(url){
var pageRequest = false //variable to hold ajax object
/*@cc_on
   @if (@_jscript_version >= 5)
      try {
      pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
      }
      catch (e){
         try {
         pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
         }
         catch (e2){
         pageRequest = false
         }
      }
   @end
@*/

if (!pageRequest && typeof XMLHttpRequest != 'undefined')
   pageRequest = new XMLHttpRequest()

if (pageRequest){ //if pageRequest is not false
   pageRequest.open('GET', url, false) //get page synchronously 
   pageRequest.send(null)
   embedpage(pageRequest)
   }
}

function embedpage(request){
//if viewing page offline or the document was successfully retrieved online (status code=2000)
if (window.location.href.indexOf("http")==-1 || request.status==200)
   document.write(request.responseText)
}

HttpRequest("external.htm") //include "external.htm" onto current page

The code in green is the new addition. Function embedpage() is a callback function that is fired each time the state of the asynchronous request changes. When the state of this request is successful (status code=200), or you're running the function offline in which the request should always be successful, we write out the contents returned by the "responseText" property of the Ajax object, or the contents of the external page.

Example:

But wait, there's a catch

Including an external page using Ajax is seamless, and even works if the external page contains items like CSS and JavaScript. There is a big catch, however. For security reasons, you can only include an external page that's on the same domain as the page including it. In fact, the two domains must match exactly, down to the "www" (or lack thereof) part. Due to this, if you're specifying an absolute URL to the external page on your domain using the above function, it's best to dynamically construct the domain portion of the URL so it matches exactly that of the including page. Something like:

var mydomain=http://"+window.location.hostname
HttpRequest(mydomain+"/dir/external.htm") //include "external.htm" onto current page

This ensures that regardless of how the including page is being accessed- with or without the "www" prefix, the external page will be included successfully.

Two examples on the web

Two good scripts that use Ajax to dynamically include an external page are:

Enjoy!