為什麼會有HTML5 histroy API? ajax帶來那些缺點? 早期如何解決? 現在的做法?

1. HTML5 history API

2. ajax(Asynchronous JavaScript and XML)
潮潮 Der
過去 現在
一切看似完美，但其中造成一些問題

3. ajax 帶來哪些問題?
SEO
破壞瀏覽紀錄
資料驗證
{JS}HI
123
HTML5 history API，因此誕生

4. 過去作法
瀏覽器記錄歷史紀錄條件? URL 改變 (iframe 或 當前頁面) => window.history
https://www.google.com.tw/webhp?sourceid=chrome-instant&ie=UTF-8#q=javascript%20icon
協定 host pathname search hash
解析URL
window.location.href

5. URL HASH
index.html => apple => banana
使用者瀏覽
HASH "" #page1 #page2
js onload() location.hash="#page1" location.hash="#page2"
上一頁 window.onhashchange=function() {
switch(window.location.hash)
{
case "#page1":
page1();
break;
case "#page2":
page2();
break; }
Refresh?
題外話：SEO?

6. HTML5 history API
window.history
pushState(state, title, url) 加入歷史紀錄
replaceState(state, title, url) 修改當前紀錄
window.onpopstate=function(event){} 更動歷史紀錄時觸發
state
state
state
………………………….

7. HTML5 history API
index.html => apple => banana
使用者瀏覽
URL "" domain/apple
js onload() pushstate({page:"page1"}, "", "/apple")pushstate({page:"page1"}, "", "/apple")
domain/apple
上一頁 window.onpopstate=function(event){
switch(event.state.page)
{
case "page1":
page1();
break;
case "page2":
page2();
break; }
}
Refresh?
xmlhttp.setRequestHeader("pjax", true);
pushstate+ajax=PJAX

8. Reference
http://sls.weco.net/blog/ie955126/25-dec-2008/11896 (ajax 優缺)
http://rettamkrad.blogspot.tw/2013/04/ajaxandhistoryapi.html (ajax 瀏覽紀錄)
https://developers.google.com/webmasters/ajax-crawling/docs/getting-started (google ajax
crawable)
https://developer.mozilla.org/zh-
TW/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Manipulating_the_browser_histo
ry
HTML5 history API

9. Ｑ＆Ａ