AJAX页面状态保持思路详解

传统的页面,浏览器通过url访问页面,页面的内容由后台服务生成页面所有内容再发回给浏览器渲染展示。到AJAX流行的时候,很多信息为AJAX异步请求,比如:点击、翻页等。通常这种情况你一刷新浏览器,当前页面就会重置到初始状态。更不用说把看到的信息url发给好友了。

传统的状态保存在地址栏,如: www.abc.com/search?s=abc&id=23&page=3

如果通过这种方式的话,浏览器会刷新页面,如果使用锚点的话则不会刷新浏览器。具体是点击页面去请求数据的同时会改变地址栏“#”后面的值。我们翻页到第四页

如: abc.com/search#s=abc&id=23&page=4

这样还远远不够,如果用户点击“前进”“后退”,页面内容不会随之改变。之前参照网上别人的做法,用一个定时器来解决的。

/**
 * URL Watcher(require jQuery)
 * 监测url的变化
 * useage:
 * UrlWatcher.init(50);
 * UrlWatcher.AddListener(function(url,isFirstLoad){
 *    FrontEngine.generateFront();
 * });
 *
 */
var UrlWatcher = {
  "init": function (waittime) {
    this.UrlArray = [window.location.href];//set current url as default
    this.ListenerArray = [];
    this.ResetWaitTime(waittime);
  },
  "AddListener": function (listener) {//add a process function
    this.ListenerArray.push(listener || function () {});
  },
  "DeleteListener": function () {
    this.ListenerArray = [];
  },
  "ResetWaitTime": function (time) {//start timer
    if (this.IntervalHandle) {window.clearInterval(this.IntervalHandle); }
    this.WaitTime = time || 1000;
    this.IntervalHandle = window.setInterval(this.ListenerCall.setThis(this), this.WaitTime);
  },
  "ListenerCall": function () {
    var self = this, url = window.location.href;
    if (self.UrlArray[self.UrlArray.length - 1] === url) {return; }
    window.clearInterval(this.IntervalHandle);
    $.each(this.ListenerArray, function (c, listener) {
      listener(url, self.UrlArray.length === 0);
    });
    this.UrlArray.push(url);
    this.ResetWaitTime(this.WaitTime);
  }
};

Gmail中也用了状态保持的东西,但是url是不会改变的。目前也有专门的Framework实现这种功能,比如 RSHHistory Framework

之前我通过这种定时器的方法,解决了一些问题。但是,通过这种定时的方法不是实时触发的,总会有一个延时,因为是定时去不停的检测url中hash的变化。

说到hash,hash的变化在新的浏览器中是支持监测的。就是haschange这个事件,在html5中有定义。目前,各浏览器对haschange的支持情况如下:

Gecko 1.9.2 (Firefox 3.6/Thunderbird 3.1/Fennec 1.0)

IE 8

WebKit 528+ (Safari/Google Chrome)

Opera 10.70

只要浏览器版本比以前大的,都是支持的。此外,ie8以ie7模式运行时,window下存在onhashchange这个方法,但是不会触发这个事件。可以通过 检测IEdocument.documentMode这种方法来检测。

