HBuilder 开发 APP（二）——网络请求

猿小侯
1,509 阅读7分钟

        mui框架中给我们封装好了常用的Ajax函数，是基于XMLHttpRequest，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型。

        mui常用的请求方法：

        1、mui.ajax() ——最初的请求方法，可设置请求方式（GET、POST）、同步/异步、超时时间、请求头、返回数据类型、跨域等；

        2、mui.get() ——直接使用GET请求方式向服务器发送数据，不处理超时和异常；

        3、mui.post() ——直接使用POST请求方式向服务器发送数据，不处理超时和异常；

        4、mui.getJSON() —— 在mui.get()方法上进行简化，限定返回json格式的数据，其用法和mui.get()相同。

不再BB，用代码说话。

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="utf-8" >  
  6.         <title></title>  
  7.         <meta name="viewport"  content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
  8.         <meta name="apple-mobile-web-app-capable"  content="yes">  
  9.         <meta name="apple-mobile-web-app-status-bar-style"  content="black">  
  10.   
  11.         <script src="../js/mui.min.js" ></script>  
  12.         <link rel="stylesheet"  href="../css/mui.min.css">  
  13.     </head>  
  14.   
  15.     <body>  
  16.         <header class="mui-bar mui-bar-nav" >  
  17.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" ></a>  
  18.             <h1 class="mui-title" >网络请求</h1>  
  19.         </header>  
  20.         <div class="mui-content" >  
  21.             <div class="mui-content-padded"  style="padding-bottom: 50px;">  
  22.                       
  23.                 <div class= "mui-button-row">  
  24.                     <button type= "button" id="send" class= "mui-btn mui-btn-primary" >发送请求</button>  
  25.                 </div>  
  26.                 <h5 class= "mui-content-padded">响应结果：</h5>  
  27.                 <code id= "response"></code>  
  28.             </div>  
  29.         </div>  
  30.         <script>  
  31.             (function($) {  
  32.                 $.init();  
  33.                   
  34.                 var network = true;  
  35.                 if($.os.plus){  
  36.                     $.plusReady(function () {  
  37.                         //判断网络是否连接  
  38.                         if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){  
  39.                             network =  false;  
  40.                         }  
  41.                     });  
  42.                 }  
  43.                 var resp = document.getElementById("response");  
  44.                 var ajax = function() {  
  45.                     $.ajax('http://api.juheapi.com/japi/toh',{  
  46.                         data:{//请求携带数据  
  47.                             key: '1234567890',  
  48.                             v: '1.0',  
  49.                             month:'11',  
  50.                             day:'1'  
  51.                         },  
  52.                         type:'get',//HTTP请求类型  
  53.                         dataType:'json',//返回数据类型  
  54.                         success:function(data){//请求成功回调函数  
  55.                             response =  JSON.stringify(data);  
  56.                             resp.innerHTML =  response;  
  57.                         }  
  58.                     })  
  59.                     resp.innerHTML =  '正在请求中...';  
  60.                 };  
  61.                 //发送请求按钮添加点击事件  
  62.                 document.getElementById("send").addEventListener('tap', function() {  
  63.                     if(network){  
  64.                         ajax();  
  65.                     }else{  
  66.                         mui.toast("当前网络不给力，请检查网络...");  
  67.                     }  
  68.                 });  
  69.             })(mui);  
  70.         </script>  
  71.     </body>  
  72.   
  73. </html>   
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<script src="../js/mui.min.js"></script>
		<link rel="stylesheet" href="../css/mui.min.css">
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">网络请求</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" style="padding-bottom: 50px;">
					
				<div class="mui-button-row">
					<button type="button" id="send" class="mui-btn mui-btn-primary">发送请求</button>
				</div>
				<h5 class="mui-content-padded">响应结果：</h5>
				<code id="response"></code>
			</div>
		</div>
		<script>
			(function($) {
				$.init();
				
				var network = true;
				if($.os.plus){
					$.plusReady(function () {
						//判断网络是否连接
						if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
							network = false;
						}
					});
				}
				var resp = document.getElementById("response");
				var ajax = function() {
					$.ajax('http://api.juheapi.com/japi/toh',{
						data:{//请求携带数据
							key: '1234567890',
							v: '1.0',
							month:'11',
							day:'1'
						},
						type:'get',//HTTP请求类型
						dataType:'json',//返回数据类型
						success:function(data){//请求成功回调函数
							response = JSON.stringify(data);
							resp.innerHTML = response;
						}
					})
					resp.innerHTML = '正在请求中...';
				};
				//发送请求按钮添加点击事件
				document.getElementById("send").addEventListener('tap', function() {
					if(network){
						ajax();
					}else{
						mui.toast("当前网络不给力，请检查网络...");
					}
				});
			})(mui);
		</script>
	</body>

