通过查阅资料总结如下,如有错误一起交流。共同进步
此题的意思是说页面不需要刷新而只改变他的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保存到标签里,另外可以实现前进与后退操作。
修改url而不刷新页面
<script type="text/javascript">
var domLoaded = function(){
if(ua != null && ua[1] < 10){
alert('您的浏览器不支持'); //如果是IE浏览器且版本小于10.0就没有这个功能
return ;
}
if(location.href.indexOf("?") > -1){
var urlparts = location.href.match(/(.+?)\?.+/i);
var urlbase = urlparts[1]; //此时取到的字符串是?前面的
}
else{
var urlbase = location.href;
}
var page =
;
var ua = window.navigator.userAgent.match(/msie (\d\.\d)/i); //msie表示微软的IE浏览器的所有版本
var content = document.getElementById("content");
var loading = document.getElementById("loading");
//指定的URL替换当前的URL
window.history.replaceState(
{
content:content.innerHTML,
page:page
},
page,
urlbase + (page > 1 ? '?page=' + page : '' ) //产生新的URL
);
var ajax = new XMLHttpRequest(); //实例化一个异步请求对象
//接收来自服务器的消息响应函数
var ajaxCallback = function(){
if(ajax.readyState == 4){
loading.style.display = 'none';
content.innerHTML = ajax.responseText;
//将指定的URL添加到浏览器列表里
window.history.pushState(
{
content:content.innerHTML,
page:page
},
page,
urlbase + "?page=" + page
);
next.href = urlbase + "?page=" + (page + 1);
}
};
//典型的Ajax程序
var next = document.getElementById('next');
var nextClickEvent = function(event){
if(loading.style.display != 'block'){
loading.style.display = 'block';
page++;
ajax.open('GET', urlbase + '?page=' + page + '&ajaxload=on', true);
ajax.onreadystatechange = ajaxCallback;
ajax.send('');
event.preventDefault(); //关闭该对象(a)的默认作用,阻止页面刷新
}
};
next.addEventListener('click', nextClickEvent, false);//将click这个事件绑定到nextClickEvent()函数上监听,false表示是要以冒泡事件监听
//当onpopstate这个event事件发生时,上面的state对象会成为event的子对象,这样就可以拿到存储的state对象的content.innerHTML和page了。
var popstate = function(){
content.innerHTML = history.state.content;
page = history.state.page;
};
window.addEventListener('popstate', popstate, false);
}; //domLoaded监听函数结束
try{
window.addEventListener('DOMContentLoaded', domLoaded, false);
}
catch(e){
alert('您的浏览器不支持');
}
</script>