Javascript學習筆記－AJAX使用下更動URL，做個記錄

遇到個需求：使用AJAX的情況下，仍然能夠更動URL！

這主要是因應SEO的需求，因為這樣無法分辦哪頁最受歡迎，不過還真的得承認，我本來還強烈認為不可能，因為朋友及Google大神，看來真的行，不過似乎還是會有瀏覽器及上下頁的問題。

在這邊先做個紀錄。像使用ajax和history.pushState无刷新改变页面URL就寫的不錯。其中提到AJAX的問題

1. 可以无刷新改变页面内容，但无法改变页面URL
2. 为了更好的可访问性，内容发生改变后，通常改变URL的hash
3. hash的方式不能很好的处理浏览器的前进、后退等问题
4. 进而浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变
5. 但这种方式对搜索引擎很不友好
6. twitter和google约定了使用#!xxx（即hash第一个字符为!），搜索引擎进行支持。

要做到這個，分兩種做法

解法1：HTML 5有個History API可以解決瀏覽器上下頁記錄的問題。

例如使用ajax和history.pushState无刷新改变页面URL提到：
var state = { title: title, url: options.url, otherkey: othervalue }; window.history.pushState(state, document.title, url);
之後ajax時，因為state放在event的中，就可以直接用
window.addEventListener('popstate', function(e){ 

    if (history.state){ 

      var state = e.state; 

      //do something(state.url, state.title); 

    } 

}, false);
在javascript中操作上下頁，可用
window.history.forward()或window.history.back()。

改變URL後要用replaceState讓history知道
state.url = '/another_url';
window.history.replaceState( state, state.title, “/another_url”);

解決2：利用hash

Javascript中的windows.loaction中有個hash（錨點），讓它保持在這個頁面時，也能利用到上下頁按鈕。

例如 目前在http://xxx.com/
則用  location.hash = 'yyy';

這樣就可以了。不過瀏覽器版本要

1. IE8以上
2. FireFox 3.6以上
3. Chrome 5以上
4. Opera 10.6以上
5. Safari 5.0以上

解法3：用hashchange plugin。

參考網址：
Update URL on AJAX call?
使用ajax和history.pushState无刷新改变页面URL
HTML5: Changing the browser-URL without refreshing page
Update URL after jQuery AJAX pull

Change URL from Javascript like facebook does
Modify Address Bar URL in AJAX App to Match Current State

看HTML5是否支援及HTML5有支援版本：Check here for what browsers support each standard