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。