AJAX TUTORIAL : Sending a Request to the Server

First of all, you should already know how to create XMLHttpRequest object. If you already know how to create it skip this. To make a new XMLHttpRequest object please follow my this blog content - Creating XMLHttpRequest object

Now that you have your shiny, new XMLHttpRequest object ready for use, the natural next step is to use it to submit a request to the server. This can be done in a number of ways, but the key aspect to remember is that you must validate for a proper response, and you must decide whether to use the GET or POST method to do so. It should be noted that if you are using Ajax to retrieve information from the server, the GET method is likely the way to go. If you are sending information to the server, POST is the best way to handle this. I’ll go into more depth with this later in the book, but for now, note that GET does not serve very well to send information due to its inherent size limitations.
  In order to make a request to the server, you need to confirm a few basic functionality based questions. First off, you need to decide what page (or script) you want to connect to, and then what area to load the page or script into. Consider the following function, which receives as arguments the page (or script) that you want to load and the div (or other object) that you want to load the content into.

function makerequest(serverPage, objID) {

  var obj = document.getElementById(objID);
  xmlhttp.open("GET", serverPage);

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      obj.innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.send(null);
}

Basically, the code here is taking in the HTML element ID and server page. It then attempts to open a connection to the server page using the open() method of the XMLHttpRequest object. If the readyState property returns a 4 (complete) code and the status property returns a 200 (OK) code, then you can load the response from the requested page (or script) into the innerHTML element of the passed-in object after you send the request.
  Basically, what is accomplished here is a means to create a new XMLHttpRequest object and then use it to fire a script or page and load it into the appropriate element on the page. Now you can begin thinking of new and exciting ways to use this extremely simple concept.