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

来源：互联网发布：运营的数据分析水平编辑：程序博客网时间：2024/05/19 23:01

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，用代码说话。

<!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)这个函数。

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

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

mui.ajax() POST请求方法：

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()请求方法：

mui.get(url,{param:value},function(data){//获得服务器响应...},'json');

mui.post()请求方法：

mui.post(url,{param: value,param: value},function(data){//服务器返回响应，根据响应结果，分析是否登录成功；...},'json');

mui.getJSON()请求方法：

mui.getJSON(url,{param:value},function(data){//获得服务器响应...});

后面的三种方法都是从mui.ajax()方法中简化封装过来的，用法基本都一样。

下面是请求数据的Demo图：

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

阅读全文

2 0