XMLHttpRequestを使ってJSONデータを利用する

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の技

hiro345

Information Technology で世界を変える

XMLHttpRequestを使ってJSONデータを利用する