Eyecatch jQuery

Javascript,jQuery

jQueryでJSON、JSONP 連携してみる。

2015/11/18

jQuery の $.ajax() を利用してjson、jsonp形式のデータを読み込む方法を忘備録としてポストします。

jQueryでJSONと連携

JSONとは

まず、JSONとは何なのか。

JSONとはJavaScript Object Notationの略で、XMLなどと同様のテキストベースのデータフォーマットです。 その名前の由来の通りJSONはJavaScriptのオブジェクト表記構文のサブセットとなっており、XMLと比べると簡潔に構造化されたデータを記述することができるため、記述が容易で人間が理解しやすいデータフォーマットと言えます。 なお、JSONは2006年に「RFC 4627(http://www.rfc-editor.org/rfc/rfc4627.txt)」として公開されています。

JSONってなにもの? | Think IT(シンクイット)

と、解説されています。
JavaScriptで汎用的に使える、XMLのようなデータフォーマットと考えるのが良さそうです。

JSON形式のデータ

概論はこれぐらいにして、実際にデータフォーマットを書いてみます。

なかなか可読性があるデータですね。

記述にあたっての注意

  • 文字は「"」(ダブルクォート)で囲む
  • 「"」「/」などの特定文字の前には「\」を置いてエスケープする
  • 数値はそのまま表記
  • 真偽値(trur, false)は文字ではなく「"」で囲まない
参照したサイト様

JSONデータの読み込み

では次に、このデータを jQueryで読み込んでみます。
$.ajax() 関数を用います。

指定方法

取得用スクリプト

読み込んだ結果

json_test01

配列と同様、インデックス番号とともに指定することでオブジェクトにアクセスする事が可能です。
0番目の "name" にアクセスする場合は、

とします。

なお、アクセス先の json[0].name の json 部分は、取得時に指定しない場合は自動的に json となり、任意に設定する場合は無名関数 success: function() に引数として設定します。

以下、"retJson" に指定した場合。

JSONPで別ドメインのデータにアスセスする

$.ajax() の URL 指定箇所にわざわざ「同一ドメインのURL」とコメントしていますが、これはなぜかといえば、JavaScriptではクロスドメイン制限という、同一ドメインのデータしかアクセスできないという性質があり、別ドメインのデータにアスセスする場合はこれをクリアしないとなりません。

ということで JSONP という仕組みを用いてデータにアクセスする必要があります。

JSONPとは?

JSONP は JSON with Paddingの略称で、次の形式で書かれています。

callback() 関数を用いて、データの方でコールバックを実行しているのが特徴。
これにより、リクエストされると callback関数が自動的に呼び出され、第一引数として JSON オブジェクトが渡されます。

JSONPデータの読み込み実例

JSONP 形式で対日本円の通貨レートを取得できるサービスを利用して実例を示します。

クジラ 外国為替 確認 API (為替 RSS)

試しに、台湾ドルのレートを取得してみます。

json_test02

コールバック関数のあたりが若干怪しいですが、JSONP データの取得はできているようです。

jQueryクックブック

jQueryクックブック

jQuery Community Experts

価格 : 3,888円

     

-Javascript,jQuery
-, , , , , ,