［经验总结］pushState＋ajax应用

Tony 发布于2019-08-19 17:13 / 1943人阅读

摘要：在即将度过试用期的时候，借着今天学习的文章，整理一下前段时间做用户主页时用到的。近期我站的个人主页改版，将用户发布的各类作品放到一个页面上切换，附加筛选功能。在做筛选及翻页的过程中，我们用到了。

在即将度过试用期的时候，借着今天学习的文章，整理一下前段时间做用户主页时用到的pjax。

近期我站的个人主页改版，将用户发布的各类作品放到一个页面上切换，附加筛选功能。
在做筛选及翻页的过程中，我们用到了pjax。即通过ajax获取数据，然后改变url链接，这样用户可以前进后退。就像这样→

上面的二级导航就是筛选用哒～

这个就是翻页。

翻页是由php直接渲染的，所以里面的链接也是php回传的。在筛选之后ajax回传数据里面，也带了翻页的数据，就可以直接添到里面。因为pushState和replaceState不能很好的兼容低版本IE，这里我们用了jquery.history插件，在使用pushState或replaceState的时候触发 "statechange"事件。

因为ajax参数是作为a标签的链接形式写入翻页里，所以在翻页时需要将参数提取出来：

$(".pager").on("click", "a", function(e) {
    e.preventDefault();
    var href = $(this).attr("href");
    if (!href) {
        return;
    };

    if ($(this).closest(".pager").hasClass("ajaxPage")) {
        changeState(href);
    } else {
        window.location.href = href;
    };
                
});

先阻止a标签的跳转，然后取出链接。这里有一处判断是否是ajax页，因为页面交互涉及到其他页面跳转过来的情况，所以ajaxPage作为判断［请忽略。。。

接下来就是使用pushState：

var changeState = function changeState(href) {
    var parmas;
    var href = href;
    //取出参数（使用插件）
    href = href.substring(href.indexOf("?"));
    parmas = $.query.parseNew(href).get();
    var subParmas = {
       /* state对象 */
    };
    var subHref;       
    /* 
    各种判断处理
    subHref为url要与后台约定
    */
    History.pushState(subParmas, $("title").text(), subHref);
};

然后等到pushState的时候会触发"statechange"，我们再根据参数ajax取数据，最后呈现出来：

//当页面url更新时更新数据
History.Adapter ? History.Adapter.bind(window,"statechange",function(){
    var parmas = History.getState().data,
    $.when($.get(ajaxlink, parmas)).done(function(result) {
        /* 
        各种呈现处理 
        */         
    });
}) : "";

得益于pushState和replaceState的出现，以及jquery.history插件，这几行代码就可以有pjax效果。
嘛～～更多有关于pjax的应用，可以阅读学习浅析Web开发中前端路由实现的几种方式

专线服务云服务器经验总结服务器迁移经验总结应用技巧总结 pushState

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78308.html

Ajax局部页面刷新和History API结合的陷阱

摘要：对于那些老网站或者老项目来说全盘改造成并不现实，于是就有了局部页面刷新这个解决方案。如果不知道局部页面刷新是何物请看这里，这里和这里。但实际上，第一次后退无法还原的内容陷阱，第二次后退页面刷新了一切恢复最初的样子。 ajax在现代网站已经得到非常普遍地应用，主要的好处大家都知道（异步加载数据，不用刷新整个浏览器，更小的数据传输尺寸）。对于那些老网站或者老项目来说全盘改造成ajax并不现...

JasinYip 2019-08-20 10:14 评论0 收藏0
HTML5 history API，创造更好的浏览体验

摘要：而唯一不引发刷新的参数并不会发送到服务器，因此服务器无法获得状态。目前建议设置为空字符串。此外请注意，及本身调用时是不触发事件的。我认为，按照渐进增强的思路，这样就是最好的了，也就是只使用较少的代码优化高级浏览器的使用体验。 HTML5 history API有什么用呢？从Ajax翻页的问题说起请想象你正在看一个视频下面的评论，在翻到十几页的时候，你发现一个写得稍长，但非常有趣的评...

zgbgx 2019-08-21 10:23 评论0 收藏0
SPA那点事

摘要：单页面应用的出现依然存在着争议性，我们该如何看待他的两面性呢接下来小生给大家总结一下他的优缺点。单页面应用的优势无刷新体验没有了令人诟病的页面频繁刷新，同时节约浏览器资源，路由响应比较及时，提升了用户的体验。前端猿一天不学习就没饭吃了，后端猿三天不学习仍旧有白米饭摆于桌前。IT行业的快速发展一直在推动着前端技术栈在不断地更新换代，前端的发展成了互联网时代的一个缩影。而单页面应用的发展...

PumpkinDylan 2019-08-01 17:39 评论0 收藏0