새로 고침시 동일한 클라이언트 아약스 요청을 피하십시오.

Question

아약스 요청이 동일하여 중단되거나 다른 경고 조치가 취해질 수 있는지 테스트하고 싶습니다.

실제로 클라이언트는 몇 가지 양식 요소를 통해 요청을 변경 한 다음 새로 고침 버튼을 누를 수 있습니다.

나는 똑같은 요청을 잡으려고 애써왔다. 타이머 새로 고침 기능을 유지해야합니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 

    var current_request_id = 0; 
    var currentRequest = null; 
    var lastSuccessfulRequest = null; 

    function refreshTable() { 
     $('#select').html('Loading'); 
     window.clearTimeout(timer); 

     //MY CATCH FOR DUPLICATE REQUEST NEEDS WORK 
     if (lastSuccessfulRequest == currentRequest) 
     { 
      //currentRequest.abort(); 
      alert('Duplicate query submitted. Please update query before resubmission.'); 
     } 

     var data = { 
      "hide_blanks": $("#hide_blanks").prop('checked'), 
      "hide_disabled": $("#hide_disabled").prop('checked'), 
     }; 

     json_data = JSON.stringify(data); 

     current_request_id++; 
     currentRequest = $.ajax({ 
      url: "/calendar_table", 
      method: "POST", 
      data: {'data': json_data}, 
      request_id: current_request_id, 
      beforeSend : function(){ 
       if(currentRequest != null) { 
        currentRequest.abort(); 
       } 
      }, 
      success: function(response) { 
       if (this.request_id == current_request_id) { 
        $("#job_table").html(response); 
        $("#error_panel").hide(); 
        setFixedTableHeader(); 
       } 
      }, 
      error: function(xhr) { 
       if (this.request_id == current_request_id) { 
        $("#error_panel").show().html("Error " + xhr.status + ": " + xhr.statusText + "<br/>" + xhr.responseText.replace(/(?:\r\n|\r|\n)/g, "<br/>")); 
       } 
      }, 
      complete: function(response) { 
       if (this.request_id == current_request_id) { 
        $("#select").html("Refresh"); 
        window.clearTimeout(timer); 
        stopRefreshTable(); 
        window.refreshTableTimer = window.setTimeout(refreshTable, 10000); 

        lastSuccessfulRequest = currentRequest; 
       } 
      } 
     }); 
    } 




    //TIMER STUFF TO refreshTable() 
    //THIS SECTION WORKS FINE 
    var startDate = new Date(); 
    var endDate = new Date(); 
    var timer = new Date(); 
    function startRefreshTable() { 
     if(!window.refreshTableTimer) { 
      window.refreshTableTimer = window.setTimeout(refreshTable, 0); 
     } 
    } 
    function stopRefreshTable() { 
     if(window.refreshTableTimer) { 
      self.clearTimeout(window.refreshTableTimer); 
     } 
     window.refreshTableTimer = null; 
    } 
    function resetActive(){ 
     clearTimeout(activityTimeout); 
     activityTimeout = setTimeout(inActive, 300000); 
     startRefreshTable(); 
    } 

    function inActive(){ 
     stopRefreshTable(); 
    } 
    var activityTimeout = setTimeout(inActive, 300000); 
    $(document).bind('mousemove click keypress', function(){resetActive()}); 

</script> 


<input type="checkbox" name="hide_disabled" id="hide_disabled" onchange="refreshTable()">Hide disabled task<br> 
<br><br> 
<button id="select" type="button" onclick="refreshTable();">Refresh</button> 

Answer 1

나는 .ajaxSend 및 .ajaxSuccess 글로벌 핸들러의 전원을 사용하십시오.

우리는 ajaxSuccess를 사용하여 캐시를 저장하고 AjaxSend가 먼저 읽으려고 시도하고, 성공하면 요청의 성공 처리기를 즉시 트리거하고 곧 수행 할 요청을 중단합니다. 그렇지 않으면 ...

여기에서 보여준 것은 매우 순진하지만 기능적인 문제 해결 방법입니다. 이렇게하면 변경하지 않고도 모든 아약스 호출에 대해이 작업을 수행 할 수 있습니다. 이를 고려하여 실패를 고려하고 캐시 히트 요청의 낙태가 처리기 중단을 위해 전달되지 않도록해야합니다.

Answer 2

하나의 유효한 옵션은 여기에 JSON.Stringify() 개체에 해당하며 문자열을 비교하는 것입니다. 객체가 동일하면 결과로 직렬화 된 문자열이 동일해야합니다.

응답에서 이미 JSONified 문자열을 직접 사용하면 약간의 차이가있을 수 있으므로 테스트를 통해 다시 확인해야합니다.

또한 페이지로드간에 유지하는 방법을 알아 내려고 시도하는 경우 localStorage.setItem("lastSuccessfulRequest", lastSuccessfulRequest) 및 localStorage.getItem("lastSuccessfulRequest")을 사용하십시오. (그렇지 않다면 알려주세요. 나는 이것을 제거 할 것입니다.)