• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >AJAX > 使用ajax和history.pushState无刷新改变页面URL示例

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了使用ajax和history.pushState无刷新改变页面URL示例等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

表现

如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。

是什么有这么强大的功能呢?

HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。

与传统的AJAX的区别

传统的ajax有如下的问题:

1、可以无刷新改变页面内容,但无法改变页面URL

2、为了更好的可访问性,内容发生改变后,通常改变URL的hash

3、hash的方式不能很好的处理浏览器的前进、后退等问题!

4、进而浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变

5、但这种方式对搜索引擎很不友好

6、twitter和google约定了使用#!xxx(即hash第一个字符为!),搜索引擎进行支持。

为了解决传统ajax带来的问题,HTML5里引入了新的API,即:history.pushState, history.replaceState

可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。

pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。

如何使用

<strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state, document.title, url);</strong>
</div>
state对象除了要title和url之外,你也可以添加其他的数据,比如:还想将一些发送ajax的配置给保存起来。

replaceState和pushState是相似的,这里就不多介绍了。
如何响应浏览器的前进、后退操作

window对象上提供了onpopstate事件,上面传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了。

window.addEventListener('popstate', function(e){
if (history.state){
var state = e.state;
//do something(state.url, state.title);
}
}, false);
</div>
这样就可以结合ajax和pushState完美的进行无刷新浏览了。
一些限制

1、传递的URL必须是同域下的,无法跨域

2、state对象虽然可以存储很多自定义的属性,但对于不可序列化的对象则不能存储,如:DOM对象。
对应后端的一些处理

这种模式下除了当前使用ajax可以无刷新浏览外,还要保证直接请求改变的URL后也可以正常浏览,所以后端要对这些处理下。

1、对使用pushState的ajax发送一个特殊的头,如: setRequestHeader(‘PJAX', ‘true')。

2、后端获取到有PJAX=true的header时,将页面中通用的部分都不输出。比如:PHP可以通过下面的判断

function is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}
</div>
虽然接口上只有pushState、replaceState、onpopstate,但在使用的时候需要做很多的处理。

针对这个已经写好了一个基于jquery的插件,接下来的文章会详细介绍如何使用pjax(ajax+pushState)进行无刷新改变URL浏览。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11ajax 返回值自动添加pre标签的解决方法
  • 2017-05-11零基础学习AJAX之AJAX框架
  • 2017-05-11ajax(iframe)无刷新提交表单、上传文件
  • 2017-05-11全面解析$.Ajax()方法参数(推荐)
  • 2017-05-11Ajax长连接项目案例
  • 2017-05-11php AJAX POST的使用实例代码
  • 2017-05-11探秘ajax跨域请求
  • 2017-05-11Ajax跨域查询完美解决通过$.getJSON()实现
  • 2017-05-11ajax 动态传递jsp等页面使用id辨识传递对象
  • 2017-05-11AJAX使用get与post模式的区别分析

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js对ajax返回数组的处理介绍
    • IE6中ajax aborted错误请求中断解决方法
    • 基于h5 ajax实现手机定位(demo)
    • AJAX实现跨域的三种方法(代理,JSONP,XHR2)
    • 零基础学习AJAX之制作自动校验的表单
    • jQuery中ajax - get() 方法实例详解
    • ajax 自动完成下拉框 自动提示位置问题
    • ajax发表 读取 评论
    • 发布三个ajax相关的函数,包括无刷新提交表单等
    • AJAX避免用户重复提交请求实现方案

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有