mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型; 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。
mui.ajax()方法通过HTTP请求加载远程数据,是mui框架底层Ajax的实现方法,使用方法:mui.ajax(url[,setting])
,其中url表示请求发送的目标地址,setting是一个json对象,支持的参数主要包括:
参数 | 类型 | 描述 |
data | Object | 发送到服务器的数据,可以是json对象或字符串 |
dataType | String | 预期服务器返回的数据类型;如果不指定,mui将自动根据HTTP包的MIME头信息自动判断;支持设置的dataType可选值:
|
error | Function | 请求失败时触发的函数,该函数接收三个参数:
|
success | Function | 请求成功时触发的回调函数,该函数接收三个参数:
|
timeout | Number | 请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调 |
type | String | 请求方式,目前仅支持'GET'和'POST',默认为'GET'方式 |
代码示例:如下为通过post方式向某服务器发送鉴权登录的代码片段
mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
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.get()
方法和如下mui.ajax()
方法效果是一致的:
mui.ajax('http://server-name/list.php',{
data:{
category:'news'
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
success:function(data){
//获得服务器响应
...
}
});
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){
//获得服务器响应
...
}
);
//设置全局beforesend
mui.ajaxSettings.beforeSend = function(xhr, setting) {
//beforeSend演示,也可在$.ajax({beforeSend:function(){}})中设置单个Ajax的beforeSend
console.log('beforeSend:::' + JSON.stringify(setting));
};
//设置全局complete
mui.ajaxSettings.complete = function(xhr, status) {
console.log('complete:::' + status);
}