1.起源是老的方法在遇到新需求时有些不足,在老方法的基础上做了封装。
一直说使用框架要学会看底层代码!看底层代码!看底层代码!重要的事情说三遍。这次整合方法把项目的底层翻了一遍,杂七杂八的看的头蒙。老前辈的思路也是6到不行,半蒙半醒ing~ 不多说 直接上代码:
1.分析需求:
1没有token时直接发送,有token时需要设置请求头.
2返回的token信息存到缓存中,每次发送请求得到数据更新该缓存.项目的安全级别并不高,所以直接放到了缓存中.
window.callAPI = function (url,fajaxType,dataInput,onSuccess,onTimeout,onError,headerObj,aSynSta) {
// FormData 对象
var form = new FormData();
// 可以增加表单数据
form.append("msg",dataInput.msg); // 表单对象
// XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
var xhrSyn=true;//默认异步
if (typeof(aSynSta)!="undefined"&&aSynSta==false){
xhrSyn=false;
}
xhr.open(fajaxType,url,xhrSyn);
if (headerObj && typeof(headerObj)!="undefined" && headerObj.length>10)
{
var headerobjs=headerObj.split("#");
for(var headnum=0;headnum<headerobjs.length;headnum++){
var headObjstr=headerobjs[headnum].split(";");
if(headObjstr.length==2){
xhr.setRequestHeader(headObjstr[0],headObjstr[1]);
}
}
}
xhr.onload = function(){
var res=JSON.parse(xhr.responseText);
if(this.status >= 200 && this.status < 300){
//返回的token保存到缓存中
_setTokenInfo(xhr.getResponseHeader("packet_type"),xhr.getResponseHeader("packet_token"),xhr.getResponseHeader("packet_check"));
onSuccess(res);
}
};
if(onTimeout!=null&& typeof onTimeout == 'function'){
xhr.ontimeout=onTimeout;
}
if(onError!=null && typeof onError == 'function'){
xhr.onerror=onError;
}
xhr.send(form);
};
function _setTokenInfo(_packet_type,_packet_token,_packet_check){
if(_packet_check && _packet_check!=null
&& _packet_token && _packet_token!=null
&& _packet_type && _packet_type!=null){
var _storage=window.localStorage;
var jsonObj=new Object();
jsonObj.packet_type=_packet_type;
jsonObj.packet_token=_packet_token;
jsonObj.packet_check=_packet_check;
jsonObj.fcompanyId=_packet_type;
jsonObj.fdatetime=new Date().getTime();
var objString=JSON.stringify(jsonObj);
_storage.setItem("tokenInfo",objString);
}
}
用jquery的话好像简单点,不过区别也不是太大,正好也练练手,熟悉熟悉原生ajax。