Using The POST Method With Ajax

I have been looking at various ways of creating more interactive web applications that would allow users to retrieve information quicker without having to resort to refreshing entire pages each time they submit a request. The best possible way for me to do this has been to look into Ajax.

Ajax (Asynchronous Javascript and XML) has been around for a while now and it is possible you were not aware of it.  A couple of websites that use Ajax extensively would be Microsoft’s Hotmail (their Live Hotmail allows you to ‘Drag & Drop’ email around your screen) and then the ever so popular social networking site Facebook.

Ajax allows web developers to update the information on their web pages without having to reload or refresh the entire page, which to me can be annoying at times. Now I won’t go into how one would set up a basic Ajax script because there are many tutorials about it all over the web, though I will look at explaining how the POST method is done when submitting an Ajax as opposed to using the GET method. All of the tutorials I have seen about basic Ajax scripts have talked about using the GET method when submitting forms without refreshing the page.

The GET method makes use of attaching the arguments and values of a script via the end of a URL of the script being called.  The POST method allows you to send the variables to the script being called but not having to append it to the end of the URL.

Now I will not go into great detail for setting up an Ajax script but I will mention the slight differences between using the POST method and the GET method of a basic script.

Assuming you already know how to set up your XMLHttpRequest Object needed to perform Ajax scripting a simple function for the GET Method is as follows:

[code]
function sendRequest(mac) {
  //Open PHP script for request using GET method
  http.open('get', 'lookupMAC.php?mac='+mac);
  http.onreadystatechange = handleResponse;
  http.send(null);
}
[/code]

Here you open up the connection to the script you wish to call using the GET method and append your variable arguments to the end of the URL for the script.  You then call the function that will check the output of the called script if it was successful.

Now the POST method when utilizing Ajax for the same script is similar but varies in a couple spots. You pretty much have to tell Javascript that the submitted information is to act like a form being submitted.

[code]
function sendRequest(mac) {
  // set the variables and their values in a string
  var params = 'mac='+mac;
  //call the php script using the POST method
  http.open('post', 'lookupMAC.php', true);
  //Set up the proper header
  
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  http.setRequestHeader("Content-length", params.length);
  http.setRequestHeader("Connection", "close");
  http.onreadystatechange = handleResponse;

  // send params with the script
  http.send(params);
}
[/code]

Here you set the variables and values in a string which will be sent to the script after telling Javascript that it should request the page in the way of submitting a form. For that you need to modify some of the called script’s headers to ensure proper data transmission.

Normally with the GET method you just tell the script to go with no arguments (http.send(null)), but with the POST method you need to specify the arguments when you tell the script to execute (http.send(params)).

That is pretty much it. I know this information might not be useful to everyone, but I have had troubles finding any sort of explanation on how to properly use the POST method when working with Ajax and I hope this might help some people out there who are searching for a decent explanation on how to use the POST method instead of GET when submitting form type submissions from users on their web applications.