Introduction


AJAX can be very confusing due to the mix of technologies involved. I created a set of documented examples, for the previous example 1 see the page before.

Example Code


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

<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(url, Id){
    if(ajaxRequest) {

      // (1) Hardcode the data provider
      ajaxRequest.open("GET", url, true);

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

      // (3) create the event handler
      ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4) {
          if(ajaxRequest.status == 200) {
            ajaxTarget.innerHTML = ajaxRequest.responseText;
          }
          else {
            ajaxTarget.innerHTML = "Error: "+ajaxRequest.status
                                  +" = "+ajaxRequest.statusText;
          }
        }
      }

      // (4) call the send() command to execute
      ajaxRequest.send(null);
    }
  }
//-->
</script>
</head>
<body>

<h1>Ajax Test Example 2</h1>

<p>We are going to add our Ajax-retrieved data to the table below, data content
and destination fields are depending on the Ajax call parameters. The URL for Msg 3
has no object on the server, validating the error handling of our Ajax call function.</p>

<form>
  <table border="1">
  <tr>
  <th>Ajax Call</th><th>Field A</th><th>Ajax Call</th><th>Field B</th>
  </tr><tr>
  <td><input type="button" value="Msg 1 -> Field A" onClick="ajaxCall('ajaxtest1.txt', 'field-a');" /></td>
  <td rowspan="3" id="field-a" width="200px"> </td>
  <td><input type="button" value="Msg 1 -> Field B" onClick="ajaxCall('ajaxtest1.txt', 'field-b');" /></td>
  <td rowspan="3" id="field-b" width="200px"> </td>
  </tr><tr>
  <td><input type="button" value="Msg 2 -> Field A" onClick="ajaxCall('ajaxtest2.txt', 'field-a');" /></td>
  <td><input type="button" value="Msg 2 -> Field B" onClick="ajaxCall('ajaxtest2.txt', 'field-b');" /></td>
  </tr><tr>
  <td><input type="button" value="Msg 3 -> Field A" onClick="ajaxCall('ajaxtest3.txt', 'field-a');" /></td>
  <td><input type="button" value="Msg 3 -> Field B" onClick="ajaxCall('ajaxtest3.txt', 'field-b');" /></td>
  </tr>
  </table>
</form>

</body>
</html>

On the server side, we prepare a file called ajaxtest1.txt and ajaxtest2.txt in the same directory as our Ajax page. The referenced file ajaxtest3.txt is missing on purpose to demonstrate our error handling.

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

# cat ajaxtest2.txt
This line comes from the servers file <font color="red">ajaxtest2.txt</font>,
 and has <b>HTML</b> tags in it.

Live Example Below


Ajax Test Example 2

We are going to add our Ajax-retrieved data to the table below, data content and destination fields are depending on the Ajax call parameters. The URL for Msg 3 has no object on the server, validating the error handling of our Ajax call function.

Ajax CallField AAjax CallField B
   

Coming Up Next


In example 3 on the next page, we add arguments to the Ajax request itself. They need to be processed on the server side to create different response as a result of a users choice. We will replace our text file with a CGI program.

Source:

See Also: