HBuilder完成webApp入门（5） 实例

一、首先介绍一下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'方式

二、客户端与服务器的交互（基于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完成的不做解释了。。。。。。。。。。。。。。