jQueryでのjsonp呼び出しについて

javascriptでWebAPIを呼び出す場合、SameOriginPolicy によって
通常は同一ドメイン以下からしかjsonやその他の情報を取得できません。

これを回避する方法がjsonpです。今回はjsonpの詳しい解説は省きます。
jsonpに対応したWebAPIを呼び出す場合、必ずコールバック関数の指定を行います。
以下のような感じです。

// 動的なJSONPの読み込み
function search(){
	var script = document.createElement('script');
	// 入力内容からJSONPの検索を行うURLを生成
	script.src = "http://zip.ricollab.jp/" + $('zipcode').value +
					".json?callback=processJson";
	// scriptタグを<head>タグ以下に追加
	$('header').appendChild(script);
}

// JSONPから自動的に呼び出される関数
function processJson(json){
	if(json.result != null){
		// resultプロパティがある(=検索結果が複数ある場合)
		for( var i = 0; i < json.result.length; i++ ){
			// 各件ごとに取得してaddressプロパティを表示
			$('result').innerHTML += json.result[i].address + "<hr/>";
		}
	}else{
		// 検索結果が1件の場合は都道府県(prefecture),市(city),住所(address)を表示
		$('result').innerHTML = json.address.prefecture + json.address.city
								+ json.address.town;
	}
}

ガチ書きのjavascriptではこんな感じでやっていたのですが、
最近jQueryを利用するようになって、jQueryのjsonp呼び出しが
少し変わっていてつまづいたのでメモします。
まずソースを書くと、こんな感じになります。

          $.ajax({
              url: "http://www.google.com/complete/search",
              data: {hl:'ja', client:'firefox', q:value},
              dataType: "jsonp",
              type: "GET",
              success: function(data) {
                           alert("ok");
                       },
              error: function(data) {
                           alert("ng");
                     },
              complete : function(data) {
                           alert("end");
                     }
          });

jQueyでWebAPIを呼びだす場合、dataType=jsnopを指定した時点で
勝手にcallbackというパラメータに対して「jquery1900….」という長い文字列を挿入しています。
これはどこかというと、$.ajaxのスコープ内にある1次関数っぽいです。
(上のソース内のsuccess,error,completeの部分)

なので、webAPIが提供しているjsnop用コールバックのクエリ名が「callback」
である場合、特にそれを意識する必要がなくなっています。

逆に、もしWebAPI側のコールバック呼び出しクエリ名が「callback」以外
だった場合は「jsnop: “クエリ名”」というオプションをつけてやることで、
対応可能です。この場合も呼び出されるコールバック関数は
$.ajaxのスコープ内にある一時関数になります。

参考サイト

Ajaxのjsonp・callbackの仕組みを解説します
http://javatechnology.net/ajax/jsonp-callback/


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です