Passing POST parameters with AJAX
AJAX can be used not only with webservices but with HTTP applications as well. So instead invoking a webservice, you’ll make an HTTP request. This comes veryhandy when using legacy application or when your usage of AJAX is very limited and webservices are simply too much.
What I wanted to share is a small trick on how to pass POST parameters with AJAX. The entire exercise will consist of defining a function called doPost that will receive as parameters the url and a two-dimensional array of parameters
function doPost(url, parameters) {
// create the AJAX object
var xmlHttp = undefined;
if (window.ActiveXObject){
try {
xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
} catch (othermicrosoft){
try {
xmlHttp = new ActiveXObject(
"Microsoft.XMLHTTP");
} catch (failed) {}
}
}
if (xmlHttp == undefined && window.XMLHttpRequest) {
// If IE7, Mozilla, Safari, etc: Use native object
xmlHttp = new XMLHttpRequest();
}
if (xmlHttp != undefined) {
// open the connections
xmlHttp.open("POST", url, true);
// callback handler
xmlHttp.onreadystatechange = function() {
// test if the response was totally sent
if (xmlHttp.readyState == 4
&& xmlHttp.status == 200) {
// so far so good
// do something useful with the response
}
}
// create the parameter string
// iterate the parameters array
var parameterString;
for (var i = 0; i < n; i++) {
parameterString += (i > 0 ? "&" : "")
+ parameters[i][0] + "="
+ encodeURI(parameters[i][1]);
}
// set the necessary request headers
xmlHttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length",
parameterString.length);
xmlHttp.setRequestHeader("Connection", "close");
// send request
xmlHttp.send(parameterString);
}
}
The parameters string can be constructed in a different way or even the parameters can be passed to the method in a different format. In the above case the parameters are passed as a two-dimensional array, everyline representing a parameter, again an array containing name (first element) and value (second element).
A call to the above function would look like this:
doPost("doIt.jsp", new Array(new Array("action", "action1"), new Array("id", "123")));
adrian's blog 
Nice One!!!
Very usefull example. Thank you.
I think the correct javascript array construction from the call example would be doPost(“doIt.jsp”, new Array(new Array(“action”, “action1”), new Array(“id”, “123”)));
You’re right, just a syntax mistake. An array can be initialized with new Array(elem1, elem2, …) or [elem1, elem2, …]. I corrected the post too. Thanks.
Arrays are meant to represent numerically indexed objects.
Use an object if you are to index by string:
doPost(“doIt.jsp”, {action :”action1″, id : “123”});
Then use a for(in) to iterate through the properties and values. Something like this:
var parameterString = ‘?’,
key;
for(key in parameters){
if(parameters.hasOwnProperty(key)){
parameterString += encodeURIComponent(key)+ ‘=’ + encodeURIComponent(parameters[key])+’&’;
}
}
Hello. very useful comment. But I just have one more question. How can I add a parameter if the condition would be something like id in (“1”, “2”, “3”) ?
What exactly do you mean? If you just want to check if a value is contained in an array, this is just simple JavaScript code and it’s done by iterating the array and comparing each element with the given one.
desi vechi de 4 ani de zile, foarte folositor acest post… multumesc mult! am clarificat ceva important aici! 🙂
Great goods from you, man. I’ve understand your stuff previous to and you’re
just extremely excellent. I really like what you have acquired here, certainly like what you are stating and the way in which during which you say it.
You make it enjoyable and you continue to care for to stay it wise.
I can’t wait to learn much more from you. This is really a terrific website.