AJAX Post method example using javascript & jQuery

Usually AJAX requests are send through GET method. This is because there are few parameters that one send while sending a request through AJAX and also it is relatively easy to create and send a GET method request.
Following code is used generally to create a GET request through AJAX.

function getXMLHttpRequestObject()
{
  var xmlhttp;
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
  xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      xmlhttp = false;
    }
  }
  return xmlhttp;
}
var http = new getXMLHttpRequestObject();

var url = "FetchSomeData.jsp";
var parameters = "name=krishna&age=16";
http.open("GET", url+"?"+parameters, true);
http.onreadystatechange = function() { //Handler function for call back on state change.
	if(http.readyState == 4) {
		alert(http.responseText);
	}
}
http.send(null);

Now the same code can be re-written in order to send the request by POST method. Check the following code:

var url = "FetchSomeData.jsp";
var parameters = "name=krishna&age=16";
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters .length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Handler function for call back on state change.
	if(http.readyState == 4) {
		alert(http.responseText);
	}
}
http.send(parameters);

Now compare the two code snippets. The first change that you will see is in http.open() method.

//GET method
http.open("GET", url+"?"+parameters, true);

//POST method
http.open("POST", url, true);

In GET method, the parameters are appended with the URL and is passed in open() method, whereas in POST method the parameters are not passed with URL. The header is modified and the length of the parameter is set in it.

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters .length);
http.setRequestHeader("Connection", "close");

Hence in POST method, the parameters are send more as a form submission.

POST method using jQuery

Using jQuery one can easily send the request using POST method. See the following syntax.

$.post("GetData.jsp",
  { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  }
);

Here the first argument to is the script name that one needs to call. Second argument is the parameters that one needs to pass in JSON format. And finally the handler function that will be called once the request has been completed.