HBuilder完成webApp入門（5） 實例

1、首先介紹一下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可選值： "xml": 返回XML文檔 "html": 返回純文本HTML信息； "script": 返回純文本JavaScript代碼 "json": 返回JSON數據 "text": 返回純文本字符串
error	Function	請求失敗時觸發的函數，該函數接收三個參數： xhr：xhr實例對象，類型是XMLHttpRequest type：錯誤描述，類型是String，可取值除了'null'外，其它可能值："timeout", "error", "abort", "parsererror" errorThrown：可捕獲的異常對象，類型是String
success	Function	請求成功時觸發的回調函數，該函數接收三個參數： data：服務器返回的響應數據，類型能夠是json對象、xml對象、字符串等； textStatus：狀態描述，參數類型是String，默認值爲'success' xhr：xhr實例對象，類型是XMLHttpRequest
timeout	Number	請求超時時間（毫秒），默認值爲0，表示永不超時；若超過設置的超時時間(非0的狀況)，依然未收到服務器響應，則觸發error回調
type	String	請求方式，目前僅支持'GET'和'POST'，默認爲'GET'方式

2、客戶端與服務器的交互（基於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完成的不作解釋了。。。。。。。。。。。。。。