pjax再也不神秘，hash、state那点事

初步理解

若是最近打电话给武汉的小伙伴，他说信号很差，那么相信我，他确定不是真的信号很差，也不是不想和你说话，而是他可能在冰箱里。。。武汉的天气历来都是喜怒无常的，是吧，屌丝气十足，今年也是丝毫看不出有任何逆袭的迹象和可能性，固然咱也不必去操那个心；好吧，其实你把他看做是我也是能够的；不要联想，赶快进入正题；

JS能一路从小丑变为白天鹅，跟ajax技术的风靡有莫大的关系，伴随H五、ES六、Nodejs的发展与普及，不断将前端推向新的高度，现在JS的地位如日中天啊！

用过backbone、Angular、React这些框架的确定对前端路由都不陌生，而他们基本上都是经过监听hash的变更来更新和切换视图的，固然React还支持browserHistory，也就是pjax的重点pushState，属于H5的范畴，除了BSIE，兼容性就很少说了；pjax=pushState+ajax，ajax都不陌生，那么揭开pjax的神秘面纱，搞懂pushState就是咯，恩，为了保持信心，先这么认为吧；

若是仍是不太清楚pjax究竟是作什么的，那么只好这么说了：改变URL（不是hash），局部刷新（ajax）；

若是依然不太明白，那只多是由于思惟定式了，对于前端来讲，通常都知道改变URL（不是hash），页面必定会刷新的，而pushState就是要让你知道，No！改变URL也能够只刷新局部！

基本实现

1. HTML5 API

实现pjax其实并不难，好比jquery.pjax.js，已有现成的API供你直接使用；只是最近无心中发现国内有几个站点已经开始使用pjax技术了，页面体验很是好；而我刚入门React，不想搭着Jquery一块儿用，只好本身造个ajax的轮子用着，而后天然就想到了这个轮子应该包含pjax；而后发现本身太年轻了，固然有想法是好的；

实现pjax主要要用到H5 history的几个API：pushState(data,str,url)，replaceState(data,str,url)，onpopstate事件；onpopstate会在用户点击浏览器上的前进后退或者程序的history.go(s)触发，这时history.state的值即对应为pushState中data的值，这样看来，data是能够缓存ajax拉取过来的数据的，不过别高兴的太早，它有大小限制的——640K；反正都是H5，localStorage够用吧！

2. localStorage缓存

虽说Redux起初挺很差理解的，不过说真的，这套作法仍是很是不错的，好比，能够借鉴Redux的状态容器机制，咱也构造一个容器保存全部pushState时的数据，以URL为参考，同时用localStorage缓存起来，若是非要将localStorage的存储时间加个期限，我想能够参考：《localStorage也能够限时保存登陆信息》；action就是判断是否支持pushState，取消a连接的默认跳转等pjax转化操做；reducer就是先判断该连接地址对应的缓存是否存在来决定是否由ajax GET请求该a连接对应的href，将返回的数据用localStorage保存或更新；dispatch(action)即将数据填充到对应containor；本身实现固然显麻烦，好吧，仍是用jquery.pjax.js吧；

3. 真实面目

pushState会向浏览器历史记录写入一条记录，同时用传入的url替换当前浏览器上的URL，那么pjax其实就是掩人耳目、花拳绣腿的改个URL，最终仍是ajax了，是吗？若是你也这么想，那么你真的是天真又可爱，由于对前端而言，咱要作的就是掩人耳目式的修改个URL，而后局部刷新；

4. 服务端改造

既然是掩人耳目式的修改URL，那么如何面对主动刷新后404的现实呢？因此前面说了，要保持信心；固然接下来要作的是后端的事，暂且将pjax的请求统一为与页面刷新时同样的GET请求吧（具体请求方式需先后端协商），前端在pjax请求上加个标记让后端知道该次为pjax请求只需返回一个片断或json，这个标记能够是setHeader或请求参数里加个pjax=1之类的，后端判断这个标记来肯定返回一个完整页面仍是返回局部内容或局部内容的数据json，这样就可确保pjax后的URL刷新后不是404；

//pjax请求带pjax header
$.ajax({
    url:a.attr('href')ajaxUrl,
    type:'GET',
    headers:{pjax:true},
    success:function(data){
        //localStorage ...
        history.pushState('','',url);
        //containor 填充
    }
});

//Nodejs
app.get(path,function(req,res,next){
    var pjax=req.headers['pjax'];
    if(pjax){
        //...
        res.json({
            data:page_content
        });
    }else{
        //...
        res.send(page);
    }
});

这样看来，其实并无想象那么复杂，我想，不是对IE789有特别要求的，均可以考虑使用，为了兼容也能够先判断是否支持pushState，决定是否将连接转化为pjax；这种事前端作的太多了，何乐而不为呢？

就这兼容性。。。。。。你 si bu si sa

原文来自：花满楼（http://www.famanoder.com/boke...）