mui封裝的ajax請求

標籤：支援   html   設計   文檔   相同   stat   類型   回調   ext   

由於項目中引進MUI架構，所以就不需要引進jquery，但需要和後台互動時，常寫為jquery格式；所以筆者覺得有必要將mui封裝的ajax請求在這裡提一下；

1，mui架構基於htm5plus的XMLHttpRequest，封裝了常用的Ajax函數，支援GET、POST請求方式，支援返回json、xml、html、text、script資料類型；
本著極簡的設計原則，mui提供了mui.ajax方法，並在mui.ajax方法基礎上，進一步簡化出最常用的mui.get()、mui.getJSON()、mui.post()三個方法；

 

2，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； 

3，案例：

a.mui.ajax({
            url : ‘${ctx}carReserve/getTravelApplyNo‘,//請求路徑；
            type : ‘GET‘,//表示調用get方法請求；

            dataType:‘json‘,//表示以json形式接受返回參數
            success  : function(data){//請求成功，返回函數
                alert("ok"); 

           },
            error  : function(xhr,type,errorThrown){){//請求失敗，返回函數
                alert("error"); 
            }
        });

b.mui.post("${ctx}carReserve/getTravelApplyNo",{},function(data){
        var datas=data.rows;
              travelApplyNo.value = datas[0].travelApplyNo;
       },‘json‘);
      })

mui.post:表示調用post方法請求；

"${ctx}carReserve/getTravelApplyNo"：請求路徑；

{}：大括弧裡邊填寫請求參數；

function(data)：表示返回函數，data為返回參數；

‘json‘：表示以json形式接受返回參數。

 

mui.get()、mui.getJSON()和上述原理相同，我就舉兩個典型的，剩下的大家有興趣也可以試試！

由於筆者目前水平有限，難免出現錯誤，還望大家能夠指出來，共同提高。

mui封裝的ajax請求