http://www.helloweba.com/view-blog-386.html

单页面应用(Single Page Application)简称SPA,使用SPA构建的应用优点有用户体验好、速度快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染,从而相对减轻了服务器压力,SPA在WEB移动端应用非常广泛。

我们在上一篇文章Javascript实现前端简单路由中提到的前端路由,可以在不刷新整个页面的情况下,通过变换地址栏的hash来实现页面局部加载。

今天我要给大家介绍的是使用HTML5的PushState+ajax实现不刷新整个页面,而地址栏变换,页面局部刷新的效果,综合前后端页面技术实现一个简单的SPA。我们先来了解几个知识点。

HTML5 History API

HTML5在History里增加了pushState方法,这个方法会将当前的url添加到历史记录中,然后修改当前url为新url。当然这个方法只会修改地址栏的Url显示,但并不会发出任何请求。因此我们可以利用这个方法结合ajax实现单页面应用SPA,就是PushState+Ajax,人称Pjax。

pushstate的使用方法:

history.pushState(state, title, url)

state: 可以放任意你想放的数据,它将附加到新url上,作为该页面信息的一个补充。

title: 顾名思义,就是document.title。

url: 新url,也就是你要显示在地址栏上的url。

history.replaceState(state, title, url)

replaceState方法与pushState大同小异,区别只在于pushState会将当前url添加到历史记录,之后再修改url,而replaceState只是修改url,不添加历史记录。

window.onpopstate

一般来说,每当url变动时,popstate事件都会被触发。但若是调用pushState来修改url,该事件则不会触发,因此,我们可以把它用作浏览器的前进后退事件。该事件有一个参数,就是上文pushState方法的第一个参数state。

Pjax能做什么

Pjax是一个优秀的解决方案,它可以做:

  • 可以在页面切换间平滑过渡,增加Loading动画。
  • 可以在各个页面间传递数据,不依赖URL。
  • 可以选择性的保留状态,如音乐网站,切换页面时不会停止播放歌曲。
  • 所有的标签都可以用来跳转,不仅仅是a标签。
  • 避免了公共JS的反复执行,减少了请求体积,节省流量,加快页面响应速度。
  • 对SEO也不会有影响,对于不支持HTML5的浏览器以及搜索引擎爬虫,则可以跳转真实的页面。
  • 支持浏览器前进和后退按钮。

实现原理

1. 拦截a标签的默认跳转动作。

2. 使用Ajax请求新页面。

3. 将返回的Html替换到页面中。

4. 使用HTML5的History API或者Url的Hash修改Url。

代码实现

HTML

我们设置一个菜单#nav,通过点击菜单上的链接,将链接页面对应的内容加载到div#result中。

<ul id="nav">
<li><a href="home.html">首页</a></li>
<li><a href="product.html">产品</a></li>
<li><a href="server.php" title="服务">服务</a></li>
</ul>
<div id="result"></div>

pjax.js

首先在pjax.js中判断浏览器对html5的支持情况,然后定义一个cache缓存对象:cache{},定义设置cache和获取cache的方法。然后定义event事件对象:event{},绑定popstate和hashchange以及click事件,click事件会触发调用pajax对象,请求页面内容。cache缓存对象和event事件对象的代码大家可以下载源码查看,本文由于篇幅原因只将核心pjax{}对象代码粘出来。

var pjax = {
// Forward And Back,表示当前操作是否由前进和后退触发
fnb: false,
// 显示新页面内容
show: function (title, html) {
document.title = title;
document.querySelector('#result').innerHTML = html;
}, //跳转到指定页面
jump: function (url, data, callback) { // 如果是由前进后退触发,则试着从缓存中获取数据
if (pjax.fnb) {
var value = cache.get(url);
if (value !== null) {
pjax.show(value.title, value.html);
return;
}
} document.querySelector('#result').innerHTML = '加载中...';
//ajax发送请求
var xhr = new XMLHttpRequest(); xhr.open("GET", url, true);
xhr.setRequestHeader("X-PJAX", "true");
xhr.setRequestHeader("X-PJAX-TITLE", data);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){ //304是缓存
var html = xhr.responseText,
title = xhr.getResponseHeader("X-PJAX-TITLE");
if(title==null){
title = document.title;
}else{
title = decodeURI(title);
}
//console.log(title); // 显示新页面
pjax.show(title, html); //不是前进和后退按钮触发
if(!pjax.fnb){
// 修改URL,URL地址栏会变换
if (support === 'HTML5') {
history.pushState(null, null, url);
} else {
var path = url.replace(location.protocol + "//" + location.host, "");
location.hash = path;
}
// 添加到缓存
cache.set(url, {
title: title,
html: html
});
} }else{
console.log('请求失败!');
}
pjax.fnb = true;
}
};
xhr.send();
}, init: function () {
event.bindEvent();
}
};

可以看出,pjax的核心部分是发送异步的ajax请求,调用html5的history.pushState() 方法,缓存页面信息,已经处理异步请求返回的结果。

最后调用:

pjax.init();

PushState+Ajax实现简单的单页面应用SPA的更多相关文章

  1. Identity Server 4 从入门到落地(六)—— 简单的单页面客户端

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  2. (转)前端:将网站打造成单页面应用SPA

    前端:将网站打造成单页面应用SPA(一) Coffce 680 6月19日 发布 推荐 6 推荐 收藏 85 收藏,3.1k 浏览 前言 不知你有没有发现,像Github.百度.微博等这些大站,已经不 ...

  3. 前端:将网站打造成单页面应用SPA

    前端:将网站打造成单页面应用SPA   前言 不知你有没有发现,像Github.百度.微博等这些大站,已经不再使用普通的a标签做跳转了.他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML ...

  4. 单页面应用SPA架构

    个人认为单页面应用的优势相当明显: 前后端职责分离,架构清晰:前端进行交互逻辑,后端负责数据处理. 前后端单独开发.单独测试. 良好的交互体验,前端进行的是局部渲染.避免了不必要的跳转和重复渲染. 当 ...

  5. 使用Angular构建单页面应用(SPA)

    什么是SPA?看下图就是SPA: 下面说正经的,个人理解SPA就是整个应用只有一个页面,所有的交互都在一个页面完成,不需要在页面之间跳转. 单页面的好处是更快的响应速度,更流畅的用户体验,甚至和桌面应 ...

  6. 单页面应用SPA和多页面应用MPA

    单页面应用(SinglePage Web Application,SPA) 只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js.css等)仅需加载 ...

  7. AJAX实现简单的注册页面异步请求

    p { margin: 0px; padding: 0px } AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通 ...

  8. 简单H5单页面真机调试

    1.安装Node.js 这个没什么好说的,直接去官网下载安装就好了. Node.js官网:https://nodejs.org 2.安装http-server 直接在命令行中安装到全局(-g表示安装到 ...

  9. [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...

随机推荐

  1. Python高级编程之生成器(Generator)与coroutine(二):coroutine介绍

    原创作品,转载请注明出处:点我 上一篇文章Python高级编程之生成器(Generator)与coroutine(一):Generator中,我们介绍了什么是Generator,以及写了几个使用Gen ...

  2. VS2013 连接 MySQL

    1.安装必须的工具: mysql-connector-net-6.8.3 mysql-installer-community-5.6.16.0.msi mysql-for-visualstudio-1 ...

  3. [velocity] velocity详解

    (1)为什么要使用模版语言? 在服务器端可以使用 Velocity 处理模板和生成的动态内容(HTML.XML等).这和 JSP 技术的目标非常接近.但是,JSP 模型可以毫无阻碍地访问底层的 Ser ...

  4. php 显示一个干净的,易被解析的json

    header("Content-type: text/html; charset=utf-8"); //试着从数据库里读取一条数据放进来 $con = mysql_connect( ...

  5. 003很好的网络博客(TCP/IP)-很全

    http://www.cnblogs.com/obama/p/3292335.html 很全的计算机网络方面的资料.

  6. 断言(assert)和程序的安全保证

    断言,用来DEBUG错误的,在DEBUG时发现然后跟踪错误! 通常 写一个程序给别人使用的,这个代码在安全性上的要求是什么呢?直觉上,我们都知道程序不应该崩.但是通常C/C++的程序如果把包含API的 ...

  7. thinkPHP中phpexcel的导出功能

    public function wExcel() { vendor("PHPExcel.PHPExcel"); // Create new PHPExcel object $obj ...

  8. sdut 2152:Balloons(第一届山东省省赛原题,DFS搜索)

    Balloons Time Limit: 1000MS Memory limit: 65536K 题目描述 Both Saya and Kudo like balloons. One day, the ...

  9. Ubuntu 16.04 LTS 安装libvips出现”Package vips was not found in the pkg-config search path”

    使用libvips来操作图像,libvips的部署参考一个Node.js工程:https://github.com/lovell/sharp 在MAC下安装很顺利,到Linux环境下(Ubuntu 1 ...

  10. Objective-C实用类和协议

    Objective-C实用类和协议 目录 概述 NSObject 概述 NSObject 协议<NSObject> 类NSObject 详细方法参考文档 实用操作 是否为某个类或其子类 是 ...