從history.js中的URL到ajax調用

Question

我正在寫一個小型網站，其中有幾個頁面非常相似。 大多數時候，只有一個div的內容是不同的。 導航，標題等保持不變。

因此，我通過一個“基本” html文件，一些較小的html文件（僅由content-div和javascript代碼（通過按鈕click事件觸發））實現了這一點：

$.get("content/text1.html", function(data) {
    $("#content").html(data);
});

這樣做非常順利，但是問題是，地址欄中的url不會隨那種請求而改變。 因此，用戶無法鏈接到某些頁面。 我知道有可能使用＃-urls，但是我想使用以下URL：

example.com/talks/foo/bar

而不是一些解決方法。

在另一個線程中，有人給了我html5瀏覽器歷史記錄api（特別是history.js ）的提示。

我想要達到的目標：

1. 有人點擊按鈕->觸發了ajax請求，並且content-div的內容被更新->網址被更新為example.com/talks/foo/bar
2. 如果有人直接在瀏覽器中請求example.com/talks/foo/bar ，則應執行與（1）中相同的ajax請求和內容更新

我嘗試通過以下方法實現第一個：

$.get("content/text1.html", function(data) {
    $("#content").html(data);
    History.pushState(null, null, "content/text1.html"); 
}); 

但是我應該如何達到第二點呢？ 使用重寫器，可以將所有內容重定向到base-html文件和其中的一些js-logic來解碼url並觸發ajax請求？

我有種感覺，我走錯了路。

---

• 那是history.js應該使用的方式嗎？

• 如何達到第二個要點？

Answer 1

要在html5瀏覽器中獲得初始狀態，不需要ajax調用。 就像您說的那樣，URL本身會更改，而不是哈希，因此服務器應使用已加載的正確內容來答復URL。

您應該在statechange事件處理程序中進行所有的ajax調用和DOM操作。

因此，當用戶單擊鏈接時，您要做的就是調用pushState和處理程序，DOM在statechange事件處理程序中發生更改。 這工作，因為statechange時被觸發pushState調用。