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完成的不做解释了。。。。。。。。。。。。。。

    

原文地址:https://www.cnblogs.com/lyn940208/p/6013996.html