html5 ajax 后退,基于Jquery.history解决ajax的前进后退问题

以下内容是关于Jquery.history解决ajax的前进后退问题，具体详情请看下文。

本文的前提是基于后台的，所以这里不会考虑seo的问题。同时，基于后台的管理系统，也不需要被收藏，所以也不会考虑刷新的这种类似直接敲网址的情况！！！

这里使用的是html5中的history.state 来解决。

网上已经有了js的开源解决方案pushState。详见pjax

但是这个方案不适合我的项目(后台项目)，尤其是主要的方法有点不够用。

我使用的是  jquery.history.js  可以参考这个 history.js

看下面的代码

用户名

用户id

显示结果

提交

log:

///随机数

function guid() {

function S4() {

return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);

}

return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());

}

/// 回调的方法

function doCallback(fn, args) {

fn.apply(this, args);

}

///获取查询字符串

function GetQueryString() {

var result = "";

var url = location.href;

if(url.indexOf("?")>0){

result = url.substring(url.indexOf("?") + 1, url.length);

if (result != "") {

result = result + "&";

}

}

return "?" + result;

}

// 用来保存地址栏的参数，第一次页面加载的时候执行。 用来修改地址栏的时候，保留原始的参数

var globalQuerystr;

var golbalState = {

"globalPara": {},// js调用方法执行时用的全局js参数，

"globalControlValue": {},//js需要修改value的html组件 如文本 类似$(“#xxx”).val()

"globalControlHtml": {},// js需要修改内部html内容的html组件 类似 $(“#yy”).html()

"CallbackFunctions": "" // 回调的js方法 可以自己实现 ，用逗号分隔，一般是一个方法名

};

///全局变量的问题 globaPara 保存全局变量

///多个控件变化 但是不在一个容器内的问题 数组的方式 History.pushState({state:1,rand:Math.random(), "globaPara":globaPara, "valuecontrol":[{"txtuser":"1"},{"txtname":"2"}] "htmlcontrol":[{"htmltxt":"hello"},{"htmlcheckbox1":""}] },"title","?data=1"

//控件类型的问题 有的保存值就行 有的保存html更方便

(function (window, undefined) {

globalQuerystr = GetQueryString();

var

History = window.History, // Note: We are using a capital H instead of a lower h

State = History.getState(),

$log = $('#log');

console.info("页面加载完毕");

History.log('initial:', State.data, State.title, State.url);

//页面第一次加载的时候 State没有属性

History.Adapter.bind(window, 'statechange', function () { // Note: We are using statechange instead of popstate

// Log the State

var State = History.getState(); // Note: We are using History.getState() instead of event.state

golbalState = State.data;

if (golbalState) {

//修改控件的val值

if (golbalState.globalControlValue) {

for (var i = 0; i < golbalState.globalControlValue.length; i++) {

$("#" + golbalState.globalControlValue[i].controlid).val(golbalState.globalControlValue[i].controlvalue);

}

}

//修改全局变量

if (golbalState.globalPara) {

for (var i = 0; i < golbalState.globalPara.length; i++) {

eval("" + golbalState.globalPara[i].globalname + " =" + golbalState.globalPara[i].globalvalue + ";");

}

}

//修改控件的html

if (golbalState.globalControlHtml) {

for (var i = 0; i < golbalState.globalControlHtml.length; i++) {

$("#" + golbalState.globalControlHtml[i].controlid).html(golbalState.globalControlHtml[i].controlhtml);

}

}

//执行恢复参数后要执行的函数

if (golbalState.CallbackFunctions != "") {

doCallback(eval("" + golbalState.CallbackFunctions), null);

}

//清空函数

golbalState.CallbackFunctions = "";

}

History.log('statechange:', State.data, State.title, State.url);

});

})(window);

function displayinfo() {

console.info("index:" + History.getCurrentIndex);

//ajax方法，从服务器获取数据

$("#txtinfo").val("我爱" + $("#txtUser").val() + $("#txtId").val());

}

$(function () {

$(".apjax").on("click", function () {

golbalState.globalControlValue = [{"controlid": "txtUser", "controlvalue": $("#txtUser").val()}];

golbalState.CallbackFunctions = $(this).attr("funname");

History.pushState(golbalState, $(this).attr("title"), globalQuerystr + "rnd=" + guid());

});

})

一 先引用jquery 和history.js  的js

二

History.Adapter.bind(window, 'statechange', function () {  表示在点击后退 前进或history的js方法时，监控变化。当变化时执行自定义的方法。

History.pushState 有三个参数 state title 自定义的地址查询参数。

该方法往历史记录里添加数据，修改地址栏

History.getState()  获取当前地址的state参数

三 流程

1 首先获取地址栏的参数并保存

2 绑定包含apjax类的标记的click方法， 标记可以任意，可以是div a链接 按钮等

当点击的时候，保存执行ajax方法前的状态，保存到golbalState ，其中回调的方法从标记的funname属性中调取，title的值从标记的title属性获取，

“globalPara":  "globalControlValue": "globalControlHtml  最好在ajax的方法中赋值，如displayinfo

3 History.pushState 添加到历史记录，并修改地址栏

4 当后退的时候，执行History.Adapter.bind中的方法，先获取state参数

5 把之前 js修改过的变量修改回原来的值  ，把之前修改的html组件的value的值改回原来的值，把修改过的html组件中的html内容恢复为原来的值，

6 重新执行原来的执行过的方法， 即CallbackFunctions中保存的方法。

以上内容给大家介绍的基于Jquery.history解决ajax的前进后退问题，代码知识起到演示的效果，重点在给大家介绍基本原理的实现。希望本文分享能够给大家带来意向不到的收获，欲了解更多有关jquery前进后退相关知识，请持续关注脚本之家网站。