Ajax拦截器的实现

个人觉得编程和下棋类似,卡位非常重要。一开始占据着有利的位置,当你在面对变化的时候就会非常灵活。编程中的卡位就是将一些关键的地方预留好,方便以后扩展。比如前端开发中的全局的事件代理,核心组件的基类设计,ajax拦截器等。

最近在做一个ajax加密的需求,就是所有ajax请求的参数都需要经过加密,防止他人盗用api。如果有ajax拦截器,这个需求实现会非常简单,只需要在拦截器里面实现加密即可。第一期,我们利用前端框架本身的ajax拦截器,完成了http加密,一切都很顺利。后续的第二期则遇个麻烦事情,我们需要对所有的前端工程(webvie、管理后台、活动...)进行加密,这些工程都是独立工程,而且使用的框架也不太一样。这就意味着我们第一期的加密代码很难被重用。

怎么办?我们想到了从更底层的XMLHttpRequest上去做文章,如果能在这层做掉,则和上层使用的框架无关了。即使跨越多个工程,也可以使用同一套加密方法。

经过调研window.XMLHttpRequest是可以被覆盖的。如果我们能包装一个和XMLHttpRequest一摸一样的构造器来覆盖原有的,则问题就解决了。经调研,几乎所有前端框架或库在做ajax特性检测时,会首先尝试使用XMLHttpRequest。那么在ie下,我们也可以将ActiveXObject包装成一个XMLHttpRequest。

该实现已经作为一个开源的小js库发布了。浏览器可以兼容到ie6+,若有类似的需求可以直接使用。代码总共不到200行,详情可以戳 https://github.com/vinnyguitar/xhr-overwrite。欢迎一起讨论,改进。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值