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

表现

如果你使用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>

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);

这样就可以结合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';
}

虽然接口上只有pushState、replaceState、onpopstate，但在使用的时候需要做很多的处理。

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

赞 (0)

相关推荐

  • JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页

    复制代码 代码如下: <%@ Page language="c#" Codebehind="GroupText.aspx.cs" AutoEventWireup="false" Inherits="test1.GroupText" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML&g

  • pushState实现Ajax无刷新页面切换

    前言 这样的需求很常见:点击页码局部更新页面(非整体刷新),并且产生历史管理.局部刷新很容易实现,ajax可以满足我们的需要,但是这并不会产生历史管理,好在html5给我们提供了几个好用的api方便解决这个问题,见下文. 正文 一.API 1.pushState pushState()有三个参数:一个状态对象.一个标题(现在会被忽略),一个可选的URL地址. state:与要跳转到的URL对应的状态信息. title:空字符串(以后可能有用). url:要跳转到的URL地址,不能跨域. 作用:将

  • PHP Ajax实现页面无刷新发表评论

    PHP Ajax实现页面无刷新发表评论

    大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助. 那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下: var http_request=false;  function send_request(url){//初始化,指定处理函数,发送请求的函数    http_request

  • Ajax无刷新Url提交页面

    尤其是在Jquery,porotype,Ext等框架流行之后,大量简化的代码可说是为程序员带来了福音, 从繁重的代码工作之中解脱出来,轻易的就可以实现过去书写复杂的功能. 不过有利有弊,到如今,习惯了使用各种框架,而很少自己书写内部源码的程序员们,还有几个记得Ajax那其实并不算复杂的基本代码呢? 今天,为了不遗忘当初的热忱,我把这基础的代码再贴出来,给自己回顾一下. 1.对于Ajax来说,判断浏览器的类别是一个重复而且毫无新意的工作,这段代码完全可以封装起来,随意调用. 复制代码 代码如下:

  • 基于iframe实现类似于ajax的页面无刷新

    本方法是基于iframe实现的,需求是form表单提交带有文件上传的input标签,因此不能使用ajax来提交 首先: 复制代码 代码如下: <form id="form0" action="${pageContext.request.contextPath}/news/baikeAdd.form" enctype="multipart/form-data" method="POST" target="hidd

  • pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash锚点 来解决 不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的问题 再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度 2. 随后出现一种 hashbang 的技术,即在url后加上标记 #!/myPath 来解决上述的问题 通过一个路径定

  • ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题

    在做ajax页面无刷新添加的时候,IE下遭遇Ajax缓存,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题. 总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题]而FF下不会出现这种情况.为了不受缓存影响,可以这样做: IE访问策略: Internet选项--浏览历史记录--设置-- Int

  • 使用ajax实现无刷新改变页面内容和地址栏URL

    在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大的功能呢? HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的问题: 虽然ajax可以无刷新改变页面内容,但无法改变页面URL 其次为了更好的可访

  • 使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

    使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

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

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

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器前进和后退. 是什么有这么强大的功能呢? HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的问题: 1.可以无刷新

  • 使用pjax实现无刷新更改页面url

    我们都知道ajax给浏览器带来了异步加载的能力,在数据校验.局部刷新等方面提升了用户体验,但同时存在如下问题: 1. 可以无刷新改变页面内容,但无法改变页面URL 2. hash的方式不能很好的处理浏览器的前进.后退等问题 为了解决传统ajax带来的问题,HTML5里加强了history API,加入了pushState.replaceState接口和popstate事件.这里就不详细介绍了,没有这方面知识的同学建议先看一下相关的资料. pjax插件封装了pushState和ajax操作,为我们

  • Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: <span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:

  • Ajax+smarty技术实现无刷新分页

    这里运用Smarty模板,更简单 本文主要的技术:AJAX,PHP,Smarty,另外自己封装了一个很简单的类 类: (function(){ function $(id) { return document.getElementById(id); } $.init=function() { try{return new XMLHttpRequest();}catch(e){}; try{return new ActiveXObject('Microsoft.XMLHTTP');}catch(e

  • Ajax+FormData+javascript实现无刷新表单信息提交

    原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="t

  • ajax无刷新验证注册信息示例

    ajax无刷新验证注册信息示例

    ajax无刷新验证注册信息示例,其大概思路如下: 一.把注册的html页面做好(html+css) 1.不需要form表单,直接用div包着 2.需要四个标签来显示正确.错误的信息显示 3.不用submit提交按钮,直接用button 如图: 二.把ajax做成一个函数,通过传简单的参数可以与服务器进行数据交换. 1.这个ajax函数前面有一篇如何处理利用ajax处理返回数据的文章中详细说明了. 2.ajax函数需要三个参数,url,jsonData,getMsg.这里的url都是regProc

  • js实现无刷新监听URL的变化示例代码详解

    无刷新改变路由的两种方法通过hash改变路由 代码 window.location.hash='edit' 效果 http://xxxx/#edit 通过history改变路由 history.back(): 返回浏览器会话历史中的上一页,跟浏览器的回退按钮功能相同 history.forward():指向浏览器会话历史中的下一页,跟浏览器的前进按钮相同 history.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页 history.pushState()可以将给定的数据压入到浏览器

  • AJAX打造博客无刷新搜索

    如果你对AJAX不是很了解,可以先看看这篇教程:<AJAX初体验之上手篇>. 现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客.对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务.而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面,然后在后台生成搜索结果,再呈现给用户,这过程之中浪费了一些带宽,如博客的侧边栏.要节约这一些带宽,我们可以用AJAX来打造自己的无刷新日志搜索. 在本篇教程中,数据库

  • php+js实现的无刷新下载文件功能示例

    本文实例讲述了php+js实现的无刷新下载文件功能.分享给大家供大家参考,具体如下: 服务器端页面 步骤就是,设置头文件参数,然后读入并输出文件.下面代码的file_get_contents可以使用fread,fclose代替. download.php <?php $filename = $_GET['filename']; $path = __DIR__."/file/".$filename; Header( "Content-type: application/o

随机推荐