if( ('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8))
{   // 浏览器支持onhashchange事件
indow.onhashchange = hashChangeFire; // TODO,对应新的hash执行的操作函数
}
else
{   // 不支持则用定时器检测的办法
setInterval(function() {
var ischanged = isHashChanged(); // TODO,检测hash值或其中某一段是否更改的函数
if(ischanged)
{
hashChangeFire(); // TODO,对应新的hash执行的操作函数
}
},
150);
}

还是存在ie6/7以及ie8兼容模式下的兼容性问题:不能使用浏览器的前进后退按钮保持追踪,因为这些浏览器并不为锚点的改变创建历史。

要解决这个问题,可以创建一个隐藏的iframe,通过改变iframe的hash控制ie的历史记录,如 《jQuery hashchange event》 。

以上所述是小编给大家介绍的AJAX页面状态保持思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • jQuery Ajax 实现在html页面实时显示用户登录状态

    当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定ID 如: <div id="ajaxlogin"></div> 二.新建一个动态的ajaxlogin.php文件,用来判断用户是否登录了 代码如下: <? session_start(); if( $_SESSION['u_login']=='turelogi

  • jQuery基于ajax实现页面加载后检查用户登录状态的方法

    本文实例讲述了jQuery基于ajax实现页面加载后检查用户登录状态的方法.分享给大家供大家参考,具体如下: 拥有会员功能的网站,如果会员已经登录,那么要显示相应的登录状态,而且这种显示的需求是在网站的每个页面都有的(目前国内网站貌似都是这么做的,还没有见过其他形式的状态显示方式),这样,在打开一个新的页面时就要知道这个会员是否已经登录,需要判断登录的状态. 1.解决方案. 为了能够实现在每一个页面判断会员登录状态的功能,我采用了页面时通过ajax传递参数通过后端返回的登录状态结果进行判断,当然

  • AJAX页面状态保持思路详解

    传统的页面,浏览器通过url访问页面,页面的内容由后台服务生成页面所有内容再发回给浏览器渲染展示.到AJAX流行的时候,很多信息为AJAX异步请求,比如:点击.翻页等.通常这种情况你一刷新浏览器,当前页面就会重置到初始状态.更不用说把看到的信息url发给好友了. 传统的状态保存在地址栏,如: www.abc.com/search?s=abc&id=23&page=3 如果通过这种方式的话,浏览器会刷新页面,如果使用锚点的话则不会刷新浏览器.具体是点击页面去请求数据的同时会改变地址栏&quo

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • vuejs实现本地数据的筛选分页功能思路详解

    今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码 效果图: 项目需要:点击左侧进行数据筛选,实现自动分页,自动生成页数,点击自动跳转 项目代码:js代码 var subList=new Vue({ el:'#main', data:{ // subcontentData为本地数据 subContents:subcontentData, // 页面需要展现的数据 yemianda

  • jQuery validate+artdialog+jquery form实现弹出表单思路详解

    功能描述: 在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证. 适用范围: 适用于在列表页面新增,修改记录. 需要加载的js文件: jquery.min.js artDialog.js iframeTools.js jquery.form.js jquery.validate.js 实现思路: 在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写

  • iOS开发微信收款到账语音提醒功能思路详解

    一.背景 为了解决小商户老板们在频繁交易中不方便核对.确认到账的痛点,产品MM提出了新版本需要支持收款到账语音提醒功能.这篇文章总结了开发过程中遇到的坑和一些小技巧. 二.技术方案 后台唤醒App 收款到账语音提醒需要收款方在收到款后,播放一段TTS合成语音播报金额,微信在前台时可以通过模板消息将需要播报的金额带下来,再请求TTS数据并播放,但是app在挂起或者被kill掉的情况下要如何请求语音数据并播放呢? iOS提供了两种方式唤醒处于挂起或已经被kill掉的app.分别是Silent Not

  • AJAX工作原理及优缺点详解

    AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 一.ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 使用CSS和XHTML来表示. 使用DOM模型来交互和动态显示. 使用XMLHttpRequest来和服务器进行异步通信. 使用javascript来绑定和调用. 在上面几中技术中,除了XmlHttpReq

  • 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或其它参数.同时在工作中,我们还会发现,有一些ajax请求的数据,对实时性要求不高,即使我们把第一次请求到的这些数据缓存起来,然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响,通过这种手工的缓存控制,减少了ajax请求,多多少少也能帮助我们提高网页的性能.本文介绍我自己关于这两方

  • jQuery ajax的功能实现方法详解

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦. 我们只定义一个ajax方法,他可以简单的get,post,jsonp请求就可以啦~~ var ajax = function () { // 做一些初始化,定义一些私有函数等 return function () { //

  • SpringBoot实现短信验证码校验方法思路详解

    有关阿里云通信短信服务验证码的发送,请参考我的另一篇文章   Springboot实现阿里云通信短信服务有关短信验证码的发送功能 思路 用户输入手机号后,点击按钮获取验证码.并设置冷却时间,防止用户频繁点击. 后台生成验证码并发送到用户手机上,根据验证码.时间及一串自定义秘钥生成MD5值,并将时间也传回到前端. 用户输入验证码后,将验证码和时间传到后台.后台先用当前时间减去前台传过来的时间验证是否超时.如果没有超时,就用用户输入的验证码 + 时间 + 自定义秘钥生成MD5值与之前的MD5值比较,

  • Vue微信项目按需授权登录策略实践思路详解

    项目采用Vue作为开发框架,用户浏览页面时有两种情况: 一种是需要用户先登录之后才能继续浏览: 另一种是用户无需登录即可随意浏览. 在无需用户登录的页面中,可能包含需要用户信息的操作,此时就需要用户登录之后方能进行后续操作.因此,需要对授权登录策略进行区分. 思路 1.一般而言,我们为微信开发的H5页面,进入页面的时候就进行鉴权,要求用户登录之后才能继续浏览.但由于产品需求,这个项目我们需要对不同页面的鉴权策略进行划分,按照一般与特殊进行设计: 2.一般情况,用户进入页面第一时间要求用户授权登录

随机推荐

其他