关于在Ajax中使用pushstate

     前几天帮同学改了一下一个管理系统前端部分，整个页面布局就是 header 和 footer 固定，左边为导航栏，右边为内容显示栏···  他之前是用iframe来实现的，但是这样导致每次点击导航栏部分都会重新刷新整个页面，每个页面都有很多内容重复，这样显得性能不佳···

    这样一来就必须用到异步刷新了，也就是用 ajax 来加载右边内容栏，用ajax的内容不必多说···对前端有所了解的应该都会了···

    但是ajax同时也有坏处：

     1、 载入页面 与 原页面 共享整个资源，A页面中载入B页面的内容，即如果B页面中也有js代码且变量方法与A中相同 可能也会触发A页面的某些事件，造成冲突，不过幸好之前他的js变量、方法名都是经过特别设置的，我不需要为这个操心···

    2、无法前进后退····  虽然是无刷新操作，但是URL不会改变···

   

 一、pushstate用法  

 幸好H5中加入了pushstate属性，这样就可以轻松实现前进后退了···

语法：

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，并不会塞到浏览器历史中···可以在页面刚载入的时候使用这个方法···

三、代码示例

   点击事件

var eleMenus = $(".left a").click(function(e){
     e.preventDefault();

  if(history.pushstate) 
{   /*   ajax载入~~  */  
  
   var title = $(this).text(); 

 document.title=title; 

 if (event && /d/.test(event.button)) 
{  history.pushState({title:title},title,"?"+this.href.split("/")[3]); /*这里要判断一下到底是触发点击事件，还是鼠标点击事件，不然会成死循环*/   }  } 

 return false;  
}）

popstate事件

   

var  pageTrigger= function(target) {
    
    var query=location.href.split('?')[1], eleTarget = target || null; 
    if(typeof query == "undefined") {
        if(eleTarget=eleMenus.get(1)) {
            history.replaceState(null, document.title, location.href.split("#")[0] +"?"+eleTarget.href.split("/")[3] );  
            console.log(eleTarget.href);
            pageTrigger(eleTarget);  //直接触发click事件
            
        } 
     }
    else {
        eleMenus.each(function(){ 
              //为popstate 事件准备的····

           if (eleTarget === null && this.href.split("/")[3] === query) {
              eleTarget = this;//popstate到之前的页面，必须要触发相应的点击事件，所以确定是那个a元素
          }
      });  

         if (!eleTarget) {  //如果当前元素仍不存在,利用replaceState 将初始页面换到当前url，再次调用 从头开始

            history.replaceState(null, document.title, "base.html");    
            pageTrigger();
        } else {
             console.log(eleTarget);
             $(eleTarget).trigger("click");
        }
    

   }
}
if (history.pushState) { //如果浏览器支持history的pushstate属性,在前进后退的时候直接触发pageTrigger事件
    window.addEventListener("popstate", function() {
        pageTrigger();   
                                                             
    });  
    // 默认载入
    pageTrigger();
}

   现在有 jquery ajax + pushstate 的插件=pjax，pjax是一种基于ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。pjax是ajax+pushState的封装，同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。