实现页面无刷新改变URL

通过查阅资料总结如下，如有错误一起交流。共同进步

此题的意思是说页面不需要刷新而只改变他的URl，这样便于此时的页面保存为书签。其中的关键就是利用了js中history对象的两个新成员pushstate 和replacestate，然后再结合Ajax的异步传输功能。

浏览器的问题：chrome，firefox以及IE10.0以上才可以使用这项功能。

对比传统的Ajax

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

2、为了更好的可访问性，内容发生改变后，改变URL的hash(从#开始的URL)

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

这样就引入了两个新的浏览器操作接口pushstate 和replacestate

下面我们就重点介绍这两个接口的功能以及如何使用：

1、pushState是将指定的URL添加到浏览器历史里

其中：var state = {   

                 title: title,
                url: options.url,
                otherkey: othervalue
           };

window.history.pushState(state, document.title, url);     //三个参数，分别为：状态对象，标题（目前被浏览器忽略），地址

说明state是一个字典数组，里面存放的数据。另外window对象上提供了onpopstate事件(浏览器上的前进和后退操作)，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。

 //当onpopstate这个event事件发生时，上面的state对象会成为event的子对象，这样就可以拿到存储的state对象的content.innerHTML和page了。
 var popstate = function(){
  title = history.state.title;
  url = history.state.url;
  //测试说明popstate事件表示浏览器前进和后退  alert(history.state.title+",....,"+history.state.url);
 };
 window.addEventListener('popstate', popstate, false);};  //popstate函数监听popstate事件。

2、replaceState是将指定的URL替换当前的URL。只将新的URL内容显示出来而没有必要刷新。

//指定的URL替换当前的URL，有三个参数其中第一个是字典数组表示状态对象，第二个是标题，第三个是地址

 window.history.replaceState(    
  {
         title: title,
         url: options.url,
  },
  page,
  urlbase + (page > 1 ? '?page=' + page : '' )  //产生新的URL
 );

不管怎么样新的知识点就只有这几点，下面举一个例子会比较好理解：

下面的例子代码用的是php语言实现的，功能是：改变页码时URL改变而不刷新页面，并且可以将URL保存到标签里，另外可以实现前进与后退操作。