強引な回答で説明されているのと同様の手法を実装する単純なJavaScriptクラスを作成しました。私はそれがここの誰かに役立つことを願っています。GitHubプロジェクトはresponse-monitor.jsと呼ばれます
デフォルトでは、待機インジケーターとしてspin.jsを使用しますが、カスタムインジケーターを実装するための一連のコールバックも提供します。
JQueryはサポートされていますが、必須ではありません。
注目すべき機能
- シンプルな統合
- 依存関係なし
- jQueryプラグイン（オプション）
- Spin.js統合（オプション）
- イベントを監視するための構成可能なコールバック
- 複数の同時リクエストを処理します
- サーバー側のエラー検出
- タイムアウト検出
- クロスブラウザ
使用例
HTML
<!-- the response monitor implementation -->
<script src="response-monitor.js"></script>
<!-- optional JQuery plug-in -->
<script src="response-monitor.jquery.js"></script>
<a class="my_anchors" href="/report?criteria1=a&criteria2=b#30">Link 1 (Timeout: 30s)</a>
<a class="my_anchors" href="/report?criteria1=b&criteria2=d#10">Link 2 (Timeout: 10s)</a>
<form id="my_form" method="POST">
<input type="text" name="criteria1">
<input type="text" name="criteria2">
<input type="submit" value="Download Report">
</form>
クライアント（プレーンJavaScript）
//registering multiple anchors at once
var my_anchors = document.getElementsByClassName('my_anchors');
ResponseMonitor.register(my_anchors); //clicking on the links initiates monitoring
//registering a single form
var my_form = document.getElementById('my_form');
ResponseMonitor.register(my_form); //the submit event will be intercepted and monitored
クライアント（JQuery）
$('.my_anchors').ResponseMonitor();
$('#my_form').ResponseMonitor({timeout: 20});
コールバックを持つクライアント（JQuery）
//when options are defined, the default spin.js integration is bypassed
var options = {
onRequest: function(token){
$('#cookie').html(token);
$('#outcome').html('');
$('#duration').html('');
},
onMonitor: function(countdown){
$('#duration').html(countdown);
},
onResponse: function(status){
$('#outcome').html(status==1?'success':'failure');
},
onTimeout: function(){
$('#outcome').html('timeout');
}
};
//monitor all anchors in the document
$('a').ResponseMonitor(options);
サーバー（PHP）
$cookiePrefix = 'response-monitor'; //must match the one set on the client options
$tokenValue = $_GET[$cookiePrefix];
$cookieName = $cookiePrefix.'_'.$tokenValue; //ex: response-monitor_1419642741528
//this value is passed to the client through the ResponseMonitor.onResponse callback
$cookieValue = 1; //for ex, "1" can interpret as success and "0" as failure
setcookie(
$cookieName,
$cookieValue,
time()+300, // expire in 5 minutes
"/",
$_SERVER["HTTP_HOST"],
true,
false
);
header('Content-Type: text/plain');
header("Content-Disposition: attachment; filename=\"Response.txt\"");
sleep(5); //simulate whatever delays the response
print_r($_REQUEST); //dump the request in the text file
その他の例については、リポジトリのexamplesフォルダを確認してください。