Hopefully you have read Part 1 & 2 of this series on AJAX, so you should have a good understanding of how AJAX works. Now we will use a slightly different approach to doing the Asynchronous data send/receive with AJAX; we will use the POST method instead of the GET method!
The advantage of this is primarily security, however you often can send larger amounts of data with the POST method as well (but that is dependant on your server configuration rather it be Apache/PHP, Microsoft/IIS, or Java/J2EE, etc). The primary advantage of POST is again, the security of the communication, because often log files on the web server will log the AJAX GET request data because that data is part of a URL in the request. This does not occur with the AJAX POST request.
AJAX / Post Example
The following JavaScript/HTML example is similar to the Get AJAX method, but you must set some header information before you actually do the AJAX send, and you have to encode your data to send slightly different from the Get method. Additonally, the data to send is not part of the URL of course. This listing will be explained next.
Listing A: JavaScript/HTML page using AJAX / POST request
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Advanced AJAX Part 1</title>
<script language="javascript" type="text/javascript">
function doHttpRequest( ) { // This function does the AJAX request
// Set our destination PHP page "ajaxpost.php"
http.open("POST", "http://www.jdcampbell.com/ajax/ajaxpost.php", true);
http.onreadystatechange = getHttpRes;
// Make our POST parameters string
var params = "address=" + encodeURI(document.getElementById("address").value)+
"&city=" + encodeURI(document.getElementById("city").value)+
"&state=" + encodeURI(document.getElementById("state").value)+
"&zip=" + encodeURI(document.getElementById("zip").value);
// Set our POST header correctly
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
// Send the parms data
http.send(params);
}
function getHttpRes( ) {
if (http.readyState == 4 && http.status == 200) {
res = http.responseText; // These following lines get the response and update the page
document.getElementById('txt1').value = res;
document.getElementById('cell1').innerHTML = res;
document.getElementById('cell2').innerHTML = res;
}
}
function getXHTTP( ) {
var xhttp;
try { // The following "try" blocks get the XMLHTTP object for various browsers
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
// This block handles Mozilla/Firefox browsers...
try {
xhttp = new XMLHttpRequest();
} catch (e3) {
xhttp = false;
}
}
}
return xhttp; // Return the XMLHTTP object
}
var http = getXHTTP(); // This executes when the page first loads.
</script>
</head>
<body>
Enter Address:<input type="text" size="45" name="address" id="address" /><br>
City:<input type="text" size="25" name="city" id="city" />
State:<input type="text" size="5" name="state" id="state" />
Zip:<input type="text" size="5" name="zip" id="zip" /> <br>
Fill in above fields and press this...<input type="button" value="AJAX Post" name="btn"
onClick="doHttpRequest();" >
<br><br><br>
Return data...
<textarea id="txt1" name="txt1" rows="3" cols="30" style="width: 100%">empty</textarea>
<br>
<table width=100% border=1 cellspacing=0>
<tr><td id="cell1">cell1</td><td id="cell2">cell2</td><tr>
</table>
</body>
</html>
