Categories:

Performing POST requests using Ajax

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<activexmodes.length; 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

The following is the same request we made on our previous page using "GET", but this time, done using Ajax 'POST" instead. Note the differences in red:

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").