在此先记下思路。

场景:登录页面login,在一个登录后才能访问的页面dashboard,dashboard上有一个按钮button,button绑定了一个单击事件,触发后发出一个ajax请求,ajax请求返回一个html片段,并把这个html片段更新到某个dom标签。

条件:dashboard页面如果登录过期,再次访问dashboard或点击button发出ajax请求应该跳转到登录页面login。

问题: 如果对ajax熟悉或有以上类似情况经验的,应该知道,登录过期后,如果不刷新dashboard页面,而直接点击button发出ajax请求,那么ajax获取到的响应内容会是整个登录页面login,而不是正确的那个html片段,这样更新到dom标签的话,页面整个乱掉了。

解决:ajax请求的地址在响应内容前先做登录判断,如过期则返回一个标志位,比如login=false\true,在ajax回调的方法中判断此标志位, 如果login=true,则location.href=登陆页面url。

优雅:理论上是这样,还没试验。拿javaEE应用+jQuery Ajax(版本1.5+)来说。因为我比较熟悉JEE。JEE可以通过过滤器Filter来控制所有的受登录保护的url请求。

jQuery Ajax可以通过ajaxSetup设置全局选项,其中有一项是关于响应的状态码的,在1.5+版本中叫 statusCode ,而且jQuery Ajax有一个请求头:X-Requested-With = XMLHttpRequest

没错了,通过状态码及请求头就可以更方便,更自动的解决登录保护问题。

做法为: Filter通过request.getHeader(“X-Requested-With”)可以判断是否为Ajax请求(所以自己写的ajax最好也加上这个请求头)。 当是Ajax请求并且登录已经过期,则直接在Filter中响应一个状态码401,或者其他自定义各种码。在ajaxSetup全局选项中配置如何处理这个状态码,亦即location.href=登陆页面url。这样就可以统一自动的处理各种登录保护下的ajax请求了。

ajaxSetup例子如下:

$.ajaxSetup({

statusCode: {

'401': function() {

//alert('登录超时了哦...');

//如果做了登录自动跳回,可以再加个东东

var currUrl = encodeURIComponent(location.href);

location.href = '/login?url=' + currUrl;

}

}

});

/* URI编码及解码方法 */

/* 推荐方式 */

console.info(encodeURIComponent('http://www.aa.com/hh ll/'));

console.info(decodeURIComponent('http://www.aa.com/hh ll/'));

/* 另外的简单方式

encodeURI 不对下列字符进行编码:“:”、“/”、“;”和“?”。请使用 encodeURIComponent 对这些字符进行编码

*/

console.info(encodeURI('http://www.aa.com/hh ll/'));

console.info(decodeURI('http://www.aa.com/hh ll/'));

怎么样给ajax的ulr加密,研究Ajax请求受登录保护的URL的优雅解决相关推荐

  1. zepto源码研究 - ajax.js($.ajaxJSONP 的分析)

    简要:jsonp是一种服务器和客户端信息传递方式,一般是利用script元素赋值src来发起请求.一般凡是带有src属性的元素发起的请求都是可以跨域的. 那么jsonp是如何获取服务器的数据的呢? j ...

  2. ajax 模拟表单提交,Ajax模拟Form表单提交,含多种数据上传

    ---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...

  3. 掌握 Ajax,第 1 部分: Ajax 入门简介

    2019独角兽企业重金招聘Python工程师标准>>> 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作原理,构建网站的一种有效方法 Ajax 由 HTM ...

  4. ajax上传 java_使用Ajax进行文件与其他参数的上传功能(java开发)

    文件上传: 记得前一段时间,为了研究Ajax文件上传,找了很多资料,在网上看到的大部分是form表单的方式提交文件,对于Ajax方式提交文件并且也要提交表单中其他数据,发现提及的并不是很多,后来在同事 ...

  5. ajax资料收集-Ajax文章(教程和实例)---Ajax资源下载(源码和教程)---Ajax规范标准

    CSDN Blog Ajax文章搜索: http://search.csdn.net/search/ajax/1/blog/ 专题:Ajax技术应用开发 http://www.51cto.com/ht ...

  6. JAVA AJAX教程第一章-初始AJAX

    既然是认识AJAX,理论和实践相结合,这样让自己学的更快,理解更深入,我分一下几点: 1.  认识传统的同步交互方式和AJAX解决方案 2.  AJAX使用到的技术 3.  实例体验AJAX 一.同步 ...

  7. typecho模板ajax,Typecho实现全站式Ajax的方法

    我相信不懂jQuery和Ajax的朋友看到这篇文应该会挺高兴的,因为目前网络上关于Typecho的Ajax关键字全是willin kan做的AjaxComments插件.如果你对Typecho的全站化 ...

  8. ajax send报错,jquery ajax beforeSend 提交等待问题

    需要使用异步加载async : true 否则不会出现等待效果 $.ajax({ url : $('#form').attr("action"), data: $('#form') ...

  9. Ajax如何设置contenttype,jquery ajax contentType设置

    默认get方法没有contentType,post方法的contentType为:application/x-www-form-urlencoded; charset=UTF-8 (1) 设置成app ...

最新文章

  1. chvg改变vg中LV的数量
  2. java工程师有什么要求_什么是java,java工程师应该具备哪些能力?
  3. linux mysql设置数据库utf_设置mysql数据库 utf8
  4. 关于HTML的面试题-html5/css3篇
  5. HibernateTemplate的一些常用方法总结
  6. 实时内核(Core)和实时操作系统(RTOS)有何不同?
  7. 压力大想出家? 这所高校招收佛学研究生,毕业后安排去向,就业前景好!
  8. 微软更新Azure SQL将可根据重要性工作进行重整顺序
  9. Win10中docker安装nuget服务器及使用
  10. 代码描述10911 - Forming Quiz Teams
  11. Python 多线程7-线程通信
  12. 推荐!手把手教你使用Git(转)
  13. x86 vt-d在linux中的应用
  14. 为什么中国的数字是四位一进,而西方的是三位一进?
  15. BUUCTF Cipher writeup
  16. ktv管理系统_著作权大数据管理平台开始公测 或将解决KTV行业版权困扰
  17. 再聊聊Python中文社区的翻译
  18. 使用IE浏览器将pfx转为cer证书
  19. lotus-miner 元数据备份
  20. 思科关闭日志_详解Cisco(思科)路由器的故障日志

热门文章

  1. sqrt()函数的详解和用法
  2. 用构造函数来完成结构体的初始化
  3. MySQL中的用户管理
  4. 【uni-app】深度作用选择器解决修改checkbox样式无效问题
  5. Select控件可选可输入
  6. SpringBoot接口幂等性实现的4种方案!
  7. 深入理解Java虚拟机(第三弹)- JVM 内存分配与回收策略原理,从此告别 JVM 内存分配文盲
  8. Java 集合系列(4): LinkedList源码深入解析1
  9. 一天搞定CSS:盒模型content、padding、border、margin--06
  10. windows7内存诊断工具有用吗_Win7怎么使用自带工具进行内存检测?