Ajax异步刷新地址栏url改变（利用Html5 history.pushState实现）

//格式约定
history.pushState(data, title[, url]);
/// <summary>
///     pushState方法调用示例，replaceState方法同样的参数格式，
///　　　&#10;　本方法负责将自定义数据写入浏览器会话历史
///　　　&#10;　linkFly原创，引用请注明出处，谢谢
/// </summary>
/// <param name="data" type="object">
///     需要进行保存（在历史会话）的数据，该数据可以在下一次会话中读取出来
/// </param>
/// <param name="title" type="String">
///     写入历史会话的标题，经过测试暂时没有发现用处，不会对当前文档标题产生影响，可以传入空字符串
/// </param>
/// <param name="url" type="String">
///     要写入浏览器历史会话的Url【注意不允许跨域】
/// </param>
/// <returns type="void" />
window.history.pushState(
　　　　{pageIndex:1,keywords:‘善了个哉‘},
　　　　document.title,
　　　　window.location.pathname+‘?pageIndex=1‘
　　);

//本代码仅作参考
//环境 Firefox 25.0.1级以下版本不推荐使用本代码(高版本尚未测试)
window.addEventListener(‘popstate‘, function(e) {
/// <summary>
///　　　&#10;　在页面初始化加载完成中添加该事件，则可以监听到onpopstate事件，而浏览器进行前进、后退、刷新操作都会触发本事件
///　　　&#10;　linkFly原创，引用请注明出处，谢谢
/// </summary>/// <returns type="void" />
    if (e.state) {
        //e.state就是pushState中保存的Data，我们只需要将相应的数据读取下来即可
    }    
});
// 传闻可以直接使用history.state来获取当前对应的state数据，笔者尚未测试，有兴趣的可以自行研究下，注意主要测试Firefox

$(function(){ 
    //通过jQuery.trigger()方法触发
    //或者自己手写js触发，具体代码这里就不贴了...
    $(window).trigger("hashchange"); 
});

     function getUrlParameter(fieldName) {
        /// <summary>
        ///     1: 获取地址栏参数方法
        ///     &#10;    - getUrlParameter(fieldName) - 在当前Url中查询指定的参数，返回查询得到的值，当不支持pushState或没有查询到参数的时候返回空字符串
        /// </summary>
        /// <param name="fieldName" type="String">
        ///     要查询的字符串
        /// </param>
        /// <returns type="String" />
　　　　if (window.history.pushState) {
            var urlString = document.location.search;
            if (urlString != null) {
                var typeQu = fieldName + "=";
                var urlEnd = urlString.indexOf(typeQu);
                if (urlEnd != -1) {
                    var paramsUrl = urlString.substring(urlEnd + typeQu.length);
                    var isEnd = paramsUrl.indexOf(‘&‘);
                    if (isEnd != -1) {
                        return paramsUrl.substring(0, isEnd);
                    }
                    else {
                        return paramsUrl;
                    }
                }
                else {
                    return "";
                }
            }
            else {
                return "";
            }
        } else {
            return ‘‘;
        }
    }
//调用方法：getUrlParameter(‘要查询的参数‘)

//historyState对象，提供push历史数据和获取历史数据方法。
//linkFly原创，引用请注明出处，谢谢
var historyState = {
    checkCanPush: function () {
        /// <summary>
        ///     检测浏览器是否支持pushState方法
        /// </summary>
        /// <returns type="Boolean" />
        if (window.history.pushState)
        
            return true;
        return false;
    },
    pushState: function (data, url) {
        /// <summary>
        ///     状态保持方法（需要高版本浏览器支持），当canPush为true的时候表示浏览器可以进行push状态，则进行状态push并返回是否成功
        ///     &#10;   1.1 - pushState(data,url) 将指定的data,和url push到浏览器会话历史进行状态保持【注意Url不允许跨域】
        /// </summary>
        /// <param name="url" type="String">
        ///     需要写入浏览器会话历史的url
        /// </param>
        /// <returns type="Boolean" />
        if (historyState.checkCanPush()) {
            //注意data虽然可以保存数据，但是不能保存仍然引用着当前页面元素的对象，例如$("DOM")这样一个对象，就会出现ObjectCloneError
            window.history.pushState(data, document.title, url);
            return true;
        }
        return false;
    },
    getUrlParameter: function (fieldName) {
        /// <summary>
        ///     1: 获取地址栏参数方法
        ///     &#10;    - getUrlParameter(fieldName) - 在当前Url中查询指定的参数，返回查询得到的值，当不支持pushState或没有查询到参数的时候返回空字符串
        /// </summary>
        /// <param name="fieldName" type="String">
        ///     要查询的字符串
        /// </param>
        /// <returns type="String" />
        if (historyState.checkCanPush()) {
            var urlString = document.location.search;
            if (urlString != null) {
                var typeQu = fieldName + "=";
                var urlEnd = urlString.indexOf(typeQu);
                if (urlEnd != -1) {
                    var paramsUrl = urlString.substring(urlEnd + typeQu.length);
                    var isEnd = paramsUrl.indexOf(‘&‘);
                    if (isEnd != -1) {
                        return paramsUrl.substring(0, isEnd);
                    }
                    else {
                        return paramsUrl;
                    }
                }
                else {
                    return "";
                }
            }
            else {
                return "";
            }
        } else {
            return ‘‘;
        }
    }
}

//historyState对象调用示例
window.onload = function () {
    //写入历史会话
    historyState.pushState({ pageIndex: 1 }, window.location.pathname + ‘?pageIndex=1‘);
    //获取历史会话的数据（获取url的参数数据）
    var pageIndex = historyState.getUrlParameter(‘pageIndex‘);
    //进行数据还原操作...

}