新JavaScript例文辞典

非同期通信でJSONファイルを読み込む

説明

非同期通信でJSONファイルを読み込むにはnew XMLHttpRequest()を使います。open()の2番目のパラメータに読み込むJSONファイル(テキストファイル)のURLを指定します。なお、セキュリティの都合により同一ドメイン上のサーバー上にあるファイルしか読み込むことができません。JSONデータの場合、テキストファイルになるためresponseTextプロパティ内容を読み出しeval()を使ってJavaScriptからアクセスできるようにします。

サンプルプログラム

var httpObj;
window.onload = function(){
httpObj = new XMLHttpRequest();
httpObj.onload = displayJSON;
httpObj.open("get","sample.txt",true);
httpObj.send(null);
}
function displayJSON(){
var textData = httpObj.responseText;
var jsonData = eval('data='+textData);
var nameArray = jsonData.userName;
for (var i=0; i<nameArray.length; i++){
document.getElementById("result").innerHTML += nameArray[i] + "<br>";
}
}
サンプルを実行
[戻る]