zoukankan      html  css  js  c++  java
  • AJAX的刷新和前进后退问题解决

    使用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(注意观察地址栏),刷新页面后值也还是增加后的值,而且页面可以前进后退。
    代码如下:

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <title></title>
     6     <script src="jquery-1.4.1.js"></script>
     7     <script type="text/javascript">
     8         var processHash = function () {
     9             var hashStr = location.hash.replace("#", "");
    10             if (hashStr) $("#txt1").val(hashStr);
    11         }
    12         $(function () {
    13             $("#txt1").click(function () {
    14                 var i = parseInt($("#txt1").val());
    15                 i++;
    16                 $("#txt1").text(i);
    17                 location.hash = "#" + i;
    18             });
    19             window.onload = processHash;
    20             window.onhashchange = processHash;
    21         });
    22     </script>
    23 </head>
    24 <body>
    25     <input type="text" id="txt1" value="1" />
    26 </body>
    27 </html>

    本文转自:http://www.rupeng.com/forum/thread-39427-1-1.html

  • 相关阅读:
    postmessage
    input、textarea等输入框输入中文时,拼音在输入框内会触发input事件的问题
    h5判断设备是ios还是android
    js获取地址栏的参数
    BootStrap 响应式布局
    前端框架 BootStrap 快速入门(Hallo Word)
    HTML + CSS + JavaScript 实现注册页面信息验证(表单验证)
    HTML + CSS + JavaScript 实现勾选动态表格中的记录
    JavaScript常见的事件监听
    HTML + CSS + JavaScript 实现简单的动态表格
  • 原文地址:https://www.cnblogs.com/zhaozhengyan/p/2715189.html
Copyright © 2011-2022 走看看