AJAX XMLHttpRequest POST

Question

I'm trying to write an XMLHttpRequest using the POST method. I have managed to use XMLHttpRequest in the past using the GET method but am struggling with POST.

Here's my code:

var xmlhttp = null;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

var url = "http://www.mysite.com/script.php";
var params = "var=1";
xmlhttp.open("POST", url, true);
xmlhttp.send(params);

It basically calls a PHP script which then adds some information to a database.

Answer 1

You forgot to explicitly set to Content-type header, which is necessary when doing POST requests.

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

Also, do not forget to use encodeURIComponent to properly encode your parameters, e.g.:

var params = "var=" + encodeURIComponent("1");

(in this particular example, it's not necessary, but when using special characters like + things will go horribly wrong if you don't encode the parameter text).

Update – you should also replace all instances of %20 with +, like

var params = params.replace(/%20/g, '+');