mui ajax方法

mui ajax方法詳解：

mui提供了mui.ajax，在此基礎上有分裝出mui.get()/mui.getJSON()/mui.post()三個方法。

mui.ajax( url [,settings] )

mui.ajax( url [,settings] )

url
Type: String
請求發送的目標地址

settings
Type: PlainObject
key/value格式的json對象，用來配置ajax請求參數，支持的完整參數參考以下mui.ajax([settings])方法

 

mui.ajax([settings])

settings
Type: PlainObject
key/value格式的json對象，用來配置ajax請求參數，支持的詳細參數以下：
async
Type: Boolean
發送同步請求
crossDomain    *5+ only
Type: Boolean
強制使用5+跨域
data
Type: PlainObject||String
發送到服務器的業務數據
dataType
Type: String
預期服務器返回的數據類型；若是不指定，mui將自動根據HTTP包的MIME頭信息自動判斷；支持設置的dataType可選值：
"xml": 返回XML文檔
"html": 返回純文本HTML信息；
"script": 返回純文本JavaScript代碼
"json": 返回JSON數據
"text": 返回純文本字符串
error
Type: Functon（XMLHttpRequest xhr,String type,String errorThrown）
請求失敗時觸發的回調函數，該函數接收三個參數：
xhr：xhr實例對象
type：錯誤描述，可取值："timeout", "error", "abort", "parsererror"、"null"
errorThrown：可捕獲的異常對象
success
Type: Functon（Anything data,String textStatus,XMLHttpRequest xhr）
請求成功時觸發的回調函數，該函數接收三個參數：
data：服務器返回的響應數據，類型能夠是json對象、xml對象、字符串等；
textStatus：狀態描述，默認值爲'success'
xhr：xhr實例對象
timeout
Type: Number
請求超時時間（毫秒），默認值爲0，表示永不超時；若超過設置的超時時間(非0的狀況)，依然未收到服務器響應，則觸發error回調
type
Type: String
請求方式，目前僅支持'GET'和'POST'，默認爲'GET'方式
headers
Type: Json
指定HTTP請求的Header
headers:{'Content-Type':'application/json'}               
processData
Type: Boolean
爲了匹配默認的content-type（"application/x-www-form-urlencoded"），
mui默認會將data參數中傳入的非字符串類型的數據轉變爲key1=value&key2=value2格式的查詢串；
若是業務須要，但願發送其它格式的數據（好比Document對象），能夠設置processData爲false

 

代碼示例：以下爲經過post方式向某服務器發送鑑權登陸的代碼片斷

mui.ajax('http://server-name/login.php',{
    data:{
        username:'username',
        password:'password'
    },
    dataType:'json',//服務器返回json格式數據
    type:'post',//HTTP請求類型
    timeout:10000,//超時時間設置爲10秒；
    headers:{'Content-Type':'application/json'},                  
    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){
        //得到服務器響應
        ...
    }
);

以上內容獲取爲文檔，詳情請閱讀文檔。
http://dev.dcloud.net.cn/mui/ajax/

小結：

         <script type="text/javascript">
			mui.init();
			// plus加載完畢
			mui.plusReady(function(){
				document.getElementById('btn').addEventListener('tap',function(){
					// mui.ajax GET方法
					mui.ajax({
						type: 'GET',
						url: 'http://demo.hcoder.net/index.php',
						success: function(msg){
							mui.toast(msg);
						},
						error: function(xhr, type, errorThrown){
							// xhr:xhr實例對象 type:錯誤描述 errorThrown:可捕獲的異常對象
							mui.toast(type);
						}
					});
					
					// mui.ajax POST方法
					mui.ajax({
						type: 'POST',
						data: {'name':'hcoder', 'age': 18},
						dataType: 'json',
						url: 'http://demo.hcoder.net/index.php',
						success: function(msg){
							mui.toast(JSON.stringify(msg)); 
						},
						error: function(xhr, type, errorThrown){
							mui.toast(type);
						}
					});
					
					// mui.post方法 傳入的是參數而再也不是對象
					mui.post(
						'json',
						'http://demo.hcoder.net/index.php',
						{'name':'hcoder', 'age': 18},
						function(msg){
							console.log(JSON.stringify(msg));\
							mui.toast(msg.name);
						}
					);
					
					// mui.get方法 沒有data元素
					mui.get(
						'json',
						'http://demo.hcoder.net/index.php',
						function(msg){
							console.log(JSON.stringify(msg));
						}
					);
					
					// mui.getJSON方法
					mui.getJSON(
						"http://demo.hcoder.net/index.php",
						function(msg){
							console.log(JSON.stringify(msg));
							mui.toast(msg.name);
						}
					);
				});
			});
		</script>