Javascript AJAX load and history.pushState的建议顺序是什么？

例如，在jQuery中，设置一个链接以将内容加载到区域中，我应该在调用history.pushState之前加载内容吗

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

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

还是应该在调用history.pushState后加载内容

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

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

---

前者对我来说似乎更可取，因为我觉得URL在内容改变之前不应该改变，但我更经常看到后者（例如），所以我想知道哪一种被认为是最佳实践。

对于您的两个示例，当用户点击后退按钮时，内容不会改变！因为您的状态更改处理程序中没有任何内容

基本上，您需要这样做：

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

这将使它在你点击一个链接时，你的页面状态将发生变化，并且鉴于你的页面状态已发生变化，它将载入新内容。点击浏览器中的“后退”按钮也会导致状态更改，从而加载新内容

---

现在我使用的是

statechange

和

History.getState（）.url

而不是原生的

popstate

和

State.url

，因为不同的浏览器会在不同的时间触发状态更改事件。例如，safari会在页面加载时触发状态更改事件，chrome和firefox没有的地方-导致safari中的内容加载两次。History.js在所有浏览器中都提供了一致的API，如果您希望HTML4浏览器也使用散列法。

如果我正确理解此实现，您的回答意味着应该在加载内容之前推送历史。除了实现的一致性（即，加载内容是为了响应单个事件，并且仅响应单个事件）之外，是否有任何特定的原因使其更可取？此外，在加载内容之前推送历史记录在更一般的情况下不起作用，在这种情况下，必须在服务器上确定要推送的URL（例如，带有验证的POST-REDIRECT-GET——如果验证成功，则推送新URL，如果失败，则不推送任何URL）。我倾向于认为先更新状态，然后加载内容是一种方式，因为这是过去20年来web一直采用的工作方式，也是它打算采用的工作方式。您导航到一个新页面，状态会发生变化，您会加载新内容。不管是什么，内容可能是一个错误页面。例如，如果我将状态更改为一个不正确的页面如果存在，我希望内容在不存在状态下变成404，而不是在当前工作状态下显示错误。