jQuery ajaxでXMLとかJSONとかJSONPとか取得 - 2

今回はJSONPの取得。

JSONP…scriptタグを使用してクロスドメインなデータを取得する仕組み。

通常ブラウザなどに実装されている「同一生成元ポリシー（SOP）」という制約により、 Webページは自分で生成したドメイン以外のドメインのサーバと通信することはできない。

じゃどうするか、というとサーバ側ではまず

1. 読み込ませたいJSONデータを任意の関数の引数として定義
2. そのデータをxxx.jsonpみないにファイルに保存

を行う。
一方の呼び出し側では

1. javascriptタグのsrcにxxx.jsonpを指定
2. サーバ側の任意の関数を定義

する。

そうすることで呼び出し側からは、SOPの制約に引っかかることなくデータを取得できるようになる。

ではこれをjQueryをつかったら～、ということで以下ソースなど。

読み込まれるデータ

cb({"familylist":[
  {
  "name":"磯野",
  "father":"波平",
  "children":[
    "child":"サザエ",
    "child":"カツオ",
    "child":"ワカメ"
    ]
  },
  {
  "name":"さくら",
  "father":"ヒロシ",
  "children":[
    "child":"さきこ",
    "child":"ももこ"
    ]
  }
]})

jQueryでの読み込み処理

// ロード時に呼び
$(window).load(function(){
  $.ajax({
    type: "GET",         // HTTP通信 GET/POST
    url: "http://xxxxx/familylist.jsonp?callback=cb",   // リクエストURL
    dataType: "jsonp",    // データ型 xml/json/jsonp/script/text
    jsonp: "cb"  // コールバック関数
  });
});

// コールバック関数
function cb(json){

  // ループ処理 Family要素でループ
  for( i = 0; i < json.familylist.length; i++ ) {

    $("#familyList").append(json.familylist[i].name);
    $("#familyList").append("父:" + json.familylist[i].father);

    // 子供でループ
    for( j = 0; j < json.familylist[i].children.length; j++ ){

      $("#familyList").append("子:" + json.familylist[i].children[j].child + "
");
    }

  }
}


// 以下に書き込まれる

以上でOK！！


これでJSONP用にデータを提供したいときの定義方法もわかった。
それと何よりjQueryを使用するとチョー簡単にリクエストが作れるってことが
改めてわかった。当分はこれ使えそう。

以上