Question

我试图中止所有以前加载页面的ajax请求。但是我有一些困难让它发挥作用。

我使用jquery ajaxify来激活我的网站（https://github.com/browserstate/ajaxify）。但是这个脚本并没有中止以前的ajax请求。如果我快速加载几个页面，我可以看到所有前面的页面内容都附加了然后重新附加....有时附加的数据不是最后一个......

这里是剧本：

(function(window,undefined){

    $(function(){

        var xhr = null;

        $.fn.ajaxify = function(){
                // Prepare
            var $this = $(this);
                // Ajaxify
            $this.find('a').click(function(event){
                // Prepare
                var $this = $(this),
                    url = $this.attr('href'),
                    title = $this.attr('title')||null;

                History.pushState(null,title,url);
                event.preventDefault();
                return false;
            });
            return $this;
        }

        $body.ajaxify();

        $window.bind('statechange',function(){
                // Prepare Variables
            var State = History.getState(),
                url = State.url,
                relativeUrl = url.replace(rootUrl,'');

            if (xhr) {
                xhr.abort();
            }

            xhr = $.ajax({
                url: url,
                beforeSend: function() {},
                success: function(data) {/*append data*/},
                error: function(jqXHR, textStatus, errorThrown){
                    document.location.href = url;
                    return false;
                }
            });

        });

    });


})(window);

编辑：当我中止时，整个网站重新加载没有ajax的页面。我只需要加载最后一个链接点击并中止所有以前的必需品ajax请求，以保留ajax功能。

我如何中止这种状态转换？

Answer 1

问题在于，当我们对Ajax进行Abort时...它会触发textStatus = abort错误。在您的情况下，您正在更改location.href，从而导致重新加载。您可以通过alert或console.log对textStatus

进行验证

解决方案：在错误处理程序中，确保textStatus不会中止。

 xhr = $.ajax({
         url: url,
         beforeSend: function() {},
         success: function(data) {/*append data*/},
         error: function(jqXHR, textStatus, errorThrown){
            // aborting actually triggers error with textstatus=abort            
            if (textStatus != "abort") { 
               document.location.href = url;
               return false;
            }
         }
  });

jquery中止所有以前的ajax请求

1 个答案: