This course will become read-only in the near future. Tell us at if that is a problem.

Sample Code for Learning [Aug. 17, 2011, 10:18 a.m.]

For anyone that has some tested code that would work as a good example to practice with, please drop it here. Anyone that has a better idea for posting working samples of code, please feel free to drop your thoughts here.

If there's a link to examples, post that as well!

Babysteps To an AJAX REQUEST
the following example uses an initial page of index.html and sends a request to another page titled whatever you'd like. Feel free to replace our example of 'request.html' with your page name

<!doctype html>
<meta charset="UTF-8" />
<title>Ajax Application</title>

1. User clicks the link "Make A Request" in the browser
2. The Event Handler calls the makeRequest() function
3. The request is made and then (onreadystatechange) execution is passed to alertContents();
4. If the http response codes are correct for the protocol request the action is executed
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
(function() {
 //create instance of http request
  var httpRequest;
  //create the trigger for the response
  document.getElementById("ajaxButton").onclick = function() { makeRequest('request.html'); };
   function makeRequest(url) {
    //create a cross-browser instance(i.e. object) of the required class
  if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // if IE
    try {httpRequest = new ActiveXObject("Msxml2.XMLHTTP");}
    catch (e) {
        try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP");} 
        catch (e) {}//end catch (e)
      }//end catch (e)
}//end elseif
    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
}//end if !http request
    //process the server response
    httpRequest.onreadystatechange = alertContents;
    //make the formal request and set the parameters
    //you must set the request header below this line for post methods as opposed to the get method
    //httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //call for data that you want to send to the server'GET', url);
  }//end makeRequest(url) function
  function alertContents() {
    //check state of the request
    //If the state has the value of 4, 
    //that means that the full server 
    //response has been received and 
    //it's OK for you to continue processing it
    if (httpRequest.readyState === 4) {
    The full list of the readyState values is as follows:
    0 (uninitialized)
    1 (loading)
    2 (loaded)
    3 (interactive)
    4 (complete)
      if (httpRequest.status === 200) {
    }else {
      alert('There was a problem with the request.');
    }//end else
  }//end initial if
}//end alertContents() function
} //closing bracket
)();//end function