标签：
1.html5 history api适用场景，个人理解最大的用处是配合ajax使用，使ajax拥有回退、前进的用户体验。
2.代码(dive into html5中的一个小例子)
1）fer.html
<!DOCTYPE html> <html> <head> <title>history api test</title> </head> <body> <aside id="gallery"> <p class="photonav"> <a id="photonext" href="casey.html">Next ></a> <a id="photoprev" href="adagio.html"><Previous</a> </p> <figure id="photo"> <img id="photoimg" src="gallery/1.jpg" alt="fer" width="500" height="375"> <figcaption>Fer.1972</figcaption> </figure> </aside> <script> function setupHistoryClicks(){ addClicker(document.getElementById("photonext")); addClicker(document.getElementById("photoprev")); } function addClicker(link){ link.addEventListener("click",function(e){ swapPhoto(link.href); history.pushState(null,null,link.href); e.preventDefault(); },false); } function swapPhoto(href){ var req=new XMLHttpRequest(); req.open("GET",href.split("/").pop(),false); req.send(null); if(req.status==200){ document.getElementById("gallery").innerHTML=req.responseText; setupHistoryClicks(); return true; } return false; } setupHistoryClicks(); window.addEventListener("popstate",function(e){ swapPhoto(location.pathname); }) </script> </body> </html>
2)casey.html
<aside id="gallery"> <p class="photonav"> <a id="photonext" href="adagio.html">Next ></a> <a id="photoprev" href="fer.html"><Previous</a> </p> <figure id="photo"> <img id="photoimg" src="gallery/casey.jpg" alt="casey" width="500" height="375"> <figcaption>casey.1972</figcaption> </figure> </aside>
3) adagio.html
<aside id="gallery"> <p class="photonav"> <a id="photonext" href="fer.html">Next ></a> <a id="photoprev" href="casey.html"><Previous</a> </p> <figure id="photo"> <img id="photoimg" src="gallery/1.jpg" alt="fer" width="500" height="375"> <figcaption>adagio.1972</figcaption> </figure> </aside>
标签：
原文地址：http://www.cnblogs.com/sunxuejiao/p/5426813.html
