AJAX POST-It Notes

The XMLHTTPRequest object has a little-used, but still useful property: The ability to post data instead of passing data completely in the URI as a GET. The post method comes in handy when you need to process large chunks of data, greater than the size limit on get requests, or when you need greater security between the client and server. You do not, after all, want to pass a social security number or a credit card number and have that information recorded in your web server log files.

The good news is that setting up a POST method takes only a few more lines of code than a GET method. We'll start with three variables we'd like to pass back to the server.

var age=37;
var name='John Doe';
var job='Dog Catcher';

The method for preparing the data for transfer is the same as for setting up a GET save we do not include the http:// and website (www.somedomain.com) at the beginning of the data. We still must escape the data and seperate the data fields with ampersands (&).

   var passData = 'age='+escape(age)+'&name='+escape(name)+'&job='+escape(job);

If you prefix passData with http://www.somedomain.com/somecgi.php? you can easily send passData as a get. So there's no magic going on in formatting the data. The magic is in how we prepare XMLHTTPRequest in the next few lines of code. First we have to override the default headers XMLHTTPRequest normally uses.

AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

This overrides the default header sent to the server and lets the server know we're going to be sending the data as a post. Many other POST tutorials contain two additional header lines AJAX.setRequestHeader("Content-length", passData.length); and AJAX.setRequestHeader("Connection", "close");. The first request header encodes the length in bytes of the post, the second header says that when the server has recieved x bytes (as defined in content-length) it should CLOSE the connection. Now this is just fine if you don't want any data back from the server, but if you need to do a little processing & maybe pass back an acknowledgment then you should not add connection close to your headers, and content-length is optional if you are not forcing the connection to close via a header.

All in all, I recommend you avoid the content-length and connection headers all together unless you have specific reasons to use them (and there are very good reasons to use them on the server side, something I cover in http://www.hunlock.com/blogs/AJAX_from_the_darkside which details how to keep your server side program processing data even after it's closed the connection with the browser).

The next step is to send the data.

AJAX.open("POST", "http://www.somedomain.com/somecgi.php", true);
AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
AJAX.onreadystatechange = function() {                      
   if (AJAX.readyState==4 || AJAX.readyState=="complete") { 
      callback(AJAX.responseText, AJAX.status); 
   }                               
}                                  
AJAX.send(passData);

Note that our request header is placed AFTER .open! This is important. Some browsers will throw an exception if you try to set a request header before you actually issue the open command.

The two differences here are that you specify "POST" instead of "GET" in the open request and instead of sending NULL you send passData in the AJAX.send request. Here's the code all together so you can see the big picture.

var age=37;
var name='John Doe';
var job='Dog Catcher';
var passData = 'age='+escape(age)+'&name='+escape(name)+'&job='+escape(job);
var AJAX = null;
if (window.XMLHttpRequest) {
   AJAX=new XMLHttpRequest();
} else {
   AJAX=new ActiveXObject("Microsoft.XMLHTTP");
}
if (AJAX==null) {
   alert("Your browser doesn't support AJAX.");						
   return false
} else {
   AJAX.open("POST", "http://www.somedomain.com/somecgi.php", true);
   AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   AJAX.onreadystatechange = function() {                      
      if (AJAX.readyState==4 || AJAX.readyState=="complete") { 
         callback(AJAX.responseText, AJAX.status); 
      }                               
   }                                  
   AJAX.send(passData);
}

Using the POST method you can pass a great deal more data to the server than you can with a GET method. However it's not possible to handle files with this method. The transfer of files from client to server is a major undertaking that it will require it's own article at some point in the future.