JavaScriptでPOST

JavaScriptでGETによるサーバーからのレスポンス受け取りはAjaxで出来るのだが、POSTする方法がいまいち探しても見つからない。

単純にPOSTするだけなら。

Code:JavaScript
document.getElementById(id).method="POST";
document.getElementById(id).submit();

でよいのだがページが移動してしまう。

ページを移動せずPOSTして、レスポンスを受け取る。 §

Code:HTML
<form id="form_id" action="postURL" method="post">
 <input type="text" name="text" />
 <input type="submit" onclick="stringPost();return false" value="送信" />
</form>
Code:JavaScript(オブジェクト生成)
 function XMLRequest(){
  if(this.XMLHttpRequest){ 
   return new XMLHttpRequest();
  }else {
   return new ActiveXObject("Microsoft.XMLHTTP");
 }
}
Code:JavaScript
function stringPost(){
 var form=document.getElementById(form_id);
 var postString=form.text.value;
 var obj=XMLRequest();
  obj.onreadystatechange = function(){
   if (obj.readyState == 4 && obj.status == 200){
    req=obj.responseText;
    //ここで処理
   }
 }
 var URL='responseURL';
 obj.open("POST",URL,true);
 obj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 obj.send('string='+postString);
}

これでページを移動せずPOST出来る。

問題 §

しかし上記の方法では問題がある。 application/x-www-form-urlencoded でPOSTしているから、文字列に & や + があると意図した通り送信されない。

そこで送信文字列を　encodeURIComponent() でエンコードする必要がある。

Code:完成版
function stringPost(){
 var form=document.getElementById(form_id);
 var postString=form.text.value;
 postString=encodeURIComponent(postString);//これを追加
 var obj=XMLRequest();
  obj.onreadystatechange = function(){
   if (obj.readyState == 4 && obj.status == 200){
    req=obj.responseText;
    //ここで処理
   }
 }
 var URL='responseURL';
 obj.open("POST",URL,true);
 obj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 obj.send('string='+postString);
}