Client Side Include DEMO - Using JavaScript / XMLHTTP

This page demonstrates how to use JavaScript to dynamically include HTML files (on the client-side) with an xmlhttp object.

STEP 1: Include the Function

The function below does all the work. Simply include it and then call it as specified in step 2 below.

function include(xUrl,xId) {

  var xmlhttp = false;

  /*@cc_on @*/

  /*@if (@_jscript_version >= 5)

  // JScript gives us Conditional compilation, we can cope with old IE versions.
  // and security blocked creation of the objects.

  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
   }

  /*@end @*/

  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }

  xmlhttp.open("GET", xUrl,true);
  xmlhttp.onreadystatechange=function() {

          if (xmlhttp.readyState==4) {
                document.getElementById(xId).innerHTML = xmlhttp.responseText;
          }
  }
  xmlhttp.send(null)

}

STEP 2: Call the Function

Call the function like so:

<div id='xhead'></div>
<script type="text/javascript">
include('header.html', "xhead");
</script>

The include() script will make an HTTP GET request, download the content in "header.html", and then insert it into the specified div tag "xhead".