PR

JSONを使ってみよう!

2008年5月19日(月)
竹添 直樹

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データから

要素を含むHTMLを生成し、
要素内に表示しています。
  • 「JSONを使ってみよう!」サンプルプログラム

NTTデータ先端技術株式会社
NTTデータ先端技術に勤めるしがないプログラマ。最近はOSS、アジャイルをキーワードに活動しつつ、余暇を利用して書籍の執筆などを行っている。著書に独習JavaScript(共著、翔泳社刊)など。

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています