mui与php的数据交互,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

一个完整示例

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);

}

});

});

});

返回JSON形式的数据请观看本视频！

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){

//获得服务器响应

...

}

);

本节视频是app通信的核心教程，建议您仔细观看视频教程 ^_^