一、首先介紹一下MUI提供的ajax方法的具體內容
mui框架基於htm5plus的XMLHttpRequest,封裝了常用的Ajax函數,支持GET、POST請求方式,支持返回json、xml、html、text、script數據類型; 本着極簡的設計原則,mui提供了mui.ajax方法,並在mui.ajax方法基礎上,進一步簡化出最常用的mui.get()、mui.getJSON()、mui.post()三個方法。
mui.ajax()方法通過HTTP請求加載遠程數據,是mui框架底層Ajax的實現方法,使用方法:mui.ajax(url[,setting])
,其中url表示請求發送的目標地址,setting是一個json對象,支持的參數主要包括:
參數 | 類型 | 描述 |
data | Object | 發送到服務器的數據,可以是json對象或字符串 |
dataType | String | 預期服務器返回的數據類型;如果不指定,mui將自動根據HTTP包的MIME頭信息自動判斷;支持設置的dataType可選值:
|
error | Function | 請求失敗時觸發的函數,該函數接收三個參數:
|
success | Function | 請求成功時觸發的回調函數,該函數接收三個參數:
|
timeout | Number | 請求超時時間(毫秒),默認值為0,表示永不超時;若超過設置的超時時間(非0的情況),依然未收到服務器響應,則觸發error回調 |
type | String | 請求方式,目前僅支持'GET'和'POST',默認為'GET'方式 |
二、客戶端與服務器的交互(基於ajax)
服務端以Java語言為例子。。。。。。。不做過多解釋
先說客戶端的MUI.ajax如何寫
首先封裝一個函數如下:
以上就是 ajax 的請求函數。
接下來看看登錄按鈕的處理:
plus.nativeUI.showWaiting(); 這是一個原生的調用,並非用 div 來模擬對話框。這也是HBuilder的強力武器之一:Native.js。Native.js的概念,在第一篇入門文章里有介紹。具體的API用法,請參照http://www.html5plus.org/doc/h5p.html,里邊有一個 Native.js 的部分。
保存 token(這個token是后台得到你傳的data數據后,查詢數據庫,驗證用戶名,密碼是否有效。如果有效的話,用封裝的函數生成的token,返回給前台,至於如何返回是后台的工作) ,是為了下次打開程序的時候能自動登錄,無需再次輸入用戶名和密碼。webview 這篇文章說過,頁面的webview 創建完畢后,是不會自己銷毀的。雖然你后面可以再次遷移到別的webview,但是新的webview也只是覆蓋在了之前的webview上。如果需要再次顯示登錄畫面。登錄畫面沒有經過 銷毀-> 再構建的過程,那么顯示登錄畫面的時候,就會顯示出來你上次輸入的用戶名和密碼。所以,我們在這里手動清空一下。 之后,使用 mui.openWindow 打開下一個頁面。
這樣就能成功得到后台返回的信息了, 當用戶再次打開應用的時候,先判斷localstorage 里是否保存有 token。如果有 token ,那么就通過ajax發送給服務器,服務器判斷token 的有效性,如果驗證通過,那么自動登錄就成功,否則失敗。
至於服務器部分是用java完成的不做解釋了。。。。。。。。。。。。。。