トップページ > コンテンツ > プログラミング入門 > Ajax入門 > PHP-JavaScript通信 > 通信パターン1

javascript側

<form onsubmit ="XMLHttpRequestオブジェクトを作成する関数">  
  <input type ="text" name ="sample"> ※1
  <input type ="submit" value="送信">
</form>
   
function createHttpRequest(){
  if(window.XMLHttpRequest){
    return new XMLHttpRequest();
  } else if(window.ActiveObject){
    try{
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
        return null;
      }
  }
}

function XMLHttpRequestオブジェクトを作成する関数(){
  var request = createHttpRequest();
  request.open("GETやPOST等の指定",URL,同期非同期);
  request.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  request.onreadystatechange = function(){ ※2
    if(request.readyState==4){ ※3
      読み込んだときの処理を記述。コールバック関数を指定するなど。
    }
  }
  request.send(データ); ※4
}

※1 結果反映用テキスト。
xmlhttprequestでは$_POST["sample"]には値入らず。
$_POST["sample"]に値として入れるには、request.send(データ)の部分に変数a="値"&変数b="値"という形で送る必要がある。
詳しくは、http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1411752859参照。

※2 readystatechange以外にも以下のようなものがある。
onloadstart, onerror, onabort, onload, onprogress, ontimeout, onloadend

※3 readyStateの4(DONE)とready.statusの200はよく使うので覚えておこう。

※4 何も送らない場合はrequest.send("")またはrequest.send(null)

php側

$phpで使用する変数 = $_POST['sample']; ※1
何らかの処理
echo "{'連想名':$result}";等　※2

※1
$_はスーパーグローバル変数と言い、javascript側でGETやPOST指定で送った変数を受け取れる。
※2
echoを使って結果を書き出すことで、JSON形式での結果がresponseTextとかに返るのでやりやすい。本例はphpだが、サーバー側に選ぶプログラミング言語やフレームワークによって変わってくる。例えば、node.jsならexpresstとかのモジュールを読み込んで、res.send("hoge")。javaならServlet等をextendsし、レスポンスを書き込む等。

参考：
http://uhyohyohyo.sakura.ne.jp/javascript/13_1.html
http://www.w3.org/TR/XMLHttpRequest2/#interface-xmlhttprequest