JavaScript 非同期通信オブジェクトを生成する
IE9以降及びFirefox、Safari、Google Chrome、Operaなどでは、「XMLHttpRequest」オブジェクトが非同期通信を行うオブジェクトになっています。また、readyStateプロパティとstatusプロパティを利用して通信状態に応じて処理を行うこともできます。readyStateプロパティには、次の0か4までの数値が入ります。
| 値 | 説明 |
|---|---|
| 0 | 未初期化 |
| 1 | 接続開始 |
| 2 | リクエスト受信 |
| 3 | 処理中 |
| 4 | 完了 |
statusプロパティには、サーバーからのステータス番号が入ります。「200」なら正常、「404」ならファイルが見つからないことになります。
<body>
<script>
window.addEventListener("load" , function(){
//読み込みボタンのイベント
var ele = document.getElementsByTagName("output")[0];
document.getElementById("loadBtn").addEventListener("click",function(evt){
//非同期通信オブジェクト作成
var xhr = createXMLHttpRequest();
//読み完了時のイベントハンドラを設定
xhr.onload = function(){
//読み込んだテキストを出力
ele.innerHTML = xhr.responseText;
}
//同一ドメインのURL上のファイル指定
xhr.open("get","./test5.html", true);
xhr.send(null);
}, false)
}, false);
//http通信用
function createXMLHttpRequest(){
var XMLhttpObject = null;
try{
XMLhttpObject = new XMLHttpRequest();
}catch(e){
}
return XMLhttpObject;
}
</script>
<form method="get">
<input type="button" value="読み込み" id="loadBtn">
</form>
<output></output>
</body>ボタンをクリックすると、非同期通信用オブジェクトが生成され、サーバーからHTMLファイルが読み込まれます。
