纯 js 让浏览器不缓存 ajax 请求

开发「bufpay.com 个人即时到账收款平台」支付页面需要用到 ajax 轮询订单的支付状态。

现在浏览器对 ajax 的缓存策略遵循 http response header 里面的缓存设置,为了保证每次轮询需要获取最新的订单信息,我们需要对 ajax 请求做一些修改。

如果你使用 jquery 可以直接在 document ready 的时候用

 $.ajaxSetup({ cache: false });

来让每个 ajax 请求都在后面添加时间戳。

bufpay.com 的支付页面为了最快的加载速度,就没有使用任何第三方库(jquery 库压缩后都有大概100K),所以这里就手动在每个 ajax 请求里面添加时间戳,代码如下:

//纯 js 实现 ajax 请求            
var ajax = function(url, method, callback, params = null) {
                 var obj;
                 try {
                  obj = new XMLHttpRequest();
                 } catch(e){
                   try {
                     obj = new ActiveXObject("Msxml2.XMLHTTP");
                   } catch(e) {
                     try {
                       obj = new ActiveXObject("Microsoft.XMLHTTP");
                     } catch(e) {
                       alert("Your browser does not support Ajax.");
                       return false;
                     };
                   };
                 };
                 obj.onreadystatechange = function() {
                  if(obj.readyState == 4) {
                     callback(obj);
                  };
                 };
                 obj.open(method, url, true);
                 obj.send(params);
                 return obj;
             };

//请求的时候
var obj = ajax("{{domain}}/api/query/{{aoid}}?_=" + new Date().getTime(), "GET",  function(obj) {
    // do something
})

这样,就可以啦。

插播广告

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Ajax 表单提交 在HTML中提供了表单提交的功能,我们可以通过表单把数据从前台提交到后台 在HTML的DOM中...
    羊烊羴阅读 724评论 0 4
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,481评论 25 708
  • 昨天去珠海,看了我梦寐以求的仙剑三舞台剧,这是玩了这么多年的仙剑以来,第一次去看舞台剧。 我太兴奋了,八点钟开始的...
    水轻扬阅读 207评论 0 0
  • 如意进来时发现环翠仍呆立在原地,道“还不下去。” 环翠听到声音立刻凑过去,“你说宫主被那神秘男子救走后已有半年了,...
    半盏风月阅读 1,783评论 2 3
  • 火烧云 晚饭过后,火烧云上来了。大白狗变成金的了、花变成五颜六色的了、爷爷和爸爸的胡须变成红的...
    五帅六华阅读 445评论 0 1