{"id":14783,"date":"2013-09-06T08:00:51","date_gmt":"2013-09-05T23:00:51","guid":{"rendered":"http:\/\/www.sssg.org\/blogs\/hiro345\/?p=14783"},"modified":"2013-09-04T09:56:50","modified_gmt":"2013-09-04T00:56:50","slug":"xmlhttprequest%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6json%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e5%88%a9%e7%94%a8%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/www.hiro345.net\/blogs\/hiro345\/archives\/14783.html","title":{"rendered":"XMLHttpRequest\u3092\u4f7f\u3063\u3066JSON\u30c7\u30fc\u30bf\u3092\u5229\u7528\u3059\u308b"},"content":{"rendered":"

XMLHttpRequest\u3092\u4f7f\u3063\u3066JSON\u30c7\u30fc\u30bf\u3092\u5229\u7528\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8abf\u3079\u307e\u3057\u305f\u3002\u3088\u304f\u3042\u308b\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u3059\u306d\u3002
\n
\n\u305f\u3068\u3048\u3070\u3001\u6b21\u306e\u3088\u3046\u306a\u5185\u5bb9\u306eJSON\u30d5\u30a1\u30a4\u30eb\u3092\u7528\u610f\u3057\u305f\u3068\u3057\u307e\u3059\u3002\u3053\u308c\u3092 http:\/\/localhost\/sample_json.json \u3067\u53d6\u5f97\u53ef\u80fd\u306b\u3057\u3066\u304a\u304d\u307e\u3059\u3002\uff08\u914d\u5217\u306e\u6700\u5f8c\u306e\u8981\u7d20\u306b\u300c,\u300d\u3092\u3064\u3051\u308b\u3068\u30a8\u30e9\u30fc\u306b\u306a\u308a\u307e\u3059\u304c\u3001\u5730\u5473\u306b\u9762\u5012…\uff09<\/p>\n

sample_json.json <\/p>\n

\r\n{ "list":[\r\n  {\r\n    "code":1,\r\n    "name":"\u540d\u524d1"\r\n  },\r\n  {\r\n    "code":2,\r\n    "name":"\u540d\u524d2"\r\n  },\r\n  {\r\n    "code":3,\r\n    "name":"\u540d\u524d3"\r\n  }\r\n] }\r\n<\/pre>\n
\u3053\u306eJSON\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u53d6\u3063\u3066HTML\u306e\u8981\u7d20\u3092\u4f7f\u3063\u3066\u8868\u793a\u3059\u308bJavaScript\u30d7\u30ed\u30b0\u30e9\u30e0\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002sample_json.js\u3068\u3044\u3046\u540d\u524d\u3067\u7528\u610f\u3057\u3001http:\/\/localhost\/sample_json.html \u3067\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
\u57fa\u672c\u7684\u306bwindow.XMLHttpRequest()\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u304c\u3001IE\u5bfe\u7b56\u3068\u3057\u3066ActiveXObject\u306b\u3082\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u3002\u307e\u305f\u3001JSON\u30c7\u30fc\u30bf\u3092\u89e3\u6790\u3059\u308b\u306b\u306fJSON.parse()\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n
\r\nfunction createXMLHttpRequest() {\r\n    if (window.XMLHttpRequest) {\r\n        return new window.XMLHttpRequest();\r\n    } else {\r\n        try {\r\n            return new ActiveXObject("MSXML2.XMLHTTP.6.0");\r\n        } catch (e) {\r\n            try {\r\n                return new ActiveXObject("MSXML2.XMLHTTP.3.0");\r\n            } catch (e) {\r\n                return null;\r\n            }\r\n        }\r\n    }\r\n}\r\nfunction $(id) {\r\n    return document.getElementById(id);\r\n}\r\n\r\nfunction loadJSON(file_name) {\r\n    var xhr = createXMLHttpRequest();\r\n    if (xhr) {\r\n        xhr.onreadystatechange = function() {\r\n            if ((xhr.readyState === 4) && (xhr.status === 200)) {\r\n                $("json").innerHTML = createHtml(xhr.responseText);\r\n            }\r\n        };\r\n        xhr.open("GET", file_name, true);\r\n        xhr.send(null);\r\n    }\r\n}\r\nfunction createHtml(json_data) {\r\n    var data = null, html = "";\r\n    try {\r\n        data = JSON.parse(json_data);\r\n        html = "<ol>";\r\n        for (var i = 0; i < data.list.length; i++) {\r\n            var code = data.list[i].code; \/\/ \u30b3\u30fc\u30c9\r\n            var name = data.list[i].name; \/\/ \u540d\u524d\r\n            html += "<li>" + code + ", " + name + "<\/li>";\r\n        }\r\n        html += "<\/ol>";\r\n    } catch (e) {\r\n        html = "parse error.";\r\n    }\r\n    return html;\r\n}\r\n<\/pre>\n
\u3053\u3053\u307e\u3067\u306eJSON\u30c7\u30fc\u30bf\u3068JavaScript\u3092\u52d5\u4f5c\u3055\u305b\u308b\u305f\u3081\u306eHTML\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002sample_json.html\u3068\u3044\u3046\u540d\u524d\u3067\u7528\u610f\u3057\u3001http:\/\/localhost\/sample_json.html \u3067\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092Chrome\u3084Firefox\u3067\u8868\u793a\u3057\u305f\u3089\u3001\u300csample_json.json\u306e\u53d6\u5f97\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30c7\u30fc\u30bf\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u6700\u521d\u300cloadJSON(‘sample_json.json’);\u300d\u3068\u3057\u3066\u3044\u305f\u3089\u52d5\u304b\u306a\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u300cloadJSON(‘.\/sample_json.json’);\u300d\u3068\u76f4\u3057\u305f\u3068\u3053\u308d\u52d5\u4f5c\u3059\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n    <head>\r\n        <meta http-equiv="Content-Type" content="text\/html; charset=UTF-8">\r\n        <title>sample_json<\/title>\r\n        <script type="text\/javascript" src="sample_json.js"><\/script>\r\n    <\/head>\r\n    <body>\r\n        <form>\r\n            <input type="button" value="sample_json.json\u306e\u53d6\u5f97"\r\n                   onClick="loadJSON('.\/sample_json.json');"><br>\r\n        <\/form>\r\n        <div id="json"><\/div>\r\n    <\/body>\r\n<\/html>\r\n<\/pre>\n
JavaScript\u306b\u3064\u3044\u3066\u306f\u4e0b\u8a18\u304c\u53c2\u8003\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n