「XMLHttpRequest」をつかってJavaScriptで通信する？
JavaScriptで他のサーバと通信してデータを取得する方法を調査していました。
「JavaScript 通信」というキーワードで検索して、「Ajaxを勉強しよう」というサイトを発見しました。「XMLHttpRequest」クラスをつかって、HTTPで通信する方法について、非常に詳しく紹介されています。
とりあえず、まねしてコーディングしてみました。
ソースコードを示します。
--------------------- ここから (test.js)
var httpObj = null;
var doc = null;
// テキストファイルを読み込んで、
// ファイルの内容を表示させるための関数
loadTextFile = function() {
if( doc == null ) {
// HTMLファイルの要素を取得する
// どの要素を取得するかは、HTMLのid属性で指定する
doc = document.getElementById("form");
}
// 通信するためのオブジェクトを生成する
httpObj = _XMLHttpRequest();
if( httpObj != null ) {
httpObj.onreadystatechange = displayData;
httpObj.open("GET", "data.txt", true);
httpObj.send(null);
}
}
// 通信を行うためのオブジェクトを生成するための関数
// IEとそれ以外のブラウザーで処理をわける
_XMLHttpRequest = function() {
var xmlHttpObj = null;
//IEの場合
if(window.ActiveXObject){
try {
xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
alert("A");
} catch (e1) {
try {
xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
alert("B");
} catch (e2) {
// エラー時の処理
}
}
// IE以外の場合
} else {
try {
xmlHttpObj = new XMLHttpRequest();
alert("C");
} catch(e) {
// エラー時の処理
}
}
return xmlHttpObj;
}
// 読み込んだファイルの内容を表示するための関数
displayData = function() {
// readyStateプロパティの値が
// 0,1,2の場合はリクエスト
// 3,4の場合はサーバーからの応答であることをあらわす
// statusプロパティの値が
// 200はリクエストは成功 したことをあらわす
// ローカルの環境(ウェブサーバを介さない通信)で実行した場合は常に0となった
if( (httpObj.readyState == 4) ) { //&& (httpObj.status == 200)
if( doc != null ) {
doc.result.value = httpObj.responseText;
} else {
alert("docがnullです");
}
alert("finish"+ "," + httpObj.status);
} else {
alert( "通信中です" );
}
}
--------------------- ここまで (test.js)
--------------------- ここから (test.html)
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="./test.js" type="text/javascript"></script>
</head>
<body>
<form id="form">
<input type="button" value="読み込み" onClick="loadTextFile()"><br>
<textarea name="result" cols="40" rows="5"></textarea>
</form>
</body>
</html>
--------------------- ここまで (test.html)
--------------------- ここから (data.txt)
にほんごだー！
改行だー！
--------------------- ここまで (data.txt)
(注)
すべてのファイルのエンコードは、「UTF-8」です。
セキュリティの上の理由で、「XMLHttpRequest」を利用した通信は同ドメイン内のみ許可されるようです。時間をかけてつくった後に気づいたんですが・・・（ＴＴ）
実際に実験してみたところ、Firefoxではエラーが報告されます。一方、IEでは通信してデータを取得することができました(笑)。
他のドメインと通信する方法がいくつかあるようなので、調査、導入してみようと思います。
情報をお持ちの方、どうぞご教授ください。
