XMLHttpRequestを使ってJSONデータを利用する方法について調べました。よくあるプログラムですね。
たとえば、次のような内容のJSONファイルを用意したとします。これを http://localhost/sample_json.json で取得可能にしておきます。（配列の最後の要素に「,」をつけるとエラーになりますが、地味に面倒…）
sample_json.json
{ "list":[
{
"code":1,
"name":"名前1"
},
{
"code":2,
"name":"名前2"
},
{
"code":3,
"name":"名前3"
}
] }
このJSONファイルを読み取ってHTMLの要素を使って表示するJavaScriptプログラムは次のようになります。sample_json.jsという名前で用意し、http://localhost/sample_json.html でアクセスできるようにします。
基本的にwindow.XMLHttpRequest()を使っていますが、IE対策としてActiveXObjectにも対応しています。また、JSONデータを解析するにはJSON.parse()を使っています。
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new window.XMLHttpRequest();
} else {
try {
return new ActiveXObject("MSXML2.XMLHTTP.6.0");
} catch (e) {
try {
return new ActiveXObject("MSXML2.XMLHTTP.3.0");
} catch (e) {
return null;
}
}
}
}
function $(id) {
return document.getElementById(id);
}
function loadJSON(file_name) {
var xhr = createXMLHttpRequest();
if (xhr) {
xhr.onreadystatechange = function() {
if ((xhr.readyState === 4) && (xhr.status === 200)) {
$("json").innerHTML = createHtml(xhr.responseText);
}
};
xhr.open("GET", file_name, true);
xhr.send(null);
}
}
function createHtml(json_data) {
var data = null, html = "";
try {
data = JSON.parse(json_data);
html = "<ol>";
for (var i = 0; i < data.list.length; i++) {
var code = data.list[i].code; // コード
var name = data.list[i].name; // 名前
html += "<li>" + code + ", " + name + "</li>";
}
html += "</ol>";
} catch (e) {
html = "parse error.";
}
return html;
}
ここまでのJSONデータとJavaScriptを動作させるためのHTMLは次のようになります。sample_json.htmlという名前で用意し、http://localhost/sample_json.html でアクセスできるようにします。このファイルをChromeやFirefoxで表示したら、「sample_json.jsonの取得」ボタンをクリックするとデータが表示されます。最初「loadJSON(‘sample_json.json’);」としていたら動かなかったのですが、「loadJSON(‘./sample_json.json’);」と直したところ動作するようになりました。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sample_json</title>
<script type="text/javascript" src="sample_json.js"></script>
</head>
<body>
<form>
<input type="button" value="sample_json.jsonの取得"
onClick="loadJSON('./sample_json.json');"><br>
</form>
<div id="json"></div>
</body>
</html>
JavaScriptについては下記が参考になります。
- JavaScriptプログラミング入門 第2版
- JavaScript本格入門 ~モダンスタイルによる基礎からAjax・ｊQueryまで
- JavaScriptパターン――優れたアプリケーションのための作法
- JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技