前几天帮同学改了一下一个管理系统前端部分，整个页面布局就是 header 和 footer 固定，左边为导航栏，右边为内容显示栏··· 他之前是用iframe来实现的，但是这样导致每次点击导航栏部分都会重新刷新整个页面，每个页面都有很多内容重复，这样显得性能不佳···
这样一来就必须用到异步刷新了，也就是用 ajax 来加载右边内容栏，用ajax的内容不必多说···对前端有所了解的应该都会了···
但是ajax同时也有坏处：
1、 载入页面 与 原页面 共享整个资源，A页面中载入B页面的内容，即如果B页面中也有js代码且变量方法与A中相同 可能也会触发A页面的某些事件，造成冲突，不过幸好之前他的js变量、方法名都是经过特别设置的，我不需要为这个操心···
2、无法前进后退···· 虽然是无刷新操作，但是URL不会改变···
一、pushstate用法
幸好H5中加入了pushstate属性，这样就可以轻松实现前进后退了···
语法：
1 history.pushState(state, title, url);
就创建了一个新的由 state, title, 和 url 设定的浏览器历史记录···· 浏览器在调用pushState()方法后不会去加载这个URL，只是将其塞到浏览器历史中。如果你在点击事件中每次都调用pushstate，当换着点击几次之后，你点 前进 后退 会发现URL的地址会随着改变···但是 右边的内容并不会改变····
pushstate只是改变history 的记录，并不负责记录每个URL的页面内容状态···
二、popstate
此时就该 popstate 起作用了，每次前进后退都会触发popstate事件，所以可以通过绑定popstate事件，就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入，实现Ajax的前进与后退效果。 当然还有个 history.replaceState方法，它与pushstate类似，不过是改变当前URL，并不会塞到浏览器历史中···可以在页面刚载入的时候使用这个方法···
三、代码示例
点击事件
1 var eleMenus = $(".left a").click(function(e){
2 e.preventDefault();
3
4 if(history.pushstate)
5 { /* ajax载入~~ */
6
7 var title = $(this).text();
8
9 document.title=title;
10
11 if (event && /\d/.test(event.button))
12 { history.pushState({title:title},title,"?"+this.href.split("/")[3]); /*这里要判断一下到底是触发点击事件，还是鼠标点击事件，不然会成死循环*/ } }
13
14 return false;
15 }）
popstate事件
1 var pageTrigger= function(target) {
2
3 var query=location.href.split(‘?‘)[1], eleTarget = target || null;
4 if(typeof query == "undefined") {
5 if(eleTarget=eleMenus.get(1)) {
6 history.replaceState(null, document.title, location.href.split("#")[0] +"?"+eleTarget.href.split("/")[3] );
7 console.log(eleTarget.href);
8 pageTrigger(eleTarget); //直接触发click事件
9
10 }
11 }
12 else {
13 eleMenus.each(function(){
14 //为popstate 事件准备的····
15
16 if (eleTarget === null && this.href.split("/")[3] === query) {
17 eleTarget = this;//popstate到之前的页面，必须要触发相应的点击事件，所以确定是那个a元素
18 }
19 });
20
21 if (!eleTarget) { //如果当前元素仍不存在,利用replaceState 将初始页面换到当前url，再次调用 从头开始
22
23 history.replaceState(null, document.title, "base.html");
24 pageTrigger();
25 } else {
26 console.log(eleTarget);
27 $(eleTarget).trigger("click");
28 }
29
30
31 }
32 }
33 if (history.pushState) { //如果浏览器支持history的pushstate属性,在前进后退的时候直接触发pageTrigger事件
34 window.addEventListener("popstate", function() {
35 pageTrigger();
36
37 });
38 // 默认载入
39 pageTrigger();
40 }
现在有 jquery ajax + pushstate 的插件=pjax，pjax是一种基于ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。pjax是ajax+pushState的封装，同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。