JSONを使ってみよう!

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

JSONを使ったAjaxアプリケーション

前回はJSONの概要と記法、そしてJavaScriptでの利用方法について説明しました。連載2回目となる今回はAjaxアプリケーションでのJSONの利用方法を、サンプルを作成しながら紹介していきます。

なお、本記事のサンプルを実行するにはApacheなどのWebサーバが必要になります。また、本記事の後半ではPHPを用いた動的なJSONの生成方法にも触れますので、Apache上でPHPが利用できる環境を用意してください。環境の構築方法については割愛します。

prototype.jsについて

prototype.js(http://www.prototypejs.org/)はさまざまなJavaScriptライブラリの中でも最も初期に登場したもので、多くのAjaxアプリケーションで利用されています。

DOMの操作などAjax以外にも便利な機能を備えています。ここではprototype.jsが提供するAPIの中でJSONを扱うためのものを簡単に紹介しておきます。

「String#evalJSON()」は、prototype.jsによって文字列(String)オブジェクトに追加されるメソッドで、JSON形式の文字列をJavaScriptオブジェクトに変換するためのものです。Ajaxアプリケーションでは、サーバから取得したJSONをこのメソッドを用いて、JavaScriptに変換するとよいでしょう。

「Object#toJSON()」は、同じくprototype.jsによってすべてのオブジェクトに追加されるメソッドです。こちらはevalJSON()メソッドは反対に、オブジェクトをJSON形式の文字列に変換します。

上記のメソッドの使用例は図1を参照してください。また、prototype.jsのより詳細な情報については「JavaScriptを洗練させるPrototype.js」などを参照してください。

  • 「JSONを使ってみよう!」サンプルプログラム

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

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

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

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

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