Question

我想测试ajax请求是否相同，以便可以中止或采取其他一些警报措施？

实际上，客户可以通过几个表单元素更改请求，然后点击刷新按钮。

我在抓住相同的请求方面做得很差。需要保持计时器刷新功能。

<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将首先尝试读取它，如果成功，它将立即触发请求的成功处理程序，并中止即将完成的请求。否则它会让它成为......

var ajax_cache = {};
function cache_key(settings){
    //Produce a unique key from settings object;
    return settings.url+'///'+JSON.encode(settings.data);
}
$(document).ajaxSuccess(function(event,xhr,settings,data){
    ajax_cache[cache_key(settings)] = {data:data};
    // Store other useful properties like current timestamp to be able to prune old cache maybe?
});
$(document.ajaxSend(function(event,xhr,settings){
    if(ajax_cache[cache_key(settings)]){
        //Add checks for cache age maybe? 
        //Add check for nocache setting to be able to override it?
        xhr.abort();
        settings.success(ajax_cache[cache_key(settings)].data);
    }
});

我在这里展示的是一种非常天真但功能齐全的解决方案。这样做的好处是可以为您可能拥有的每个ajax调用工作，而无需更改它们。您需要在此基础上进行构建以考虑故障，并确保来自缓存命中的请求的中止不会被分派到中止处理程序。

Answer 2

这里的一个有效选项是JSON.Stringify()对象并比较字符串。如果对象相同，则生成的序列化字符串应该相同。

如果您直接从响应中使用已经JSONified的字符串，可能会出现略有差异的边缘情况，因此您必须通过测试进行双重检查。

此外，如果您试图找出如何在页面加载中保留它，请使用localStorage.setItem("lastSuccessfulRequest", lastSuccessfulRequest)和localStorage.getItem("lastSuccessfulRequest")。（如果没有，请告诉我，我会删除它。）

避免在刷新时使用相同的客户端ajax请求

2 个答案: