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