javascript - 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 浏览器回退到哈希。