テキストデータをリモートから取得し、現在のページに表示する
というわけでXMLHttpRequestを使った最初のサンプル。基本的な使い方は「はじめてのXMLHttpRequestをしてみよう。」を参照。
今回のサンプルは、
- リモートファイル、「/log/archives/fraction.html」からテキストデータを読み込む。
- 読み込んだデータを「<p id="demo"></p>」の中にテキストデータとして表示する。
となります。
表示するテキストデータ(/log/archives/fraction.html)。
ソース。
<script
language="javascript"
src="/log/js/xmlhttprequest.js">
</script>
<script language="javascript">
<!---
// 読み込んできたデータを表示したい領域のID。
var id = "demo";
// データを読み込む関数。
function loadcode() {
var req = new XMLHttpRequest();
if (req) {
// XMLHttpRequestの状態変化をハンドルする関数を登録。
// この関数で行いたい処理を実装する。
req.onreadystatechange = function() {
show(req);
}
};
// 読み込むデータのURL。
var url =
"/log/archives/fraction.html";
req.open('GET', url);
req.send(null);
return false;
}
// 表示領域を消す。
function removecode() {
var demo = document.getElementById(id);
while (demo.hasChildNodes()) {
demo.removeChild(demo.firstChild);
}
}
// 読み込んできたデータを表示する。
function show(req) {
// requestの状態が変化するたびに、
// この関数が呼ばれているかチェック。
alert("req.readyState: "+req.readyState+
"\nreq.status: "+req.status);
// XMLHttpRequestのオブジェクトの状態が、
// readyState = 4でstatus = 200のとき。(*1)
if (req.readyState == 4 && req.status == 200) {
removecode();
// 表示領域。
var demo = document.getElementById(id);
// 表示領域のinnerHTMLに、
// 読み込んできたデータのテキストデータを代入する。
alert(req.responseText);
demo.innerHTML = req.responseText;
}
}
//--->
</script>
<form>
<p><input type="button"
value="読み込む"
onClick="loadcode();" />
<input type="button"
value="消去"
onClick="removecode();" />
</form>
<blockquote>
<p id="demo">ここに読み込んできたデータが表示されます。</p>
</blockquote>
ここに読み込んできたデータが表示されます。
- 補足1
- XMLHttpRequest#readyStateの値は0から4までの値をとる。それらの値の意味は、
- 0: UNINITIALIZED まだOpen()関数がXMLHttpRequestオブジェクトから呼ばれていない。
- 1: LOADING リクエストがまだ作成されていない。(send()メソッドがまだ呼ばれていない。)
- 2: LOADED サーバとの接続が確立し、HTTPステータスを受け取っている。
- 3: INTERACTIVE In Mozilla, called multiple times while response is fetched - every 4096 bytes of response
- 4: COMPLETED レスポンスをすべて受け取った状態。
COMPLETED な場合に、処理を行うということになる。