Ajax不改变页面地址,使用ajax和js无刷新改变页面内容和地址栏URL

发现一个可以改变地址栏，而不导致页面刷新的东东。 Chrome, FF测试通过，不支持IE.

实现目标

页面的跳转(前进后退，点击等)不重新请求页面

页面URL与页面展现内容一致(符合人们对传统网页的认识)

在不支持的浏览器下降级成传统网页的方式

使用到的API

history.state

当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的，那么history.state是null。

history.pushState(state, title, url)

将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。

state：与要跳转到的URL对应的状态信息。

title：不知道干啥用，传空字符串就行了。

url：要跳转到的URL地址，不能跨域。

history.replaceState

用新的state和URL替换当前。不会造成页面刷新。

state：与要跳转到的URL对应的状态信息。

title：不知道干啥用，传空字符串就行了。

url：要跳转到的URL地址，不能跨域。

window.onpopstate

history.go和history.back(包括用户按浏览器历史前进后退按钮)触发，并且页面无刷的时候(由于使用pushState修改了history)会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。

支持性判断

if ('pushState' in history) {...}

实现思路

用户通过“点击触发”，“操作历史”，“直接访问URL”的方式修改当前URL。这三种触发方式会使浏览器做出不同的行为。如果页面做无刷跳转，那么页面具体显示什么内容需要js来控制，js则需要根据一些信息来知道当前应该显示什么内容，这个信息就是history.state。这样我们只要保持URL和history.state一一对应，就能保证URL和内容一一对应。大部分情况下URL和history.state都是一一对应的，但通过直接URL访问页面的方式进入页面，history.state是null，所以我们需要把URL转换成对应的history.state写入。我们不能直接写入history.state，需要通过replaceState的方式写入。对于不支持pushstate的浏览器，一律修改href跳转页面，等同于直接访问URL。示意图如下。

分割线

用法很简单:

/*

* 替换当前url 并不导致浏览器页面刷新

* name 参数名

* value 参数值

*/

function replaceUrl (name, value) {

var obj = new Object();

obj[name] = value;

obj.rand = Math.random();

History.replaceState(obj, '', '?' + name + '=' + value);

}

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

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

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

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

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

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

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

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

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

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

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

使用pjax实现类似github无刷新更改页面url

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

本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如 ...

js修改url参数，无刷新更换页面url

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

随机推荐

tomcat远程部署应用

Tomcat安装成功后,在ip地址:8080上就可以看见熟悉的首页,在这个首页中,上方有一个manage app按钮,点击就可以进行应用管理了.这样就不需要使用ftp把war包传上去了. 要想远程部署 ...

Guava学习笔记：EventBus

EventBus是Guava的事件处理机制,是设计模式中的观察者模式(生产/消费者编程模型)的优雅实现.对于事件监听和发布订阅模式,EventBus是一个非常优雅和简单解决方案,我们不用创建复杂的类和 ...

Beta分布和Dirichlet分布

在里证明了\begin{align*} B(m, n) = \int_0^1 x^{m-1} (1-x)^{n-1} \text{d} x = \frac ...

LeetCode-95. Unique Binary Search Trees II

Description: Given n, generate all structurally unique BST's (binary search trees) that store values ...

由于IPv6导致的iOS应用发布失败，是否该怪Azure？

IPv6已经被越来越广泛的支持了,尤其是苹果强制要求iOS (确切的说是iOS 9以及后续版本)应用必须支持IPv6之后(官方宣布),更将进一步推动IPv6的使用. 不过苹果应用作为客户端强制要求IP ...

Golang垃圾回收机制(一)

原文: http://legendtkl.com/2017/04/28/golang-gc/ 1. Golang GC 发展 Golang 从第一个版本以来,GC 一直是大家诟病最多的.但是每一个版本 ...

Xcode9模拟器隐藏边框

选中模拟器,在Mac顶部菜单栏找到Window-->Show Device Bezeles 取消勾选代表去除黑边,勾选代表展示黑边,根据个人喜好设置吧

Java MyBatis insert数据库数据后返回主键