HTML5學習筆記之History API_html5教學技巧

一，開頭分析

好了，廢話不多說，直接進入今天的主題，今天主要講的是“History API”及在單頁應用中的作用，並且會引入一個實際的例子做為講解的原型範例，先來看看「History API」：

　　為了提高Web頁面的回應速度，越來越多的開發者開始採用單一頁面結構（single-page application）的解決方案。所謂的單頁結構是指多個頁間切換時，不刷新當前整個頁面，更新頁面展示數據，並且相應地改變地址欄中的url，以使用戶可以分享這個url。

　　如果你使用chrome或firefox等瀏覽器訪問"github.com、plus.google.com"等網站時，細心的你會發現頁面之間的點擊是透過ajax異步請求的，

同時頁面的URL發生了改變。並且能夠很好的支援瀏覽器前進和後退。是什麼有這麼強大的功能呢？恩，這就會說到今天的主角，HTML5裡引用了新的API：

“history.pushState”和“history.replaceState”，就是透過這個介面做到無刷新改變頁面URL的。先來看看"history"介面的詳細方法：

複製程式碼

程式碼如下:

interfacetory { readonly attribute any state;
void go(optional long delta);
void back();
void forward();
void pushState(any optional( DOMString? url = null);
void replaceState(any data, DOMString title, optional DOMString? url = null);
};

（二），重點API說明

　　在這裡說明一點："window.history.replaceState"和"window.history.pushState"類似，不同之處在於replaceState不會在window.history裡新增歷史記錄點，其效果類似於window.location .replace(url)，都是不會在歷史記錄點裡新增一個記錄點的。當你為了回應使用者的某些操作，而要更新目前歷史記錄條目的狀態物件或URL時，使用replaceState()方法會特別適合。

（三），引入實例

　　今天說說單頁應用中我們通常會這樣做，有一個菜單列表，點擊相關菜單項目然後動態加載相關模組，所有方式都是基於異步請求的，美中不足是，我們會發現地址欄不會有任何變化，以及瀏覽器中的前進和後退操作也不會有任何響應，這對用戶不是很友好，所以為了解決這個問題“History”就有用武之地了，那麼如何做到的那？不急先看一下例子中的效果圖展示，然後一步步分析,如下所示：

　　以下是監測數據，相同的url再次刷新不會重複請求。

　　我們整理一下流程：

　　　　頁首次載入，雖然我們造訪的URL是"

http://localhost:8888/bbSPA.html"，但是，實際URL確是：

"

http://localhost:8888/bbSPA.html#shanghai"，」history.replaceState「完成了初始化url切換工作，並且初始做了加載

"shanghai.data"的資料工作，滑鼠點擊左邊的任一個選單項，右側內容是Ajax載入，並且頁面的URL隨之改變，例如，點擊北京。

此時，我們點擊網址列的後退按鈕，又回到了上海，並且顯示內容。原理很簡單，就是透過監聽」window.onpopstate「，達到了自由切換的功能。

好了！其實很簡單大家也嘗試自己實作一下，以下是完整程式碼：

　　（1），html部分代碼　　

複製程式碼程式碼如下:

bbSPA測試頁

---

id ="list "
style="float:left;
list-style:none;"
>

北京 li>

上海

深圳

廣州

< ;a href="#tianjin">天津

id="content-main"
style= “左邊距：50px；
浮動：左；
寬度：220px；
邊框：1px實心#ccc；
高度：120px；
顏色：#ff3300;”
>