JSONを使ってみよう！

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

それでは実際にAjaxでJSONを利用する簡単なサンプルを作成してみましょう。このサンプルファイルは、会員限定特典としてダウンロードできますので、この中のファイルを見ながら解説します。記事末尾をご確認ください。

はじめに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データから