# HTML5 : History API
### History API
> ##### 可以在不刷新頁面的前提下動態改變瀏覽器地址欄中的URL地址，動態修改頁面上所顯示資源。
#### window.history 的方法和屬性
> ##### 方法：`back()``forward()``go()`
> 屬性：`length`
~~~
//返回
window.history.back()
window.history.go(-1)
//向前跳轉
window.history.foward()
window.history.go(1)
//歷史記錄中頁面總數
history.length
復制代碼
~~~
#### HTML5 新方法：添加和替換歷史記錄的條目
##### pushState
> ##### `history.pushState(state, title, url);`添加一條歷史記錄，不刷新頁面
##### 參數
> ##### `state`: 一個于指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數中。如果不需要這個對象，此處可以填null。
> `title`: 新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這里可以填null。
> `url`: 新的網址，必須與前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。
###### 創建2個文檔,demo.html和index.html,更改它們的title為對應的名字，并在body里輸入文檔名字作為內容標記文檔。
~~~
//index.html
history.pushState(null, null,'./demo.html')
復制代碼
~~~
> ##### 瀏覽器沒有刷新加載demo.html，只是更改瀏覽器地址欄地址
~~~
//index.html
history.pushState(null, null,'./demo.html')
history.pushState(null, null,'./inexistence.html')
復制代碼
~~~
> ##### 不會檢查inexistence.html是否存在
##### 應用--添加hash值，頁面只局部加載
~~~
//index.html
history.pushState(null, null,'#one')
復制代碼
~~~
##### replaceState
> ##### `history.replaceState(state, title, url);`替換當前的歷史記錄，不刷新頁面
~~~
//demo.html
history.replaceState(null, null,'?one')
復制代碼
~~~
> ##### 當前的歷史記錄`http://localhost/class/demo.html`被替換為`http://localhost/class/demo.html?one`
#### 事件
> ##### 1.`popstate`事件：歷史記錄發生改變時觸發，調用`history.pushState()`或者`history.replaceState()`不會觸發popstate事件
> 2.`hashchange`事件：當頁面的`hash`值改變的時候觸發，常用于構建單頁面應用。
#### 應用
> ##### 點擊botton，content區出現對應的內容，通過瀏覽器返回按鈕可以返回上一個內容頁面。
###### HTML
~~~
<div class="wrapper">
<div class="header">
<!-- 設置data值標記每個地址 -->
<button data="first">first</button>
<button data="second">second</button>
<button data="third">third</button>
</div>
<div class="content">
<div class="item">first</div>
</div>
</div>
復制代碼
~~~
###### JS
~~~
var item = document.getElementsByClassName('item')[0];
var header = document.getElementsByClassName('header')[0];
var page = '';
function init(){
//替換頁面的歷史記錄，并把{newPage : 'first'}傳入這條歷史記錄下,方便后期popstate調用
history.replaceState({newPage : 'first'}, null, '?first');
ajax('GET','./getContent.php','page=first', doData, true)
}
init();
function doData(data){
//將ajax獲取的數據插入到item元素節點里面
item.innerHTML = data;
}
header.addEventListener('click', function(e){
page = e.target.getAttribute('data');
history.pushState({newPage : page}, null, '?'+page);
ajax('GET', './getContent.php','page='+page, doData, true);
})
//當頁面前進與后退的時候，popstate監聽歷史記錄變化，觸發對應頁面的ajax請求。
window.addEventListener('popstate', function(e){
// console.log(e)
var newPage = e.state.newPage;
ajax('GET', './getContent.php','page='+newPage, doData, true);
})
復制代碼
~~~
###### php
~~~
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$page = $_GET['page'];
if($page == 'first'){
$data = 'first third';
}else if($page == 'second'){
$data = 'second third';
}else if($page == 'third'){
$data = 'third third';
}
echo"{$data}";
~~~
