JavaScriptにて非同期通信を同期通信のように動作させる方法

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

rick No28です。
今回は、JSの外部通信にてJSONPを使用し、画面遷移直前に使用する場合、非同期通信通信が途切れてしまう時があるのでその対策となります。

設定

・Webサイト
・外部サーバ
・画面A
・画面B
・jQuery

状況

JavaScript(jQuery)にて外部サイトに通信を行う場合、
クロスサイトスクリプティング対策としてJSONPとしますが、
同期通信は対応しておらず非同期通信しか使用できません。

この場合、Webサイト画面Aより画面Bへ遷移する直前(クリック時)に
非同期通信のJSONPを使用すると、
画面Bへの遷移が早すぎるためか外部サイトへの通信が行われない場合があります。
(遷移する前をブレイクポイントなどで止めると通信が行われます)
そのため、同期通信のような動作をさせる必要があります。

対策

遷移リンクを押した時に発動するため、

まずリンク等をやめるか、遷移イベントをキャンセルします。
例えばの代わりにでname=URLを記載し、
クリックイベントを貼り付けます。
その後の通信にて下記のようajaxを行います。
$.ajax({
url: URL,
dataType: “jsonp”,
data: data,
jsonpCallback: “callback”,
async : true,
complete: function(u) {
return function() {
location.href = u;
};
}(url)
});
工夫した点は１箇所completeの点です。
外部通信が完了した後の処理completeにて遷移処理をJS側で行うことで
同期通信のような動作となります。
これにより、クリック時通信を完了した後に遷移を行うことができ、
クリック時の外部通信処理が途切れなくなりました。