나는 까다로운 답변에 설명 된 것과 유사한 기술을 구현하는 간단한 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
더 많은 예제를 보려면 리포지토리 의 예제 폴더를 확인하십시오 .