在前端开发中,我们很喜欢一种风格,就是页【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net面无刷新,加载新的页面。但是在ajax的【本文受版权保护】转载请注明出处:www.tangshuang.net加载中,有一个问题,就是页面加载进来很容转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】易,却无法做到在浏览器的前进、倒退时,正【作者:唐霜】原创内容,盗版必究。确的使用页面。那么,怎么来实现这种风格呢【转载请注明来源】著作权归作者所有,禁止商业用途转载。?一般而言,有两种形式,一种是通过has本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。h的变化来确定ajax要加载哪个页面,另未经授权,禁止复制转载。【转载请注明来源】一种则是我们这篇文章重点要使用的hist著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。ory.pushState方法。
著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】原创内容,盗版必究。history.replaceState实现静态化的url改变
这是一个html5的特性,仅高级浏览器可本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】以支持,低版本的浏览器是不支持的,因此我著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net们在文末会讨论兼容方案。
【版权所有,侵权必究】原创内容,盗版必究。转载请注明出处:www.tangshua【转载请注明来源】【未经授权禁止转载】ng.nethistory.state我们会用到四个原创内容,盗版必究。【原创不易,请尊重版权】动作,第一个动作就是history.re【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】placeState。它的作用是使his【原创内容,转载请注明出处】【本文首发于唐霜的博客】tory.state的内容发生变化,这个转载请注明出处:www.tangshuang.net【未经授权禁止转载】变化在外在表现来看,就是url的变化:
【版权所有,侵权必究】【版权所有,侵权必究】var url = '/url_to_load',selector = '#content';
$.ajax({
url: url,
type: 'get',
success: function(html) {
var content = $(html).find(selector).html(), title = $(html).find('title').html();
$(selector).html(content);
document.title = title;
var state = {
url: url,
title: title,
selector: selector,
content: content
}
window.history.replaceState(state,title,url);
}
});
在上面这个代码中,我们首先使用到了rep【转载请注明来源】【未经授权禁止转载】laceState这个方法。它的第一个参原创内容,盗版必究。【版权所有,侵权必究】数就是history.state,我们会【本文首发于唐霜的博客】原创内容,盗版必究。在下文用到,如果仅仅是为了实现url的变著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】化,完全可以先无视state参数,把这段本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。代码简化为:
【本文首发于唐霜的博客】【版权所有,侵权必究】【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net原创内容,盗版必究。ang.net【未经授权禁止转载】var url = '/url_to_load',selector = '#content';
$.ajax({
url: url,
type: 'get',
success: function(html) {
var content = $(html).find(selector).html(), title = $(html).find('title').html();
$(selector).html(content);
document.title = title;
window.history.replaceState(null,null,url);
}
});
把replaceState方法的第一个和【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。第二个参数都可以设置为null,这样仅仅【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net实现了url的变化。history.re【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。placeState可以在任何时候使用,【版权所有,侵权必究】【版权所有,侵权必究】不一定非得在$.ajax中,一旦通过hi转载请注明出处:www.tangshuang.net【版权所有,侵权必究】story.replaceState修改本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.neturl之后,刷新浏览器页面,就会打开改变【本文受版权保护】【关注微信公众号:wwwtangshuangnet】后的地址,而与改变之前的页面无关了。
本文作者:唐霜,转载请注明出处。【未经授权禁止转载】【版权所有,侵权必究】history.pushState向浏览器历史记录中新增状态内容
虽然我们在上面实现了无刷新改变url,但本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。是当我们通过浏览器前进倒退时,却无法做到【本文受版权保护】本文版权归作者所有,未经授权不得转载。瞬间打开之前的页面。为了实现这个效果,我【版权所有,侵权必究】【未经授权禁止转载】们使用到history.pushStat【版权所有,侵权必究】未经授权,禁止复制转载。e,不过需要注意的是,它只是其中必须的一【转载请注明来源】【本文首发于唐霜的博客】个部分,而不是我们实现这个效果的全部。
未经授权,禁止复制转载。转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.netng.net【版权所有,侵权必究】转载请注明出处:www.tangshua【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ng.net在上面的代码中,我们已经发现了repla著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。ceState方法的第一个参数是stat【本文首发于唐霜的博客】原创内容,盗版必究。e,它就是一个历史记录的内容,但是它改变【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】的是当前的历史记录的内容。我们可以这么去【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。思考:
本文作者:唐霜,转载请注明出处。【本文受版权保护】本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】未经授权,禁止复制转载。url_1 => state_1
原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】url_2 => state_2 原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】// current
著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】【版权所有】唐霜 www.tangshu【作者:唐霜】【原创内容,转载请注明出处】ang.net
一个url对应一个state,这个sta转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】te的内容是没有任何关系的,除了url这【版权所有】唐霜 www.tangshuang.net【转载请注明来源】个属性是必须的意外,其他的任何属性,都可【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。以我们自己来规定。而且这个state跟页【关注微信公众号:wwwtangshuangnet】【作者:唐霜】面的展示几乎没有什么关系(在没有用到的a【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。jax的情况下除外),它就是一个临时的变【转载请注明来源】著作权归作者所有,禁止商业用途转载。量,而且是和url一一对应的。
【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】原创内容,盗版必究。ang.net本文作者:唐霜,转载请注明出处。【作者:唐霜】例如我们当前访问的页面是url_2,那么本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。对应的就是state_2,它的内容我们是【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。不知道的。但是当我们执行history.转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】replaceState(state_3【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。,title_3,url_3)的时候,我【关注微信公众号:wwwtangshuangnet】【转载请注明来源】们原本以为历史记录中变成了:
【转载请注明来源】本文作者:唐霜,转载请注明出处。原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。url_1 => state_1
原创内容,盗版必究。原创内容,盗版必究。url_2 => state_2
【本文首发于唐霜的博客】原创内容,盗版必究。url_3 => state_3
【本文受版权保护】【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。
但是实际上,当前历史记录中的结果却是:
本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshua未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】ng.net【未经授权禁止转载】未经授权,禁止复制转载。【本文受版权保护】url_1 => state_1u本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。rl_3 => state_3 /【未经授权禁止转载】本文作者:唐霜,转载请注明出处。/ current
未经授权,禁止复制转载。【作者:唐霜】
也就是当前原本是url_2的内容,被全部著作权归作者所有,禁止商业用途转载。【转载请注明来源】替换为了url_3的内容。
原创内容,盗版必究。【版权所有,侵权必究】原创内容,盗版必究。当你点击浏览器的返回按钮的时候,页面进入【版权所有,侵权必究】未经授权,禁止复制转载。了url_1。怎么才能得到我们想要的结果原创内容,盗版必究。【原创内容,转载请注明出处】呢?这时pushState方法就来了。
【未经授权禁止转载】【原创不易,请尊重版权】转载请注明出处:www.tangshua原创内容,盗版必究。【转载请注明来源】ng.net在执行replaceState之前,我们【关注微信公众号:wwwtangshuangnet】【转载请注明来源】做这样的一个动作:
著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】【原创内容,转载请注明出处】【未经授权禁止转载】var state = {
url: window.loaction.href,
title: document.title,
selector: '#content',
content: $('#content').html()
};
history.pushState(state,state.title,state.url);
这样,就将当前页面的内容加入到历史记录中【本文受版权保护】【原创内容,转载请注明出处】,也就是上面我们想象的url_1,url未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net_2,url_3的顺序。当执行完repl【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。aceState后,点击浏览器的后退按钮未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】,浏览器就调用出来了url_2的内容。所【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】以,我们将上面的代码进行修改,得到:
【转载请注明来源】【版权所有,侵权必究】var url = '/url_to_load',selector = '#content';
$.ajax({
url: url,
type: 'get',
success: function(html) {
var state = {
url: window.loaction.href,
title: document.title,
selector: '#content',
content: $('#content').html()
};
history.pushState(state,state.title,state.url);
var content = $(html).find(selector).html(), title = $(html).find('title').html();
$(selector).html(content);
document.title = title;
var state = {
url: url,
title: title,
selector: selector,
content: content
}
window.history.replaceState(state,title,url);
}
});
通过监听window的popstate事件来确定是否改变页面内容
当完成上面两个步骤之后,我们的浏览器历史转载请注明出处:www.tangshuang.net【转载请注明来源】记录中,就有了对应的几个url,以及它们【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net对应的state。当我们点击浏览器的前进未经授权,禁止复制转载。未经授权,禁止复制转载。或后退按钮的时候,url就会发生变化,但转载请注明出处:www.tangshuang.net原创内容,盗版必究。是,如果我们不执行下面的动作,页面就不会本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。有任何的改变。
【原创不易,请尊重版权】【版权所有,侵权必究】【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ngnet】我们在脚本中加入如下的代码:
【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。$(window).bind("popstate", function() {
// 当url发生变化时,你想做什么?
});
通过给window绑定popstate事【转载请注明来源】转载请注明出处:www.tangshuang.net件监听,可以在点击浏览器的前进和后退时,原创内容,盗版必究。【转载请注明来源】执行某些动作。
原创内容,盗版必究。转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。【作者:唐霜】ng.net原创内容,盗版必究。【未经授权禁止转载】通过history.state取出我们需要的状态内容
但是,我们怎么样才能让我们之前的内容重新【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。恢复到原来的页面中呢?有些人选择的办法是本文作者:唐霜,转载请注明出处。【作者:唐霜】,在popstate事件监听的回调中,再【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。用ajax去请求对应的url内容。这种做【原创不易,请尊重版权】【作者:唐霜】法显然的低效的。如果你按照我们上面的代码【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net那样去做,那很好,你需要的内容已经保存在【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】history.state中了。
原创内容,盗版必究。【版权所有,侵权必究】【版权所有,侵权必究】$(window).bind("popstate", function() {
var state = history.state;
if(state.selector == undefined) return; // 第一次访问页面的时候,selector属性不存在,不用执行动作
if(state.content == undefined) return; // 同上
$(state.selector).html(state.content);
document.title = state.title;
window.history.replaceState(state,state.title,state.url);
});
我们在前面的pushState动作中,通转载请注明出处:www.tangshuang.net原创内容,盗版必究。过把selector和对应的conten【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】t都放到了history.state中,本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。所以,现在把它取出来,直接替换掉页面中的【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net内容即可,包括替换网页标题和select【原创内容,转载请注明出处】【本文首发于唐霜的博客】or区域内的html内容。
【未经授权禁止转载】【作者:唐霜】这里有一个state顺序需要注意一下。比【原创不易,请尊重版权】【未经授权禁止转载】如,我们通过pushState和repl本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.netaceState,最终得到了如下的his【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.nettory.state列表:
本文版权归作者所有,未经授权不得转载。【本文受版权保护】【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。url_1 => state_1
未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】url_2 => state_2
本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshu【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。ang.net【未经授权禁止转载】【原创内容,转载请注明出处】url_3 => state_3 【未经授权禁止转载】【本文受版权保护】// current
未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu【本文受版权保护】【转载请注明来源】ang.net原创内容,盗版必究。url_4 => state_4
转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。【本文受版权保护】ng.net【原创内容,转载请注明出处】转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】ng.net转载请注明出处:www.tangshua【原创内容,转载请注明出处】原创内容,盗版必究。ng.net
这是,当我们点击后退按钮时,url切换到【原创内容,转载请注明出处】原创内容,盗版必究。了url_2,同时在window的pop原创内容,盗版必究。【作者:唐霜】state事件监听回调函数中,histo本文版权归作者所有,未经授权不得转载。【本文受版权保护】ry.state也变为了state_2,未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。而不是state_3。
【作者:唐霜】原创内容,盗版必究。本文作者:唐霜,转载请注明出处。基于history.state的无刷新页面加载插件制作
既然我们已经知道了这一系列的原理,那么接【转载请注明来源】【版权所有,侵权必究】下来,我们自己来写一个插件,可以方便我们【本文首发于唐霜的博客】未经授权,禁止复制转载。直接在项目中重复使用这个插件,实现我们想【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net要的无刷新页面加载效果。
未经授权,禁止复制转载。【作者:唐霜】!function(dependencies,factory){
// amd || cmd
if(typeof define == 'function' && (define.cmd || define.amd)) {
define(dependencies,function() {
return factory();
});
}
else {
var ex = factory();
// CommonJS NodeJS
if(typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = ex;
}
}
}(['jquery'],function(){
$.ajaxPage = function(options) {
var defaults = {
url: window.location.href,
find: '#ajax-body',
replace: '#ajax-body',
beforeSend: null,
success: null,
error: null,
complete: null
};
if(typeof options === 'string') defaults.url = options; // 如果传入的参数是url地址
options = $.extend(defaults,options);
$.ajax({
url: options.url,
beforeSend: function() {
$('html').addClass('ajax-loading');
if(typeof options.beforeSend === 'function') options.beforeSend();
},
success: function(result) {
var state = {
title: document.title,
url: window.location.href,
selector: options.replace,
content: $(options.replace).html()
};
history.pushState(state, state.title, state.url);
var $html = $('<div></div>').append(result);
var title = $html.find('title').html();
var content = $html.find(options.find).html();
document.title = title;
$(options.replace).html(content);
// 下面这段代码是为了解决微信中document.title只执行一次的问题,有了这段代码,微信里面的document.title也会跟着一起变化
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf('micromessenger') > -1 && ua.indexOf('iphone') > -1) {
var $iframe = $('<iframe src="/favicon.ico"></iframe>');
$iframe.on('load',function(){
setTimeout(function() {
$iframe.off('load').remove();
},0);
}).appendTo('body');
}
state = {
title: title,
url: options.url,
selector: options.replace,
content: content
};
window.history.replaceState(state, title, options.url);
if(typeof options.success === 'function') options.success(result);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
if(typeof options.error === 'function') options.error(XMLHttpRequest, textStatus, errorThrown);
if(options.loading) $.hideLoading();
},
complete: function(XMLHttpRequest, textStatus) {
$('html').removeClass('ajax-loading');
if(typeof options.complete === 'function') options.complete(XMLHttpRequest, textStatus);
}
});
};
$(window).bind("popstate", function() {
var state = history.state;
if(state.selector == undefined) return; // 第一次访问页面的时候,selector属性不存在,不用执行动作
if(state.content == undefined) return; // 同上
$(state.selector).html(state.content);
document.title = state.title;
window.history.replaceState(state,state.title,state.url);
});
});
首先,我们使用了omd框架来让插件兼容各种模式下的调用。接着,【转载请注明来源】【本文受版权保护】我们根据上面的原理,写了$.ajaxPa【版权所有,侵权必究】原创内容,盗版必究。ge,最后,给window绑定了pops【未经授权禁止转载】【未经授权禁止转载】tate事件。
【转载请注明来源】【版权所有,侵权必究】【版权所有,侵权必究】【原创内容,转载请注明出处】使用方法:
本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。【转载请注明来源】首先是了解插件传入值有两种,第一种是ur【原创内容,转载请注明出处】【本文受版权保护】l,第二种是对象。如果传入字符串,其他选【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】项将使用默认值,如果传入对象,则可以规定未经授权,禁止复制转载。【作者:唐霜】更多内容。
未经授权,禁止复制转载。【本文受版权保护】原创内容,盗版必究。我们来看一个例子:
【未经授权禁止转载】原创内容,盗版必究。本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。a.html: 所有的页面的内容,都放在#ajax-bo未经授权,禁止复制转载。【本文首发于唐霜的博客】dy中,把#ajax-body当做bod本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】y来用,这个地方有点难度,需要功力深一点【版权所有,侵权必究】【作者:唐霜】才能理解为什么
【原创不易,请尊重版权】【原创内容,转载请注明出处】【访问 www.tangshuang.n【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】<html>
...
<body>
<div id="ajax-body"><a href="ajax.html">ajax</a></div>
</body>
</html>
javacript1.js:
转载请注明出处:www.tangshua【关注微信公众号:wwwtangshuangnet】【转载请注明来源】ng.net【版权所有,侵权必究】转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ng.netjQuery(function($){
$(document).on('click','a[href]',function(e) {
e.preventDefault();
var url = $(this).attr('href');
$.ajaxPage(url);
});
});
javacript2.js:
本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。jQuery(function($){
$(document).on('click','a.only-content[href]',function(e) {
e.preventDefault();
var url = $(this).attr('href');
$.ajaxPage({
url: url,
find: '#content',
replace: '#content'
});
});
});
兼容性问题
文章最开始,我们已经预告了末尾要讨论兼容【未经授权禁止转载】未经授权,禁止复制转载。性问题。这里主要是指,在部分浏览器中并不【作者:唐霜】原创内容,盗版必究。支持history.pushState和本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】history.replaceState转载请注明出处:www.tangshuang.net【转载请注明来源】的操作,也没有window.popsta【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。te事件,这就会使得我们在点击前进后退,转载请注明出处:www.tangshuang.net原创内容,盗版必究。会直接打乱我们在这个插件中的一些预期。因【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】此,我们可以采用一些兼容性方案。
【本文受版权保护】【转载请注明来源】原创内容,盗版必究。首先是判断是否可以使用pushState【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。和replaceState方法:
【本文受版权保护】转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。ng.netif(history && history.pushState) {
...
}
在这个地方有一个基本的语法常识,就是&a【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】mp;&运算与&运算的区【版权所有,侵权必究】【原创不易,请尊重版权】别。如果history=undefine本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。d,这个时候直接使用if(history.pushState)进行判断的话,会导致错误而终止程序执行。
如果浏览器不支持history.push【本文受版权保护】著作权归作者所有,禁止商业用途转载。State,那么怎个插件的url和his【原创内容,转载请注明出处】【作者:唐霜】tory部分会失效,而ajax部分会起效著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。(当然,会由于报错而终止),所以,就必须【未经授权禁止转载】未经授权,禁止复制转载。采用其他的方法来替代。最好的替代方案就是【作者:唐霜】【关注微信公众号:wwwtangshuangnet】hash办法,这我们会在另外的文章中去详【本文受版权保护】【未经授权禁止转载】解。
【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。ngnet】本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】2016-03-13 11727 ajax



[…] 在之前的文章《ajax无刷新加载页面,结合history.state修改url》中,我详细解释了history.pushState、history.replaceState、history.state以及window.popstate这四个关键元素,并试图建立一个合理的ajax无刷新更换URL的页面加载方式。但那之后,我遇到一个比较复杂的问题,集中在state的内容上,本文则来详解state这个要素。 […]
[…] 在webapp中加入ajaxPage机制,实现无刷新页面跳转 […]