Using POST method in XMLHTTPRequest(Ajax)

Usually only the GET method is used while creating Ajax apps. But there are several occasions when POST is necessary when creating a ajax request. This could be for several reasons. For example, POST request are considered more secure than GET request as creating a POST request is relatively harder than creating a GET request.

Requirements

• Create a XMLHTTPRequest Object that uses the POST method.
• See if the arguments passed to it appear in the '$_POST' array in PHP.

Code

XMLHTTPRequest Object

For the sake of simplicity, we are going to create the XMLHTTPRequest object using the Firefox supported ' XMLHttpRequest()' function. I believe that you know the proper way of creating a cross-browser XMLHttpRequest object. If not, learn that first.

var http = new XMLHttpRequest();

Using GET method

Now we open a connection using the GET method.

var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("GET", url+"?"+params, true);
http.onreadystatechange = function() {//Call a function when the state changes.
 if(http.readyState == 4 && http.status == 200) {
  alert(http.responseText);
 }
}
http.send(null);

I really hope that this much is clear for you - I am assuming that you know a bit of Ajax coding. If you don't, please read a ajax tutorial that explains these parts before continuing.

POST method

We are going to make some modifications so POST method will be used when sending the request...

var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
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", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.
 if(http.readyState == 4 && http.status == 200) {
  alert(http.responseText);
 }
}
http.send(params);

The first change(and the most obvious one) is that I changed the first argument of the open function from GET to POST. Also notice the difference in the second argument - in the GET method, we send the parameters along with the url separated by a '?' character...

http.open("GET",url+"?"+params, true);

But in the POST method we will use just the url as the second argument. We will send the parameters later.

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

Some http headers must be set along with any POST request. So we set them in these lines...

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

With the above lines we are basically saying that the data send is in the format of a form submission. We also give the length of the parameters we are sending.

http.onreadystatechange = function() {//Call a function when the state changes.
 if(http.readyState == 4 && http.status == 200) {
  alert(http.responseText);
 }
}

We set a handler for the 'ready state' change event. This is the same handler we used for the GET method. You can use the http.responseText here - insert into a div using innerHTML(AHAH), eval it(JSON) or anything else.

http.send(params);

Finally, we send the parameters with the request. The given url is loaded only after this line is called. In the GET method, the parameter will be a null value. But in the POST method, the data to be send will be send as the argument of the send function. The params variable was declared in the second line as "lorem=ipsum&name=binny" - so we send two parameters - 'lorem' and 'name' with the values 'ipsum' and 'binny' respectively.
That's it. If you wish to see the working of this script, I have set up a demo page for Ajax using post.

Reference: http://www.openjs.com/articles/ajax_xmlhttp_using_post.php

Another Method
Using Ajax to send "POST" requests is very similar to that for "GET" requests, with a couple of differences. Traditionally "POST" is used when the information you're sending exceeds a certain size
First, I'm bringing back our generic function for creating an Ajax object instance:

function ajaxRequest(){
 var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
 if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
  for (var i=0; i    try{
    return new ActiveXObject(activexmodes[i])
   }
   catch(e){
    //suppress error
   }
  }
 }
 else if (window.XMLHttpRequest) // if Mozilla, Safari etc
  return new XMLHttpRequest()
 else
  return false
}

//Sample call:
//var myajaxrequest=new ajaxRequest()

No changes have been made to this function.

Ajax POST request

Note Ajax POST ang GET methods

var mypostrequest=new ajaxRequest()
mypostrequest.onreadystatechange=function(){
 if (mypostrequest.readyState==4){
  if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){
   document.getElementById("result").innerHTML=mypostrequest.responseText
  }
  else{
   alert("An error has occured making the request")
  }
 }
}
var namevalue=encodeURIComponent(document.getElementById("name").value)
var agevalue=encodeURIComponent(document.getElementById("age").value)
var parameters="name="+namevalue+"&age="+agevalue
mypostrequest.open("POST", "basicform.php", true)
mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
mypostrequest.send(parameters)

An Ajax POST request has the following pattern (the order is important):

• An "onreadystatechange" event handler that's set to a function reference that will fire during each stage of the Ajax request. Use the Ajax request object's "readyState" and  "status" properties to determine when the request is complete before handling the returned data.
• Call "ajaxobject.open()" with 3 parameters defined- the first one should always be "POST", the second one the URL (aka form "ACTION") of the request without any parameters, and finally, a 3rd parameter set to true. Notice the use of encodeURIComponent() to encode any special characters within the parameter values.
• Call setRequestHeader() and set its content type to "application/x-www-form-urlencoded". This is needed for any POST request made via Ajax.
• Finally, call ajaxobject.send(),passing in the parameters that will be sent (without the "?" prefix).

Note that we're expecting the returned result in this example to be plain text/html. If the returned result is XML data instead, the method overrideMimeType('text/xml') should be called (more on this on the page "Retrieving an XML document using Ajax").