最近群里出现得比较多的问题是关于AJAX跨域请求的问题,通常大家使用的是 $.getJSON $.ajax 等用js本身实现的AJAX请求,这样的请求方式,在我看来,这样的方法会有几个问题:
1:需要引入第3方的库,如JQ或appcan自己提供的json.js文件。
2:新手会频繁的纠结于跨域的问题
*注意,使用该代码在打包时候需要勾选uexXmlHttpMgr插件
于是,我尝试着用appcan的uexXmlHttpMgr封装了AJAX请求,可以很好的实现跨域并且解决由于uexXmlHttpMgr.onData只能赋值一次,导致无法同时处理2次请求逻辑的问题,核心代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX</title>
<style>html,body{ background:#fff; font-size:35px;}</style>
</head>
<body>
<script>
/*
用uexXmlHttpMgr封装AJAX方法
主要解决uexXmlHttpMgr同时多次发起时,onData参数会被覆盖的问题(懂的人会懂的,不明白的人的话忽略 直接用即可。)
*/
window.AJAX = {
callBack : {},index : 1,
get : function(url,succCall,errCall,timeout){
var id = this.index++;
this.callBack[id] = [succCall,errCall];
uexXmlHttpMgr.open(id,'get',url,(timeout||0));
this._send(id);
},
post : function(url,data,succCall,errCall,timeout){
var id = this.index++;
this.callBack[id] = [succCall,errCall];
uexXmlHttpMgr.open(id,'post',url,(timeout||0));
if(data){
for(var k in data){
uexXmlHttpMgr.setPostData(id,0,k,data[k]);
}
}
this._send(id);
},
_send : function(id){
uexXmlHttpMgr.onData = this.onData;
uexXmlHttpMgr.send(id);
},
onData : function(inOpCode,inStatus,inResult){
var that=AJAX,callBack = that.callBack[inOpCode]||[];
if(inStatus==-1){
callBack[1] && callBack[1]();
delete that.callBack[inOpCode];
}else if(inStatus==1){
callBack[0] && callBack[0](inResult);
delete that.callBack[inOpCode];
}
}
};
window.uexOnload = function(){
//GET请求
AJAX.get('http://www.baidu.com',function(res){
alert('baidu');
alert(res);
},function(){
alert('我ca!baidu出错了');
});
//POST的第2个参数为需要post的数据
AJAX.post('http://m.baidu.com',{
'word':'刺鸟',
'word2':'qq4041990'
},function(res){
alert('mbaidu');
alert(res);
},function(){
alert('我ca!mbaidu出错了');
});
};
</script>
</body>
</html>