本文档部分API缺少示例代码,诚挚的邀请你参与到示例代码的编写中来,你可以在代码中发布2行自定义注释,内容自拟。 有意者可与刺鸟联系(QQ:4041990 Q群:7702175)

常用代码 » 使用uexXmlHttpMgr接口封装AJAX跨域请求

    最近群里出现得比较多的问题是关于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>