Mui --- app与服务器之间的交互原理、mui ajax使用

简介: 1、APP与服务器之间的交互原理 app端(客户端)与服务端的交互其实理解起来和容易,客户端想服务器端发送请求,服务器端进行数据运算后返回最终结果。结果可以是多种格式: 1、text 文本格式 2、xml 格式 3、json 格式 2、什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
1、APP与服务器之间的交互原理

app端(客户端)与服务端的交互其实理解起来和容易,客户端想服务器端发送请求,服务器端进行数据运算后返回最终结果。结果可以是多种格式:
1、text 文本格式
2、xml 格式
3、json 格式

2、什么是JSON?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSON 语法规则:
数据在键值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
简单的例子:
{name:'小明', age:'18'}

3、使用MUI提供的Ajax工具完成与服务器端的交互
mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型; 
本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。

4、mui.ajax()
参数:
url       Type: String  请求发送的目标地址
async     Type: Boolean 发送同步请求
data      {xx:xx,xxx:xxx} 发送到服务器的业务数据
dataType  "xml": 返回XML文档,"html": 返回纯文本HTML信息;,"script": 返回纯文本JavaScript代码,"json": 返回JSON数据,"text": 返回纯文本字符串
error     请求失败时触发的回调函数,该函数接收三个参数: (xhr:xhr实例对象,type:错误描述,可取值:"timeout", "error", "abort", "parsererror"、"null",errorThrown:可捕获的异常对象)
success   请求成功时触发的回调函数,该函数接收三个参数:(data:服务器返回的响应数据,类型可以是json对象、xml对象、字符串等;,textStatus:状态描述,默认值为'success', xhr:xhr实例对象)
timeout   请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调
type      请求方式,目前仅支持'GET'和'POST',默认为'GET'方式
headers   指定HTTP请求的Header
一个完整示例
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
    document.getElementById('btn1').addEventListener('tap',function(){
        mui.ajax({
            url      : 'http://demo.hcoder.net/index.php',
            type     : 'GET',
            success  : function(data){
                mui.toast(data);
            },
            error    : function(xhr,type,errorThrown){
                mui.toast(type);
            }
        });
    });
});
</script>5、Ajax简化模式
mui.post()方法是对mui.ajax()的一个简化方法,直接使用POST请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用mui.ajax()方法),使用方法: mui.post(url[,data][,success][,dataType]),如上登录鉴权代码换成mui.post()后,代码更为简洁,如下:
mui.post('http://server-name/login.php',{
    username:'username',
    password:'password'
},function(data){
    //服务器返回响应,根据响应结果,分析是否登录成功;
        ...
    },'json'
);
mui.get()方法和mui.post()方法类似,只不过是直接使用GET请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用mui.ajax()方法),使用方法: mui.get(url[,data][,success][,dataType]),如下为获得某服务器新闻列表的代码片段,服务器以json格式返回数据列表
mui.get('http://server-name/list.php',{category:'news'},function(data){
    //获得服务器响应
    ...
    },'json'
);
mui.getJSON()方法是在mui.get()方法基础上的更进一步简化,限定返回json格式的数据,其它参数和mui.get()方法一致,使用方法: mui.get(url[,data][,success]),如上获得新闻列表的代码换成mui.getJSON()方法后,更为简洁,如下:
mui.getJSON('http://server-name/list.php',{category:'news'},function(data){
    //获得服务器响应
    ...
    }
);
复制代码
 
本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/7467698.html/,如需转载请自行联系原作者
 
