AJAX can be very confusing due to the mix of technologies involved. I created a set of documented examples to walk through a few aspects of the technology with increasing complexity. There is a reason why javascript libraries became a standard, but before we go there we need to know the basics first.

Example Code

The code below is simplified on several aspects:

The combination of HTML, Javascript and function and remote call parameters will raise the complexity soon enough.


<script language="javascript" type="text/javascript">
  // First create an Ajax request, depending on the browser.
  // This is a simple and incomplete demo example, later we
  // use jQuery to take care of cross-browser compatibility.
  var ajaxRequest = null;

  // For Opera 8.0+, Firefox or Safari
  if (window.XMLHttpRequest) {
    ajaxRequest = new XMLHttpRequest();
  // For older Internet Explorer Browsers
  else if (window.ActiveXObject) {
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  // Raise alert for problems
  else {
    alert("Error in page: could not create AJAX request.");

  // The Ajax function is going to:
  // (1) define the data provider (URL),
  // (2) define the update target,
  // (3) the event handler for moving data from provider to target,
  // (4) call the send() command
  function ajaxCall(){
    if(ajaxRequest) {

      // (1) Hardcode the data provider"GET", "ajaxtest1.txt", true);

      // (2) Hardcode the update target
      var ajaxTarget = document.getElementById('update');

      // (3) create the event handler
      ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
          ajaxTarget.innerHTML = ajaxRequest.responseText;

      // (4) call the send() command to execute

<h1>Ajax Test Example 1</h1>

<p>We are going to replace the string below
 with a message received from the server on-demand.</p>

<p id="update">This line exists before making the Ajax call.</p>

  <input type="button" value="Call Ajax" onClick="ajaxCall();" />


On the server side, we prepare a file called ajaxtest1.txt in the same directory as our Ajax page:

# cat ajaxtest1.txt
This line was saved inside the servers file ajaxtest1.txt.

Live Example Below

Ajax Test Example 1

We are going to replace the string below with a message received from the server on-demand.

This line exists before making the Ajax call

Coming Up Next

In example 2 on the next page, we add function arguments to set the data provider and the update target; and we improve the event handler's error detection.


See Also: