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

2014/09/02 2017/12/05

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形式のデータ

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

[
    {
        "name":"山田一郎",
        "prefecture":"東京都",
        "age":"35"
    },
    {
        "name":"田中次郎",
        "prefecture":"埼玉県",
        "age":"43"
    },
    {
        "name":"中村三郎",
        "prefecture":"栃木県",
        "age":"52"
    }
]

[

{

"name":"山田一郎",

"prefecture":"東京都",

"age":"35"

{

"name":"田中次郎",

"prefecture":"埼玉県",

"age":"43"

{

"name":"中村三郎",

"prefecture":"栃木県",

"age":"52"

}

]

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

記述にあたっての注意

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

参照したサイト様

JSONデータの読み込み

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

指定方法

$.ajax({
    type: 'GET',
    url: 'URL', // 同一ドメインのURLを指定
    dataType: 'json',
    success: function(json){
        // 取得成功時の処理
        console.log(json);
    }

    error:  function(json){
        // 取得失敗時の処理
    }

    complete:  function(json){
        // 最後に実行する処理
    }
});

$.ajax({

type: 'GET',

url: 'URL', // 同一ドメインのURLを指定

dataType: 'json',

success: function(json){

// 取得成功時の処理

console.log(json);

}

error: function(json){

// 取得失敗時の処理

}

complete: function(json){

// 最後に実行する処理

}

});

取得用スクリプト

$.ajax({
    type: 'GET',
    url: './data.json',
    dataType: 'json',
    success: function(json){
        // 取得成功時の処理
        console.log(json);

        name = json[0].name;
        $('#name').append(json[0].name);

        var len = json.length;
        for(var i=0; i < len; i++) {
            $("#ret").append(json[i].name + ' ' + json[i].prefecture + ' ' + json[i].age + '<br>');
        }
    }
});

$.ajax({

type: 'GET',

url: './data.json',

dataType: 'json',

success: function(json){

// 取得成功時の処理

console.log(json);

name = json[0].name;

$('#name').append(json[0].name);

var len = json.length;

for(var i=0; i < len; i++) {

$("#ret").append(json[i].name + ' ' + json[i].prefecture + ' ' + json[i].age + ' ');

}

});

読み込んだ結果

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

json[0].name

1	json[0].name

とします。

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

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

$.ajax({
    type: 'GET',
    url: './data.json',     // 同一ドメインのURL
    dataType: 'json',
    success: function(retJson){     // ←ここで指定
        // 取得成功時の処理
        console.log(retJson);

        name = retJson[0].name;
        $('#name2').append(retJson[0].name);


        var len = retJson.length;
        for(var i=0; i < len; i++) {
            $("#ret2").append(retJson[i].name + ' ' + retJson[i].prefecture + ' ' + retJson[i].age + '<br>');
        }
    }
});

$.ajax({

type: 'GET',

url: './data.json', // 同一ドメインのURL

dataType: 'json',

success: function(retJson){ // ←ここで指定

// 取得成功時の処理

console.log(retJson);

name = retJson[0].name;

$('#name2').append(retJson[0].name);

var len = retJson.length;

for(var i=0; i < len; i++) {

$("#ret2").append(retJson[i].name + ' ' + retJson[i].prefecture + ' ' + retJson[i].age + ' ');

}

});

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

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

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

JSONPとは？

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

callback({
    "key1": "value1",
    "key2": "value2"
})

callback({

"key1": "value1",

"key2": "value2"

})

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

JSONPデータの読み込み実例

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

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

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

$.ajax({
    type: 'GET',
    url: 'http://api.aoikujira.com/kawase/get.php?format=jsonp2&code=twd&to=jpy&callback=callback',
    dataType: 'jsonp',  // ←必須
    jsonp: "callback",  // ←コールバック関数名
    success: function(json){
        // 取得成功時の処理
        console.log(json);

        jpy = json.JPY;
        $('#rate').append(jpy);

        $("#text").append('API URL : ' + json.API_URL + '<br>BASE CODE : ' + json.basecode + '<br>UPDATE : ' + json.update + '<br>');
    },

    error: function(json){
        alert("NG");
    }

});

$.ajax({

type: 'GET',

url: 'http://api.aoikujira.com/kawase/get.php?format=jsonp2&code=twd&to=jpy&callback=callback',

dataType: 'jsonp', // ←必須

jsonp: "callback", // ←コールバック関数名

success: function(json){

// 取得成功時の処理

console.log(json);

jpy = json.JPY;

$('#rate').append(jpy);

$("#text").append('API URL : ' + json.API_URL + ' BASE CODE : ' + json.basecode + ' UPDATE : ' + json.update + ' ');

error: function(json){

alert("NG");

}

});

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

-Javascript,jQuery
-ajax, JSON, JSONP, クロスドメイン

: 【JS】ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで作成する

ラジオボタンの選択値によって指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するJavascript（jQuery）の紹介です。

: 【JS】jQueryでフォームのdisabledを設定/解除する方法

よく使うのに毎回ググってる気がするのでメモ。jQueryを使い、フォームの disabled を設定/解除する方法を備忘録としてポストします。

: 時刻入力の入力補助として便利な「jQuery ClockPick」を使ってみる。

時刻を入力させるフォーム、プルダウンで作っても良かったのですが、ちょっとオシャレ(？)にjQueryの入力補助ライブラリ「ClockPick」を使ってみました。

: 【jQuery】JSONデータをフィルタリングして指定のフォームに項目として表示させる方法

データベースから取得したレコードをPHPでJSONデータ化し、javascriptでフィルタしてフォームに表示させる方法を試行錯誤してみたので、ご紹介。

: 【JS】ラジオボタンでテキストボックスの disabled を制御するスクリプトをjQueryで組んでみた

インプットフォーム入力の際に、近くに置いたラジオボタンで対象フォームの disabled を切り替えるスクリプトを jQuery で組んでみました。

PREV: Bootstrapの表（テーブル）の使い方７選
NEXT: 【jQuery】台湾ドル to 日本円コンバータを作ってみた

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

jQueryでJSONと連携

JSONとは

JSON形式のデータ

記述にあたっての注意

参照したサイト様

JSONデータの読み込み

指定方法

取得用スクリプト

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

JSONPとは？

JSONPデータの読み込み実例

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,180)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,501)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (254,935)

【歴史】江戸幕府歴代将軍一覧 (142,960)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,893)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (127,942)