AJAX的刷新和前进后退问题解决

发布时间：2020-12-16 01:43:23 所属栏目：百科来源：网络整理

导读：使用AJAX开发分页功能的时候，用户跳转到第5页，但是刷新以后又显示第一页了，能不能刷新后还显示第5页？还有能不能用浏览器的前进后退按钮来浏览AJAX历次的变化。因为Javascript对dom的操作是不持久化的，刷新后就恢复原状，而且也不保存历史记录，也就无

使用AJAX开发分页功能的时候，用户跳转到第5页，但是刷新以后又显示第一页了，能不能刷新后还显示第5页？还有能不能用浏览器的前进后退按钮来浏览AJAX历次的变化。

因为Javascript对dom的操作是不持久化的，刷新后就恢复原状，而且也不保存历史记录，也就无法前进后退来查看历史了。但是可以采用“地址栏加hash”技术来解决。

地址栏中敲入“页面地址#aaa”就表示跳转到“页面地址 ”的“aaa”这个页内锚点（英文叫做hash）。只要改变“aaa”这个锚点内容，浏览器就认为URL变化，也就会放入浏览历史，这样前进后退问题就解决了。我们只要把不同的AJAX状态通过不同的hash写到地址栏就可以了，当页面加载的时候检测是否有hash值，有的话就读取hash进行相应的ajax还原操作。

location.hash可以取到或者设置hash的值，当hash改变的时候window.onhashchange事件会被触发，但是页面加载的时候哪怕有hash值，onhashchange事件也不会触发，因此需要在onload事件中也读取hash进行同样的处理，保证刷新页面也能恢复ajax的页面显示。

下面是例子代码，为了简单的突出问题，这里没有使用ajax，只是通过dom来修改页面状态。点击文本框，文本框的内容会加1（注意观察地址栏），刷新页面后值也还是增加后的值，而且页面可以前进后退。
代码如下：

[html] 
   view plain 
   copy 
   
print 
   ? 
  
 <!DOCTYPEhtml>
 
 <htmlxmlns="http://www.w3.org/1999/xhtml">
 <head>
 <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
 <title></title>
 <scriptsrc="jquery-1.4.1.js"></script>
 <scripttype="text/javascript">
 varprocessHash=function(){
 varhashStr=location.hash.replace("#","");
 if(hashStr)$("#txt1").val(hashStr);
 }
 $(function(){
 $("#txt1").click(function(){
 vari=parseInt($("#txt1").val());
 i++;
 $("#txt1").text(i);
 location.hash="#"+i;
 });
 window.onload=processHash;
 window.onhashchange=processHash;
 </script>
 </head>
 <body>
 <inputtype="text"id="txt1"value="1"/>
 </body>
 </html>
  

原文地址：http://blog.csdn.net/resigshy/article/details/8046595

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!