一、首先介绍一下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完成的不做解释了。。。。。。。。。。。。。。