prototype.jsで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データから

前の記事

JSONってなにもの？

次の記事

Web APIって何？

関連記事

Web APIって何？

2008年5月26日 20:00

Plotrでグリッドデータからグラフ表示

2008年9月19日 20:00

DWRでAjaxプログラムをかんたん作成！

2008年9月17日 20:00

JavaScriptTemplates（JST）入門！

2009年1月28日 20:00

jQueryでWebサービスに触れてみる

2010年1月12日 20:00

CloudサービスとRPAの連携

2019年12月20日 6:30

バックナンバー

Web APIって何？

2008年5月26日 20:00

• 開発言語
• 技術解説

JSONを使ってみよう！

2008年5月19日 20:00

• 開発言語
• 技術解説

JSONってなにもの？

2008年5月12日 20:00

• 開発言語
• 技術解説

バックナンバーをもっと見る

この記事の筆者

竹添 直樹

NTTデータ先端技術株式会社

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

竹添 直樹のプロフィールを見る

業界情報やナレッジが詰まったメルマガやソーシャルぜひご覧ください

• メルマガ
• Facebook
• X(エックス)
• BlueSky
• Googleニュース
• RSS

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