2013年04月08日

JavaScript JSONPのajax非同期通信を同期通信として動作させる方法

JSONPのajax


JSONPはクロスサイトスクリプティング対策用として基本的にJSで使用されます。

環境


jQuery

概要


JSONPのajaxは非同期通信しかできません。
非同期通信は、画面Aから画面Bへ遷移する間に使用すると、
画面Bへの遷移が早すぎて通信が行われないことがあります。
そのため、このような状況では非同期通信は使用出来ませんが、
外部通信するためにはJSONPを使用したい、というジレンマからなんとか考えついた方法です。

対策


ajaxには通信処理が終了した後に処理を行うcompleteがあります。
このcompleteを遷移で使えばいいというのが対策です。
通常

aタグ -> jsによる外部通信 -> 画面B

という動きになりますが、

divタグ -> jsによる外部通信 -> -> completeによる画面遷移処理 -> 画面B

という動きになります。
具体的には下記ような形


$.ajax({
url: URL,
dataType: "jsonp",
data: data,
jsonpCallback: "callback",
async : true,
complete: function(u) {
return function() {
location.href = u;
};
}(url)
});



completeにあるurlはdivタグのnameとかに埋め込んでjsにて取得すればおkです。
これで何とか外部通信を完了させてから画面Bへ遷移するという同期通信のような動作ができます。
posted by RicK at 10:48| Comment(2) | TrackBack(0) | 日記