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