什么是AJAX负荷和history.pushState的推荐排序？

Question

举例来说，在jQuery中，建立链路负载的东西进入的区域，我应该加载调用history.pushState之前的内容？

$('#link').click(function () {
    $('#region').load('regionContent', function () {
        history.pushState(null, null, 'newUrl');
    });
    return false;
});

或者我应该调用加载后history.pushState内容？

$('#link').click(function () {
    history.pushState(null, null, 'newUrl');
    $('#region').load('regionContent');
    return false;
});

前者似乎最好给我，因为我觉得URL应该不会改变，直到内容的做法，但我已经看到后者更经常地（例如https://github.com/blog/760-the-tree-slider），所以我不知道这被认为是最好的做法。

Answer 1

随着双方你的例子，当用户点击后退按钮是不会的内容改变！当你没有得到你的状态变化处理程序中任何东西。

从本质上讲，你会想这样做：

$('#link').click(function () {
    History.pushState(null,null,'newUrl');
});
$('body').bind('statechange',function(){
    $('#content').load(History.getState().url);
});

这将使得它，当你点击一个链接时，页面的状态将改变，并给定你的页面的状态已经改变，它将在新的内容加载。在浏览器中点击后退按钮，也将导致状态发生变化，从而在新的内容加载。

现在，这里我用History.js的statechange和History.getState().url而不是本地popstate和State.url为不同的浏览器会火在不同时间的状态变化事件。比如Safari浏览器在页面加载时，在Chrome和Firefox没有状态改变事件 - 在Safari中导致您的内容加载的两倍。 History.js提供在所有浏览器一致的API，如果您回落至哈希希望甚至HTML4浏览器。