</html>

        上面的代码中我们使用mui.ajax() GET方式进行请求数据，我们简单设置了请求类型、返回数据类型、成功回调等，当然我们还可以设置失败回调error以及超时timeout等，小伙伴们可以自己亲自设置运行一下，请求数据的写法就这么简单，一看就明白，在这里就不做解释了。在这里我们拓展分析一下上面代码中(function($){.......})(mui)这个函数。

        (function($){.......})(mui); 这实际上是一个匿名函数，就比如 function(arg){......};参数为arg，当我们调用函数时要在函数后面加上传递的实参，比如function(arg){......}(param);  但由于操作符的优先级，函数本身也要用括号括起来，即(function(arg){......})(param)，后面括号中的param就是我们传递的实参。所以(function($){......})(mui)是一个参数为$的匿名函数，并将mui作为参数来调用这个匿名函数（mui是全局变量，会自动执行函数），之所以使用$作为形参，是为了不与其他库冲突。

        熟悉jQuery的司机师傅们经常会开到这种车，为啥？因为这样做有一个极大的好处，就是形成闭包，在(function($){......})(mui)内部定义的变量和函数只在此范围内有效，不增加额外的全局变量，不会影响到外部，保护函数内的变量安全，加强了封装性。听着是不是很棒棒啊？不过任何东西都具有两面性，有好处就有坏处，闭包虽好，也不能滥用哦。。。闭包最大的缺点就是常驻内存，会增大内存使用量，使用不当会造成内存泄漏的。所以，司机师傅们，开车需谨慎，安全最重要。

        好了，我们接下来看看其他请求数据的方法：

mui.ajax() POST请求方法：

[html] view plain copy print?
  1. mui.ajax(url,{  
  2.     data:{  
  3.         param: value,  
  4.         param: value  
  5.     },  
  6.     dataType:'json',//服务器返回json格式数据  
  7.     type:'post',//HTTP请求类型  
  8.     timeout:10000,//超时时间设置为10秒；  
  9.     headers:{'Content-Type':'application/json'},//设置请求头                
  10.     success:function(data){  
  11.         //服务器返回响应，根据响应结果，分析是否登录成功；  
  12.         ...  
  13.     },  
  14.     error:function(xhr,type,errorThrown){  
  15.         //异常处理；  
  16.         console.log(type);  
  17.     }  
  18. });  
mui.ajax(url,{
	data:{
		param: value,
		param: value
	},
	dataType:'json',//服务器返回json格式数据
	type:'post',//HTTP请求类型
	timeout:10000,//超时时间设置为10秒；
	headers:{'Content-Type':'application/json'},//设置请求头              
	success:function(data){
		//服务器返回响应，根据响应结果，分析是否登录成功；
		...
	},
	error:function(xhr,type,errorThrown){
		//异常处理；
		console.log(type);
	}
});
mui.get()请求方法：
[html] view plain copy print?
  1. mui.get(url,{param:value},function(data){  
  2.         //获得服务器响应  
  3.         ...  
  4.     },'json'  
  5. );  
mui.get(url,{param:value},function(data){
		//获得服务器响应
		...
	},'json'
);
mui.post()请求方法：
[html] view plain copy print?
  1. mui.post(url,{  
  2.         param: value,  
  3.         param: value  
  4.     },function(data){  
  5.         //服务器返回响应，根据响应结果，分析是否登录成功；  
  6.         ...  
  7.     },'json'  
  8. );  
mui.post(url,{
		param: value,
		param: value
	},function(data){
		//服务器返回响应，根据响应结果，分析是否登录成功；
		...
	},'json'
);
mui.getJSON()请求方法：
[html] view plain copy print?
  1. mui.getJSON(url,{param:value},function(data){  
  2.         //获得服务器响应  
  3.         ...  
  4.     }  
  5. );  
mui.getJSON(url,{param:value},function(data){
		//获得服务器响应
		...
	}
);
后面的三种方法都是从mui.ajax()方法中简化封装过来的，用法基本都一样。

下面是请求数据的Demo图：



好了，不能再瞎BB了，到点了，该去要饭了……



avatar
文章
阅读
粉丝