相关文章
|
8天前
|
数据采集 JSON 监控
Kotlin高效App爬取工具:利用HttpClient与代理服务器的技巧
Kotlin高效App爬取工具:利用HttpClient与代理服务器的技巧
|
8天前
|
前端开发 开发工具 Android开发
【服务器APP】利用HBuilder X把网页打包成APP
【服务器APP】利用HBuilder X把网页打包成APP
227 0
|
8月前
|
存储 边缘计算 负载均衡
直播APP源码搭建:核心的服务器系统
这就是直播APP源码平台的服务器系统,拥有着管理用户、数据、直播流质量与带宽等优秀的能力,是直播APP源码平台正常运行提供服务和用户优质体验的重要支撑,服务器系统可以说是直播APP源码平台的重要核心。
直播APP源码搭建:核心的服务器系统
|
9月前
|
弹性计算 固态存储 数据可视化
APP阿里云服务器租用价格表
APP阿里云服务器租用价格表,2023年阿里云服务器租用费用,轻量应用服务器和云服务器ECS优惠价格表,阿里云轻量应用服务器2核2G3M带宽轻量服务器一年108元,2核4G4M带宽轻量服务器一年297.98元12个月,云服务器ECS包括通用算力型u1、ECS计算型c7、通用型g7和内存型r7均有活动
190 0
|
Java 应用服务中间件 网络安全
在手机上app中链接或者浏览器上访问电脑上Tomcat搭建的服务器以及其内容
在手机上app中链接或者浏览器上访问电脑上Tomcat搭建的服务器以及其内容
248 0
在手机上app中链接或者浏览器上访问电脑上Tomcat搭建的服务器以及其内容
|
机器学习/深度学习 数据采集 弹性计算
阿里云服务器十大用途使用场景(网站/APP/小程序/视频/数据库)
阿里云服务器可以干什么?服务器的用途有很多,常见的有网站、小程序、视频服务器、手机APP等,例如微信基于腾讯云服务器,淘宝基于阿里云服务器
|
移动开发 安全 小程序
网站APP服务器数据被泄露该如何防护
数据泄露一旦发生,会对公司的造成极大的影响。如果处理妥当,危机还能够被化解。当公司遭到数据泄露时,至关重要的是在短期内快速的应急响应并处理,全面的前期准备是处理数据泄露事件的核心。在数据泄露产生以前,做好安全应急响应行动方案,能够尽可能的将损失降到最低。下边我们SINE安全的高级安全专家于涛,带领大家讨论怎样在发觉数据泄露的60分钟之内快速做出合理的安全事件响应。
141 0
|
运维 安全 关系型数据库
APP数据被泄露接到境外电话 该怎么查服务器漏洞
上海经济7月份开始陆续恢复,一些在上海做APP项目的客户开始了一系列的营销推广和发展,在众多渠道推广下,用户下载安装APP的同时,一些安全上的漏洞频发,并被高级黑客给盯上,具体的数据泄露攻击的症状为:用户刚注册好的用户信息就被泄露,不一会就会收到电话推广营销,并且有些用户的数据被恶意篡改,导致APP运营平台损失较大,比如一些用户借贷额度被篡改成20w的额度,APP项目方发现问题后立即找了APP安全应急响应服务团队进行了全面的安全应急响应服务,要求尽快找出漏洞问题的原因以及攻击进行溯源。
250 0
APP数据被泄露接到境外电话 该怎么查服务器漏洞
相亲app源码,服务器遭受攻击后需要做好的几件事
相亲app源码,服务器遭受攻击后需要做好的几件事
WM
|
弹性计算 小程序 关系型数据库
基于ECS搭建的应用示例(博客、密码管理、同学地图、APP服务端等)详解之一
作为互联网行业从业者,头脑里总是会冒出各种各样的想法,当然可以用网络笔记、云盘甚至本地的方式等记录下自己的想法,然而如果想要落地尝试,则拥有一台自己的服务器就再好不过了。全栈开发已经讲了很久了,如果是前端,通过nodejs也可以搭建后端服务;如果是后端,通过flutter、uniapp等也可以搭建出各种端上的APP;如果非研发人员,通过低代码开发平台拖拽也可以。有了自己的产品之后,如果不满足于本地跑跑,那么就得面临选择应用的载体了,性价比最高的方式是选择云上ECS,下面拿我的几年使用经验来展开讲一下。
WM
387 0
基于ECS搭建的应用示例(博客、密码管理、同学地图、APP服务端等)详解之一

热门文章

最新文章