Mui --- app与服务器之间的交互原理、mui ajax使用-阿里云开发者社区

开发者社区> 科技小毛> 正文

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

简介:
+关注继续查看
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){
    //获得服务器响应
    ...
    }
);
复制代码
 
 
 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Elastic Engineering】Elasticsearch 简介
Elasticsearch 是一个非常强大的搜索引擎。
5 0
【Elastic Engineering】Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
2 0
【Elastic Engineering】Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
6 0
阿里巴巴数据库分库分表的实践(5)
阿里巴巴数据库分库分表的实践(5)
4 0
用阿里云飞天计划提供的CES服务器为高中生活搭建“故事簿”网页
一名刚踏入大学的大一本科生利用阿里云提供的CES服务器为高中“故事簿”搭建网页
15 0
使用阿里云ECS搭建个人网站
学习在ECS上如何搭建个人网站
23 0
【Elastic Engineering】Kibana:如何在 Linux,MacOS 及 Windows 上安装 Elastic 栈中的 Kibana
Kibana:如何在 Linux,MacOS 及 Windows 上安装 Elastic 栈中的 Kibana
6 0
阿里巴巴数据库分库分表的实践(4)
阿里巴巴数据库分库分表的实践(4)
6 0
阿里巴巴数据库分库分表的实践(2)
阿里巴巴数据库分库分表的实践(2)
3 0
+关注
580
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载