MUI中的Ajax详解

一、mui.ajax产品列表

MUI是一个轻量级的移动端框架，在前端领域中开发构建出了许多实用而优秀的库和工具，在其中之一就是Ajax。

它是在Web应用程序中使用的异步JavaScript和XML，这种技术可以异步地从服务器获取数据并加载到网页中，而不需要重新加载整个网页。但最常用的类型是JSON。与此同时，MUI引用了zepto.js，所以MUI Ajax就是zepto.ajax，它本质上是适用于浏览器和Node.js环境的Open Source异步JavaScript编程框架库.

二、mui.ajax返回的数据类型

当MUI发起Ajax请求后，返回的responseText数据类型一般为字符串，而不是一个JSON对象。在响应后就需要进行JSON.parse处理，将字符串转换为JSON格式的对象。

mui.ajax('xxx/xxx', {
    dataType: 'json',//服务器返回json格式数据
    type: 'get',//HTTP请求类型
    timeout: 10000,//超时时间设置为10秒；
    success: function(data) {
        //服务器返回响应，根据响应状态，分析是否跳转到登录界面；
        if(data.success){
            //TODO
        }
    },
    error: function(xhr, type, errorThrown) {
        //异常处理；
        console.log(type);
        plus.nativeUI.toast('网络请求失败，请检查您的网络设置！');
    }
});

三、mui.ajax请求内网返回空

在进行内网URL请求时，返回值可能为空，不会触发error函数。

mui.ajax('http://192.168.68.117:8080/WebAPIDemo/api/Login/Index', {
    dataType: 'json',//服务器返回json格式数据
    type: 'post',//HTTP请求类型
    timeout: 10000,//超时时间设置为10秒；
    success: function(data) {
        if(data!=null&&data!=""){
            console.log(data);
        }else{
            plus.nativeUI.toast('返回数据为空！');
        }
    }
});

四、mui.ajax error

在Ajax请求发生异常时，应用程序必须进行异常处理，否则会导致应用程序崩溃，甚至直接退出。在这类系统中，通常的方式是使用try-catch块或unhandled exception事件来进行异常处理。而在MUI中，在所有基于MUI应用程序上进行的Ajax请求中，我们建议开发人员在mui.ajax()的error回调方法中，集中进行异常处理。

mui.ajax('xxx', {
    type: 'get',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, type, errorThrown) {
        console.log(type);
        plus.nativeUI.toast('网络请求失败，请检查您的网络设置！');
    }
});

五、mui.ajax获取mock数据

在前后端分离中，为了不依赖后端来进行前端调式和调试，常常需要使用mock数据。在MUI框架中，获取mock数据可以轻松实现。

mui.ajax('mock/data.json', {
    success: function(result) {
        console.log(result);
    },
    error: function(xhr, type, errorThrown) {
        console.log(type);
    }
});

六、mui.ajax加入点击函数

在前端开发中，有时候需要在某些用户操作上触发Ajax请求。比如在用户点击按钮时，需要向服务器请求数据。这时候，我们可以将mui.ajax()放入某个指定的点击事件监听器中。

document.getElementById('btn').addEventListener('click', function(){
    mui.ajax('xxx', {
        type: 'get',
        success: function(data) {
            console.log(data);
        },
        error: function(xhr, type, errorThrown) {
            console.log(type);
            plus.nativeUI.toast('网络请求失败，请检查您的网络设置！');
        }
    });
});

七、mui.ajax ID 参数类型

在Ajax请求中，通常会传递ID值，常见的参数类型有数字和字符串。在MUI框架中，我们可以采用以下方法将ID参数类型进行转换。

function getData(id){
    mui.ajax('xxx?id='+id, {
        type: 'get',
        dataType: 'json',
        success: function(data) {
            console.log(data);
        },
        error: function(xhr, type, errorThrown) {
            console.log(type);
            plus.nativeUI.toast('网络请求失败，请检查您的网络设置！');
        }
    });
}

八、mui.ajax为啥要解决跨域问题

跨域请求是一种web应用程序使用API代理或JSONP调用的HTTP请求，它涉及跨越不同的区域或位置，并且需要用到来自第三方领域的资源。而Ajax请求的一般原则就是必须限制请求的资源和响应的资源必须位于相同的域名下，否则就会遭受到浏览器的安全阻碍，无法完成请求或者返回数据。而MUI中的Ajax请求，在封装上更方便，直接解决跨域问题，降低开发人员的难度。

解决跨域问题的方法：在mui.init方法中加上下面这段代码即可。

mui.init({
    headers:{'Access-Control-Allow-Origin':'*'}
});

九、mui.ajax 返回不了json

在使用Mui.ajax获取数据时，返回的数据类型一般为字符串，而不是一个JSON对象。我们需要对数据进行json序列化处理。在MUI中，可以通过下面这段代码进行处理。

mui.parseJSON = function(str) {
    if(typeof str !== 'string') {
        return str;
    }
    str = str.trim();
    if(str) {
        try {
            return JSON.parse(str);
        } catch(e) {}
    }
    return null;
};