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) | 日記
この記事へのコメント
素朴な疑問ですが、同期通信で画面遷移するのであれば$.ajaxを使わず、遷移先のonLoadで普通に外部通信ではダメですか?
Posted by paudew at 2013年04月10日 13:53
コメントありがとうございます。
返信遅くなり失礼いたしました。

確かに次のページでonLoadも手段の1つとなりますが、
画面遷移後のonLoadの場合、リロードするたびに処理が発生してしまいます。

例えばビーコンなどをクリック時に動作させるイベントとロード時のイベントでは数値が大きく異なってくる場合があります。

このような時に使用します。
Posted by RicK at 2013年06月26日 11:57
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/64657874

この記事へのトラックバック