AJAX load 和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 浏览器。