Javascript XMLhttpRequestでのファイル読み込み

JavascriptでXMLhttpRequestを利用してファイル読み込みする処理のサンプルプログラムを紹介します。

非同期でファイルを読み込む方法

非同期データ取得ボタンをクリックすると、同じフォルダ内のtest.txtを読み込んで画面に表示します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
		<title>XMLHttpRequest　非同期処理</title>
		<script type="text/javascript">
		/*
		指定したテキストファイルを読込み、ファイルの内容をそのまま返す
		* url:読み込むファイルパス
		*/
		function ReadTextFile(url) {
			var xml = new XMLHttpRequest();
			xml.onreadystatechange=function(){
				if (xml.readyState == 4 && xml.status == 200){
					document.getElementById("display").innerHTML= xml.responseText;
				}else if( xml.status == 404){
					alert("ファイルがみつかりません。");
				}
			}
			xml.overrideMimeType('text/plain; charset=EUC-JP');	//文字コード指定
			//xml.open(,ファイルパス,(true:非同期,false:同期);
			xml.open("GET", url+"?cache=" + (new Date()).getTime(), true); 
			xml.send(null);
		}
		</script>
	</head>
	<body>
		<input id="Button_Get" type="button" value="非同期データ取得" onclick="ReadTextFile('./test.txt');" />
		<div id="display"></div>
	</body>
</html>

同期でファイルを読み込む方法

同期データ取得ボタンをクリックすると、同じフォルダ内のtest.txtを読み込んで画面に表示します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
		<title>XMLHttpRequest　同期処理</title>
		<script type="text/javascript">
		/*
		指定したテキストファイルを読込み、ファイルの内容をそのまま返す
		* url:読み込むファイルパス
		*/
		function ReadTextFile(url) { 
		    var xml = new XMLHttpRequest();
		    //xml.open(,ファイルパス,(true:非同期,false:同期);
			xml.open("GET", url+"?cache=" + (new Date()).getTime(), false); 
			xml.overrideMimeType('text/plain; charset=EUC-JP');	//文字コード指定
			xml.send();

			document.getElementById("display").innerHTML= xml.responseText;
		}

		</script>
	</head>
	<body>
		<input id="Button_Get" type="button" value="同期データ取得" onclick="ReadTextFile('./test.txt');" />
		<div id="display"></div>
	</body>
</html>

よく利用するプロパティ

onreadystatechange

readyStateが変化した時に実行される処理を設定できる

readyState

サーバーからのレスポンス状況を取得する。
ファイルを読み込む時は4の状態になっているか確認する。

番号	状態
0	初期化がおこなわれていない
1	sendメソッドでデータが送られていない
2	sendメソッドは実行されているが応答がまだ無い
3	データ受信中
4	データ受信済み