Slide 13.2: An AJAX example

An AJAX Example

An AJAX Example
The text below will be replaced by the file AJAX_info.txt by using AJAX.

Let AJAX change this text.

The AJAX Example Explained
The AJAX application above contains one div section and one button. The div section will be used to display information returned from a server. The button calls a function named loadXMLDoc, if it is clicked:

<html>
 <body>
  <div id="myDiv"><h2>Let AJAX change this text</h2></div>
  <button type="button" onClick="loadXMLDoc( )">Change Content</button>
 </body>
</html>

Next, add a <script> tag to the page’s head section. The script section contains the loadXMLDoc function:

<script type="text/javascript">
  function loadXMLDoc( ) {
    var xmlhttp;
    if ( window.XMLHttpRequest ) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest( );
    }
    else {
      // code for IE6, IE5
      xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );
    }
    xmlhttp.onreadystatechange = function( ) {
      if ( ( xmlhttp.readyState == 4 ) && 
           ( xmlhttp.status     == 200 ) ) {
        document.getElementById("myDiv").innerHTML =
          xmlhttp.responseText;
      }
    }
    xmlhttp.open( "GET", "AJAX_info.txt", true );
    xmlhttp.send( );
  }
</script>