纯 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 })
这样,就可以啦。
插播广告 ✧(≖ ◡ ≖✿)嘿嘿