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

发现一个能够改变地址栏，而不致使页面刷新的东东。 Chrome, FF测试经过，不支持IE.

实现目标

1. 页面的跳转（前进后退，点击等）不从新请求页面
2. 页面URL与页面展示内容一致（符合人们对传统网页的认识）
3. 在不支持的浏览器降低级成传统网页的方式

使用到的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。示意图以下。

 

原地址连接： http://www.cnblogs.com/flash3d/archive/2013/10/23/3384823.html

 

 

 

---

 

分割线

---

 

 

jquery.history 能够提供更好的兼容性（下载地址）：http://files.cnblogs.com/files/08shiyan/jquery.histroy.zip

用法很简单:

    /*
    * 替换当前url 并不致使浏览器页面刷新
    * name 参数名
    * value 参数值
    */
     function replaceUrl  (name, value) {        
        var obj = new Object();
        obj[name] = value;
        obj.rand = Math.random();
        History.replaceState(obj, '', '?' + name + '=' + value);
    }