什麼是AJAX負載和history.pushState的推薦順序？

例如，在jQuery中，設置一個鏈接來加載某個區域，我應該在調用history.pushState之前加載內容嗎？什麼是AJAX負載和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），所以我不知道這被認爲是最佳實踐。

來源

2011-07-15 Max Nanasy

在這兩個示例中，當用戶點擊後退按鈕時，內容不會改變！因爲你的狀態改變處理程序中沒有任何東西。

從本質上講，你會想這樣做：

$('#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瀏覽器回退到哈希。

來源

2011-07-16 05:58:26 balupton

如果我正確理解此實現，您的答案意味着應該在內容加載之前推送歷史記錄。除了實現的一致性（即內容是響應並僅響應單個事件加載的），除了實現的一致性之外，有什麼特別的原因爲什麼這是可取的？ –

另外，在加載內容之前推送歷史記錄在更一般的情況下將不起作用，其中必須在服務器上確定推送的URL（例如，帶驗證的POST-REDIRECT-GET - 如果驗證成功，則推送新的URL，如果失敗，則不要推送任何URL）。 –

我傾向於認爲首先更新狀態，然後加載內容是要走的路，因爲這是網絡在過去20年中的工作方式，並打算工作。您導航到新頁面，狀態發生變化，您將加載新內容。內容可能是一個錯誤頁面。例如，如果我將狀態更改爲不存在的頁面，我希望內容成爲非現有狀態的404，而不是在當前工作狀態中顯示錯誤。 – balupton

什麼是AJAX負載和history.pushState的推薦順序？

回答

相關問題