<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajaxを使ってサーバーとやりとりを行う</title>
</head>
<body>
<form name="testForm"><p>
<input type="button" value="load"
onclick="getFile('data/test.txt');">
</p></form>
<div id="testResult">
</div>
<script>
var req;
function getFile(path){
/*
new演算子とコンストラクタでXMLHttpRequestオブジェクトを
生成します。非同期通信では、リクエストを送ってからデータ取得が
完了するまでの間、別の処理を行うことが可能です。
そのため、いつデータを取得したかを知らなければいけません。
そのために使用されるのがコールバック関数です。
*/
req = new XMLHttpRequest();
/*
コールバック関数は、onreadystatechangeプロパティで
設定します。
*/
req.onreadystatechange = showData;
/*
openメソッドは、サーバーに送るHTTPリクエストの内容を指定
第1引数：HTTPプロトコルのコマンド
「GET」はデータを取得するためのコマンドです。
第2引数：データファイルのパス
第3引数：非同期・同期の指定
true:非同期通信
false: 同期通信
*/
req.open("GET",path,true);
/*
sendメソッドが実行されたときに、サーバーに
HTTPリクエストが送信される。
GETコマンドの場合は、引数に何もないことを示す「null」を指定
*/
//HTTPリクエストを送信
req.send(null);
}
function showData(){
/*
下記のif文でデータの取得が完了したかを判定します。
readtState：通信状態を表すプロパティ
status：サーバー側がリクエストに対して返す
ステータスコードと呼ばれる値を表すプロパティ
詳細は記事をご覧ください。
*/
if( req.readyState == 4 &&
req.status == 200 ){
/*
サーバーから取得したテキストが格納されている
プロパティです。その値を要素div「testResult」の
innerHTMLプロパティに代入し、HTMLと解釈して
表示します。
*/
document.getElementById("testResult")
.innerHTML = req.responseText;
}
}
</script>
</body>
</html>