Hashbang與URI解析

Question

我正在尋找將我的網站移動到完全異步文檔加載，但我不想使用請求處理的#!方法，因爲1）我不想斷開鏈接，2）我想要更靈活的方式來處理網站獲得的URI。

我已經能夠爲我的網站構建一個輕型MVC，它允許使用通用樣式的網址（例如：http://ddrewdesign.com/blog/jquery-is-or-is-child-of-function）來提出正確的請求。

我的問題是：這很容易做到。我錯過了什麼？爲什麼Gawker和Google選擇#!，這種方法似乎從用戶體驗角度來看更有意義？

編輯

爲了澄清，原來，我的網站是使用單獨的檢索請求的查詢字符串方法（無mod_rewrite）。這些鏈接遍佈整個網絡，我不能讓它們斷裂。這是我的理解，他們會，如果我移動使用hashbang方法。再一次：這可能是我混亂的一部分，所以我不是說我已經解釋了一切。我在問我錯過了什麼，因爲到目前爲止我沒有看到任何東西讓我看起來像我可以容納那個查詢字符串。

Answer 1

我認爲你正在尋找history.pushState網址，它允許你做部分網頁加載，並有和沒有JavaScript的相同的網址。

例如，假設您的基本網址http://site.com/隨着history.pushState，您可以使用JavaScript來修改頁面是javascript.htm，使URL改變http://site.com/javascript.htm。

#!網址只能使用javascript，因爲#fragment無法訪問服務器端。隨着hashbangs，你的網址將是類似於http://site.com/#javascript.htm請注意，!是不必要的。由於您可以在散列之後設置任何內容，因此您也可以使用url http://site.com/#!/javascript.htm。

不幸的是，由於IE不支持history.pushState，所以你必須有#!的url作爲後備。

這兩種方法都沒有打破後退按鈕，但必須爲每種方法設置不同的方式。

Hashbangs工作是這樣的：

function change(){ 
    //page update logic 
} 

//hashchange event binding 
(typeof window.addeventListener === "function") 
    ? window.addEventListener("hashchange", change, false) 
    : window.attachEvent("onhashchange", change); 

//This is how the hash is set 
location.hash = "hashstring"; 

//Accessing it returns the hashstring, with a # 
location.hash; //returns #hashstring 

History.pushState是更復雜一點，因爲你存儲在一個對象的頁面的「狀態」。

下面是關於這種方法的一些很好的參考：

• JavaScript權威指南第6版
• https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
• http://diveintohtml5.ep.io/history.html

兩種方法都需要JavaScript頁面操作。我有這種類型的網址的例子。 http://timshomepage.net/comic/已鏈接到一堆不同的webcomics，並將它們嵌入到頁面中的iframe中。在禁用javascript的情況下，該鏈接將類似http://timshomepage.net/comic/dilbert。隨着history.pushState，我可以有相同的網址。隨着hashbang後備，我得到這樣的網址：http://timshomepage.net/comic/#!/dilbert