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){
    //獲得服務器響應
    ...
    }
);