今回はサーバにリクエストを送ります。その際にopen()とsend()メソッドを使います。
open()メソッドは三つの引数を必要とします。一つ目はリクエストを送る際にどのメソッド(GETかPOST)を使うか定義するための引数です。二つ目の引数はサーバ側のスクリプトのURLを特定します。三つ目の引数は非同期通信を用いるか否かを特定します。
send()メソッドはサーバにリクエストを送信します。GETの場合は引数にnull又は""を指定します。
このコードを記載するHTMLファイルと呼び出すPHPファイルが同じディレクトリにあならばコードは以下のようになります。
xmlhttp.open("GET","time.php?a=1&b=2",true);
xmlhttp.send(null);
その次に、いつAjaxファンクションを実行するのかを決めなければなりません。
今回はユーザが名前の欄に何かを記入した際にAjaxファンクションが呼び出されるようにします。
<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>
responseTextプロパティを用いてサーバから送られたデータを読み取ります。
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.myForm.time.value=xmlhttp.responseText;
}
}
これらを書き加えた後のtestAjax.htmlファイルは
こちらです。
チュートリアル5はtime.phpの中身を記載していきます。