第2回 JSONを使ってみよう！ その他２

prototype.jsでJSONを取得してみよう

　それでは実際にAjaxでJSONを利用する簡単なサンプルを作成してみましょう。このサンプルファイルはダウンロードできますので、この中のファイルを見ながら解説します。ダウンロード（http://www.thinkit.co.jp/images/article/70/2/7021.zip）（sample01.zip/30.3KB）。

　はじめにWebサーバ上に静的なJSONファイルを配置しておき、それをJavaScriptから非同期通信で取得し、表形式で表示してみます。

　まずはリスト2のsample.jsonをサーバ上に作成しておきます。これは書籍の情報を記述したJSONです。次にリスト3のsample.htmlをサーバ上の同じフォルダに配置しましょう。どちらも文字コードはUTF-8とします。このHTMLをWebブラウザからアクセスすると、図2のようにボタンが1つだけ表示されており、ボタンをクリックすることでsample.jsonの内容が表形式で表示されるはずです。

sample.htmlのJavaScriptコードの説明

　sample.htmlのJavaScriptコードを簡単に説明しておきましょう。

　まずボタンをクリックすると（1）のgetBookInfo()関数が呼び出されます。この関数ではprototype.jsのAjax.Requestオブジェクトを使用して非同期でsample.json を取得しています。サーバからのレスポンスを受け取ると、（2）のdisplayResult()関数が呼び出されます。ここではJSONデータから<table>要素を含むHTMLを生成し、<div id="result">要素内に表示しています。