HTML5实现AJAX无刷新修改地址栏URL

网络 2014/5/8 23:14:01

HTML5新添加了两个api分别是pushState和replaceState，DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取，可以在用户的访问记录中前进和后退，我们可以开始操作这个历史记录堆栈。

实例一、通过pushState修改URL

DEMO http://www.qttc.net/static/demo/html5_20130320/test.html

通过这句代码可以无刷新改变URL

window.history.pushState({},0,url);

DEMO代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5无刷修改url - 琼台博客</title>
        <script type="text/javascript">
            function changeURL(){
                var url = document.getElementById('url').value;
                window.history.pushState({},0,'http://'+window.location.host+'/'+url);      
            }
 
        </script> 
    </head>
    <body>
        <h1>html5无刷新改变url</h1>
        <div id="info" style="margin:30px 0;">
            页面真实地址:
            <span style="color:red;"><script type="text/javascript">document.write(window.location.href);</script></span>
        </div>
        <div>
        请输入要改变地URL字符串：<input id='url' type="text" />
        <button onclick="changeURL();">点击无刷改变url</button>
        </div>
        <div style="color:red;margin-top:30px;">请使用支持html5的浏览器访问</div>
        <div style="margin-top:30px;"><a href="http://www.qttc.net/201303292.html" target="_blank">《html5无刷新改变URL》</a> - 琼台博客</div>
    </body>
 
</html>

截图：

在input输入框内输入haha.html点击“点击无刷新改变url”按钮即可实现

实例二、利用ajax配合pushState翻页无刷新的动作

主要在ajax发起数据请求，在数据页面响应后利用pushState修改分页参数，达到模拟真实翻页效果，并且写入历史表达到后退时能恢复上一页的数据

DEMO http://www.qttc.net/static/demo/html5_20130320/demo-page.html

demo-page.html代码：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>HTML5无刷修改url - 琼台博客</title>
    <script type="text/javascript">
    var changeURL = function(){
         
        if(location.href.indexOf("?") > -1){
            var arr = location.href.split('?');
            var urlbase = arr[0];
            var pageObj = arr[1].match(/page=(\d+)/);
            var page = Number(pageObj[1]) || 1;
        }else{
            var urlbase = location.href;
            var page = 1;
        }
 
        load = false;
        var content = document.getElementById("content");   
        var ajax = new XMLHttpRequest();
 
        // 调用数据回掉函数
        var ajaxCallback = function(){
            if(ajax.readyState == 4){
                load = false;
                result = eval('('+ajax.responseText+')');
                content.innerHTML = result.data;
                next.href = urlbase + "?page=" + (page + 1);
 
                // push到历史记录里，可以在点击后退时从历史记录里恢复内容
                // 并且无刷修改url地址
                window.history.pushState({content:content.innerHTML,page:page},page,urlbase + "?page=" + page);
            }
        };
 
        // 点击事件
        document.getElementById('next').onclick = function(event){
            if(!load){
                load = true;
                content.innerHTML = '加载中数据中...(注意看数据返回后url改变)';
                page++;
                ajax.open('GET','shuju.php?page='+page, true);
                ajax.onreadystatechange = ajaxCallback;
                ajax.send('');
                return false;
            }
        };
 
 
        // 记录到历史里，当点击后退按钮还退回上次页面请求前的页面内容
        window.onpopstate = function(){
            content.innerHTML = history.state.content;
            page = history.state.page;              
        }
 
        // 修改当前页面在 history 中的记录
        window.history.replaceState({content:content.innerHTML,page:page},page,urlbase + (page > 1 ? '?page=' + page : '' ));
    };
 
    // 检测是否支持
    try{
        //监听事件
        window.addEventListener('DOMContentLoaded', changeURL, false);
    }catch(e){
        alert('浏览器不支持，请使用支持html5的浏览器'); 
    }
 
    </script>
    </head>
    <body>
        <div id="content" style="width:300px;height:100px;border:1px solid #999;">第1页的内容</div>
        <div><a id="next" href="?page=2">下一页</a></div>
         
        <div style="color:red; margin-top:30px;">请使用支持html5的浏览器测试</div>
        <div><a href="http://www.qttc.net">xxx</a></div>
    </body>
</html>

shuju.php代码：

<?php
sleep(3);
echo json_encode(array('data'=>'第'.$_GET['page'].'内容'));

DEMO贴图：

没有点击之前

点击后，发起ajax请求page=2数据

ajax返回后通过pushState修改URL，请看截图地址栏已经是page=2，页面没有刷新，因为firebug控制台中的ajax请求记录还在

点击后退箭头，恢复上一页的数据

最后

虽说这两个html5新加api能实现无刷新修改URL，但js毕竟是前端，为了安全是不能跨域的。比如本例中的demo域是在www.qttc.net下，不能修改到www.xxx.com域下。有不少人说这个特性解决了ajax局部刷新区域不容易被蜘蛛人抓取的问题，本人没有亲自验证，但却有可行之势，感兴趣的童鞋可以尝试下。

阅读(1035) 分享(0)

上一篇: 使用ajax和history.pushState无刷新改变页面URL
下一篇: HTML5中表单验证的8种方法