AJAX Sending a Request to a Server (Cont.)

GET Requests
Let AJAX change this text.


To send information with the GET method, add the information to the URL: 
   xmlhttp.open( "GET", "Demo_get.php?course=CSCI457", true );
   xmlhttp.send( );
The Demo_get.php uses the variable $_GET["course"] to retrieve the value “CSCI457.”

POST Requests
Let AJAX change this text.


The URL parameter of the open method is an address to a file on a server: 
   xmlhttp.open( "POST", "Demo_post.php", true );
   xmlhttp.setRequestHeader( "Content-type",
     "application/x-www-form-urlencoded" );
   xmlhttp.send( "course=CSCI457" );
Add an HTTP header with setRequestHeader in order to POST data like an HTML form. Specify the data you want to send in the send method. The Demo_post.php uses the variable $_POST["course"] to retrieve the value “CSCI457.”

Method Description
setRequestHeader(header,value)
Adds HTTP headers to the request.
  • header: specifies the header name
  • value: specifies the header value
 

<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( "POST", "Demo_post.php", true );
    xmlhttp.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
    xmlhttp.send( "course=CSCI457" );
  }
</script>