JSON は、JavaScript におけるオブジェクトリテラルに基づいたデータフォーマット方式で、シンプルさと JavaScript との親和性の高さからよく使われています。ここでは、JavaScript から Web上にある JSON 形式のデータを読み込む方法について説明します。
XMLHttpRequest を使って JSON を読み込む
XMLHttpRequest() は、HTTP を使ってサーバーにリクエストを送るためのオブジェクトです。XMTHttpRequest() を使って Web 上の JSON データを取得する処理の流れについて説明します。次のサンプルプログラムを見てみましょう。
まず、任意のサーバーに以下のような JSON ファイルが置いてあるとします。
sample.json
|
1 2 3 4 5 |
{ "item_code": "001", "item_name": "apple", "item_price": "100" } |
HTML
|
1 |
<input type="button"value="JSONファイルを取得する" onclick="getJSON()"> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 |
function getJSON() { var req = new XMLHttpRequest(); // XMLHttpRequest オブジェクトを生成する req.onreadystatechange = function() { // XMLHttpRequest オブジェクトの状態が変化した際に呼び出されるイベントハンドラ if(req.readyState == 4 && req.status == 200){ // サーバーからのレスポンスが完了し、かつ、通信が正常に終了した場合 alert(req.responseText); // 取得した JSON ファイルの中身を表示 } }; req.open("GET", "http://xxx.yyy.com/sample.json", false); // HTTPメソッドとアクセスするサーバーの URL を指定 req.send(null); // 実際にサーバーへリクエストを送信 } |
このプログラムは、指定した URL から JSON ファイルを取得し、中身を文字列として表示するプログラムです。以下に処理の流れを見て行きましょう。
まず、XMLHttpRequest() オブジェクトを生成します。onreadystatechange はイベントハンドラで、XMLHttpRequest() オブジェクトの状態が変化した際に呼び出されます。オブジェクトの状態を表す readyState には 0 から 4 までの状態があり、4 はサーバーからのレスポンスが受信完了した状態を表しています。
また、status にはサーバーからのレスポンスコードが入り、200 が通信の成功を表します（例えば、404 ならファイルが存在しないというレスポンスコードになります）。通信が成功した際には、responsText にサーバーから送られてきたレスポンスが文字列として記憶されます。
open() は、HTTP メソッド（ここでは GET）とアクセスするサーバ（ここではJSONファイルが置いてあるサーバ）のURLを指定します。send() で実際にサーバーに対するリクエストを送信します。GET メソッドなどでデータを送信する必要がない場合は、引数に null を指定します。
結果として、上記の sample.json の中身が文字列としてアラート表示されます。
サーバー通信の際の注意点
JavaScript にはセキュリティ上同一生成元ポリシーと呼ばれる制約があり、JavaScript プログラムをダウンロードしたサーバー以外のサーバーとは通信できないようになっています。このため、JavaScript のプログラムファイルと JSON ファイルは同じスキーム（ URL のプロトコル部分）、サーバーに置かれていないと動きません（httpとhttpsも区別されます）。
