pjax=pushState+ajax,相信用过github的同学都知道,github部分页面采用了pjax这个项目来实现ajax无刷新加载的同时改变页面url。一起来学习一下这个插件吧。

我们都知道ajax给浏览器带来了异步加载的能力,在数据校验、局部刷新等方面提升了用户体验,但同时存在如下问题:

1. 可以无刷新改变页面内容,但无法改变页面URL
2. hash的方式不能很好的处理浏览器的前进、后退等问题

为了解决传统ajax带来的问题,HTML5里加强了history API,加入了pushState、replaceState接口和popstate事件。这里就不详细介绍了,没有这方面知识的同学建议先看一下相关的资料。

pjax插件封装了pushState和ajax操作,为我们提供了一个开发这这类web应用的简单方法,具体步骤如下:

定义需要局部更新的容器

<div id="container"></div>

初始化pjax,监听URL

$(function(){
// pjax
$(document).pjax('a', '#container');
$.pjax.reload('#container');
})

后端处理pjax请求

后端的处理逻辑是,首先判断是不是pjax请求,如果是的话,根据请求参数返回局部内容,否则返回layout布局,然后由`$.pjax.reload('#container');`发起pjax请求。根据以上逻辑可以写出如下代码:

var pjaxFilter = function(req, res, next) {
if (req.get('X-PJAX')) {
next();
return;
}
//如果不是pjax请求的话直接返回布局模板
res.render('layout', { title: 'Pjax simple demo' });
}; router.get('/', pjaxFilter, function(req, res) {
res.render('index');
}); router.get('/poem/:id', pjaxFilter, function(req, res) {
var poemId = req.params.id;
res.render('poem/' + poemId);
})

完整代码:pjax-demo

这只是pjax最基础的功能,pjax提供了丰富的api,请访问:jquery-pjax

使用pjax实现类似github无刷新更改页面url的更多相关文章

  1. 使用ajax和history.pushState无刷新改变页面URL

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  2. 使用ajax和history.pushState无刷新改变页面URL(转)

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  3. 使用ajax和history.pushState无刷新改变页面URL onpopstate(转)

    Javascript代码 var htmlData1 = $.ajax(    {    url: "/getXXXResponse",    async: false }).re ...

  4. js修改url参数,无刷新更换页面url

    一.js修改地址栏URL参数 function changeURLPar(destiny, par, par_value) { var pattern = par + '=([^&]*)'; ...

  5. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  6. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)

    在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...

  8. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  9. jquery.pjax 单页面, 无刷新打开页面.

    介绍: pushState+ajax=pjax 工作原理: 什么是pjax? 现在很多网站(facebook, twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳 ...

随机推荐

  1. 利用WPF建立自己的3d gis软件(非axhost方式)(五)在鼠标点击的位置增加UI

    原文:利用WPF建立自己的3d gis软件(非axhost方式)(五)在鼠标点击的位置增加UI 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bP ...

  2. win7(64位)彻底卸载mysql,重装不再烦恼

    [此文出身]鄙人mysql呆鸟,一时手残卸载了mysql,之后重装,始终在配置的时候始终无法通过(如图),纠结一天之久! 查看大图 在某人的鄙视鞭策下,通过度娘的多种指导及自身的多次尝试,终于在下班前 ...

  3. 《网络编程》ioctl 操作

    概要 ioctl 功能与 fcntl 功能类似,它可以被用于描述操作的叙述字符,获取或设置属性的描述是开放式的叙事休息,但在网络编程的两个功能有关的不同类型的操作.fcntl 作.文件操作,而 ioc ...

  4. 在.net core不同的版本中 webabi引用的包不同

    core2.0中: 为了要使用MVC Controller 要安装 Microsoft.AspNetCore.Mvc.Core包 Core2.1中:Microsoft.AspNetCore.App

  5. DDD实战10 在项目中使用JWT的token

    在使用过程中报过一个错误:The algorithm: 'HS256' requires the SecurityKey.KeySize to be greater than '128' bits 是 ...

  6. DDD实战4 实现产品仓储

    a.要实现仓储,首先要定义仓储接口.在领域层定义仓储接口,IProductRepository.cs. public interface IProductRepository { void Creat ...

  7. 【HLSL学习笔记】WPF Shader Effect Library算法解读之[Embossed]

    原文:[HLSL学习笔记]WPF Shader Effect Library算法解读之[Embossed] Embossed(浮雕效果)          浮雕效果主要有两个参数:Amount和Wid ...

  8. windows下编译qt的mysql驱动

    windows下编译qt的mysql驱动cd %QTDIR%\src\plugins\sqldrivers\mysqlqmake –o Makefile INCLUDEPATH+="C:\M ...

  9. WPF 集合分组排序

    <Window x:Class="ViewExam.MainWindow"        xmlns="http://schemas.microsoft.com/w ...

  10. android Camera2 API使用详解

    原文:android Camera2 API使用详解 由于最近需要使用相机拍照等功能,鉴于老旧的相机API问题多多,而且新的设备都是基于安卓5.0以上的,于是本人决定研究一下安卓5.0新引入的Came ...