Introduction


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.

<html>
<head>

<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
      ajaxRequest.open("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
      ajaxRequest.send(null);
    }
  }
//-->
</script>
</head>
<body>

<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>

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

</body>
</html>

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.

Source:

See Also: