HTML5路由和PJAX

了解过的两种局部刷新页面的技术,不同开发框架下技术使用略有不同,不过都是基于 history.pushState

PJAX

jquery-pjax

pushState + ajax = pjax

jquery-pjax

pushState浏览器兼容性

PS: 看兼容性可以知道,pjax只支持 IE 10和更高版本,因为老版本的IE不支持history.pushState

供参考: PJAX的实现与应用

HTML路由模式

angularjs

$locationProvider.html5Mode(true); //主动启用 HTML5 模式的路由

ui.router 默认要兼容不支持 history.pushState 的浏览器,如 IE 8,要获得类似的能力,就要借助 hash 的 change 事件

如下这篇文章还OK,抄录一下分享给大家:

AngularJs的url有两种模式:hash标签模式和html5模式

hash标签模式

hash标签模式是基于锚点定位的内部链接机制,在URL加上#,然后再在#后面加上hash标签,根据不同的标签做定位,这个不需要服务器端提供支持。例如

http://www.example.com/#user

html5mode

html5模式则直接使用跟”真实”的url一样,如上面的路径,在html5模式下

http://www.example.com/user

html5模式的url分两种访问方式

在浏览器直接输入这个路径访问,浏览器端会向服务器端请求加载页面。

在angular应用内访问html5模式url,angular应用在客户端直接路由到对应的视图,不需要重新加载页面。

在html5模式下,angular使用了html5的pushState API 来改变浏览器的url而不用重新加载页面。

html5mode需要对客户端和服务器端做设置

客户端配置

设置$locationProvider.html5Mode为true启用html5模式。

angular.module('app').config(function($locationProvider) {
    $locationProvider.html5Mode(true);
});

在index.html文件的标签下添加

<head>
  <base href="/">
  ...
</head>

这是让angular知道应用的根路径是什么,如果应用的根路径是http://www.example.com/app,那么base设置为

<base href="/app/">

最后页面用的url需要符合html模式,即#xxx,改为/xxx

服务端设置

用户直接在浏览器访问html5模式的url时,url有可能不存在,这时需要在服务器对访问的url做处理。如果访问的url为404,这时需要把url重定向到index

nginx配置

location / {
    root /path/to/app;
    try_files $uri index.html;
}
时间: 2024-09-29 02:02:32

HTML5路由和PJAX的相关文章

使用jquery.pjax实现SPA单页面应用

前面我有文章介绍了前端路由和Pjax单页面应用方面的实例应用,今天我来和大家分享一个单页面应用神器jquery.pjax.js.它是基于jQuery的pjax插件,使用方便,功能完善.我会结合实例给大家讲解使用jquery.pjax.js. 在上一期文章中,我们了解了Pjax的实现原理,它就是利用了HTML5的Pushstate+ajax增强了页面局部刷新功能,它在我们原有的ajax功能上,实现了可以记录浏览历史,可以使用浏览器前进后退功能,浏览器的url可以跟随内容变化,而整个页面可以只刷新某

AngularJS 路由和模板实例及路由地址简化方法(必看)_AngularJS

最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰.更加具有可读性.更简洁.更具有维护性.但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angula

Laravel 5 中集成 Pjax 实现无刷新加载页面案例

pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验 1.简介 Pjax 是一个 jQuery 插件,其作用是使用 ajax 来加速页面加载时间,工作原理是只从服务器获取指定 HTML 片段,然后客户端使用获取到的内容更新局部页面. Laravel Pjax 扩展包将 Pjax 集成到 Laravel 中,实现原理是提供一个中间件,返回 Pjax 期望的响应内容. 2.安装 通

html5手机Web单页应用实践--起点移动阅读

一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读.而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发现越改越多越改越多- 注意此web应用只支持android及iphone内的浏览器,及PC或mac上的chrome,safari,firefox等支持html5的浏览器.IE10以上浏览器 这算是试验版了吧,以前没这么弄过.. 手机访问http://crapi.4gshu.com:8096/4g-r

使用HTML5构建下一代的Web Form

HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group) 发起的,最开始的名称叫做Web Application 1.0,而后这个标准吸纳了Web Forms 2.0的标准,并一同被W3C组织所采用,合并成为下一代的HTML5标准. 前言 HTML语言作为如今编程最为广泛的语言,具有易用.快捷.多浏览平台兼容等特点,但是随着时代的进步,HTML的标准却停滞不前,这一次还在不断开发中的HTML5标准的更新可以说给这门标

15. Html5的局:WebGL的纹理格式的转换

紧接上文 WebKit为了统一WebGL的书写规范,对OpenGL的标准进行四书五入,推出了平台无关的API标准,同时为了简化底层硬件的差异,又新增了一些纹理格式的支持,由内核提供高性能的图像转换,扩展了OpenGL得标准. 那么,WebGL在底层做了些什么呢?复杂吗?可以自己实现吗? 纹理格式转换计算量大 这是WebGL为前端同学提供的福利,上层开发可以更加专注业务书写,充分挖掘C/C++语言的能力. UNPACK_FLIP_Y_WEBGL 重新生成一张内存图片,将纹理像素上下颠倒的复制到新图

使用Yii整合的pjax(pushstate+ajax)实现无刷新加载页面_AJAX相关

Pjax是啥? Pjax = history.pushState + Ajax = history.pushState + Async JS + XML(xhr?) BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副作用(页面不会跳转刷新) PJAX效果 通过url可以跟踪ajax的动态加载内容.这种

[Angularjs]视图和路由(三)

写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]ng-show和ng-hide [Angularjs]视图和路由(一) [Angularjs]视图和路由(二) $routeParams 有这样一种情况,在设计路由的时候,我们希望在路由上面传递参数,但是当跳转到指定的路由的时候,我们该如何接收呢?这就用到$routePa

Yii2 Pjax 使用

来源:http://kezhongke.github.io/2017/06/27/Yii2-Pjax-Tutorial/ 参考:Yii2 Pjax Tutorial Pjax是JQuery的插件,结合ajax和Html5的pushState技术来实现异步刷新,每次通过a标签点击和form表单提交向服务器发送一个指定的请求之后,服务器都会返回需要更新的内容,Pjax会更新老旧内容以及向浏览记录中加入一条新的url而不需要更新刷新整个页面. Yii2 framework提供了一个Pjax widge