关于ajax刷新和前进后退问题(增加一个demo)
发布在随笔2016年11月22日view:435HTML5JavaScript移动开发前端工程前端工程师面试DOMHTML前端工具
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

关于ajax刷新和前进后退问题

在项目中开发中,会经常用到AJAX异步加载技术,会碰到一个很头疼的问题:浏览器的前进后退按钮失效了,每次页面刷新后都会回到初始页面。
因为Javascript对dom的操作是不持久化的,刷新后就恢复原状,而且也不保存历史记录,也就无法前进后退来查看历史了。但是可以采用“地址栏加hash”技术来解决。

解决: 1. 地址栏中敲入“页面地址#history”就表示跳转到“页面地址”的“history”这个页内锚点(英文叫做hash)。 2. 只要改变“history”这个锚点内容,浏览器就认为URL变化,也就会放入浏览历史,这样前进后退问题就解决了。 3. 只要把不同的AJAX状态通过不同的hash写到地址栏就可以了,当页面加载的时候检测是否有hash值,有的话就读取hash进行相应的ajax还原操作。 4. location.hash可以取到或者设置hash的值,当hash改变的时候window.onhashchange事件会被触发,但是页面加载的时候哪怕有hash值,onhashchange事件也不会触发,因此需要在onload事件中也读取hash进行同样的处理,保证刷新页面也能恢复ajax的页面显示。

function hashChange(){
    var hash=window.location.hash.split('#');

    var paramsObj = hashToObj();//将获取到的hash字符串转换成对象

    $.get(paramsObj,function(res){

        //dosomething

    })
}
$(window).hashchange(function(){
    hashChange();
})
新增demo
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
<div id="showMovie">
    <img src="" id="movieImg" alt="">
    <button id="next">下一部电影</button>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
    var idArr = [26585014,5327268,25757186,3718279,19955769,26425088,25798448];
    var i =0;

    if(location.hash){
        i = parseInt(location.hash.replace('#',''));
    }else{
        i = 0;
    }
    $.ajax({
        url:'https://api.douban.com/v2/movie/subject/'+idArr[i],
        dataType:'jsonp',
        data:'',
        jsonp:'callback',
        success:function(result){
            $("#movieImg").prop('src',result.images.large);
        }
    });

    window.onhashchange = function(){
        if(location.hash){
            i = parseInt(location.hash.replace('#',''));
        }else{
            i = 0;
        }
        $.ajax({
            url:'https://api.douban.com/v2/movie/subject/'+idArr[i],
            dataType:'jsonp',
            data:'',
            jsonp:'callback',
            success:function(result){
                $("#movieImg").prop('src',result.images.large);
            }
        });
    };

    $('body').on('click','#next',function(){
        $.ajax({
            url:'https://api.douban.com/v2/movie/subject/'+idArr[++i],
            dataType:'jsonp',
            data:'',
            jsonp:'callback',
            success:function(result){
                $("#movieImg").prop('src',result.images.large);
                location.hash = "#"+i;
            }
        });
    })
</script>
</body>
</html>

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

<!DOCTYPE html>  

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  

    <title></title>  

    <script src="jquery-1.4.1.js"></script>  

    <script type="text/javascript">  

        var processHash = function () {  

            var hashStr = location.hash.replace("#", "");  

            if (hashStr) $("#txt1").val(hashStr);  

        }  

        $(function () {  

            $("#txt1").click(function () {  

                var i = parseInt($("#txt1").val());  

                i++;  

                $("#txt1").text(i);  

                location.hash = "#" + i;  

            });  

            window.onload = processHash;  

            window.onhashchange = processHash;  

        });  

    </script>  

</head>  

<body>  

    <input type="text" id="txt1" value="1" />  

</body>  

</html>  
评论
发表评论
暂无评论
WRITTEN BY
一诺
水滴石穿不是因为力量 而是因为坚持
TA的新浪微博
PUBLISHED IN

我的收藏