テキストファイルの読み込み（非同期通信）

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

ボタンをクリックすると、ここにファイルの中身を表示

例文

<script type="text/javascript">
//テキストの読込
function loadText(fileName) {
	var obj = createRequest(); //非同期通信オブジェクトの生成
	if (obj) {
		//通信実行
		obj.open("get",fileName);
		obj.onreadystatechange = function() {
			//通信完了
			if (obj.readyState == 4 && obj.status == 200) {
				//読込後の処理
				document.getElementById("view").innerHTML = obj.responseText;
			}
		}
		obj.send(null);
	}
}

//非同期通信オブジェクトの生成
function createRequest() {
	try {
		return new XMLHttpRequest();
	} catch (e) {
		try {
			return new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {
			return null;
		}
	}
	return null;
}
</script>

解説

変数fileNameには、ファイルのURLを記述します。
新しいリクエストを変数objに作成し、非同期通信を開始します。
通信が始まるとonreadystatechangeが発生し、obj.readyStateとobj.statusを監視することで通信が終わったかどうかを判定し、終了すると事後処理に移ります。

応用

テキストの読み込みが長い場合に、読み込み中であることを表示させることもできます。

			if (obj.readyState == 4 && obj.status == 200) {
				document.getElementById("view").innerHTML = obj.responseText; //読込後の処理
			} else {
				document.getElementById("view").innerHTML = "読み込み中..."; //読込中の処理
			}

戻る