HBuilder 入门(5) 编写一个登录页面 - Ajax交互

使用AJAX方式，页面不会因为刷新而现实大白页。

 交互这部分可以分成两个部分：服务器端和客户端。

     

    服务端以Java语言为例子（因为我只做过Java的）。其实 c#或者php等语言实现起来也都是基本一样的，可以当做参考。

    如果你正在使用SpringMVC，那么就简单了，因为Spring已经封装了Ajax的调用方式。如果像我一样，没有使用SpringMVC，那么很遗憾，你需要一个能够解析json的库。经过比较，我选择了  jackson  这个工具。注意：在写这个文章的时间点，在网上搜索的jackson网站已经迁移到了github，所以，请使用本文提供的新的链接。

 

    下面的例子也是基于jackson解析的。如果你使用了SpringMVC，或者其他解析json的工具，或者其他语言如PHP，应该也是差不多的。 

 

    下面来看一下一个登录过程的流程：

    

 

    流程虽然比较多，但是很容易理解。先从客户端看起。

    首先就是通过Ajax的方式，将用户名和密码发送给客户端。为了安全，我们不能直接发送明文的密码，必须将密码加密。可选择的方式很多，一般都是不可逆的hash方式，如md5, sha1的方式加密。在本例中我们选择 md5的方式加密。javascript里的md5现成的方法很多，大家自己寻找一个合适的吧。但是标准就是：小，快，使用简单。

    接下来就是ajax的使用。mui 提供了ajax的使用方法，请参看 这里 。 不过如果你按照文档那样，每个ajax调用都写那么一堆代码，一会你的代码就会臃肿不堪。所以，我对ajax调用又做了一个简单的封装，避免每次都设置相同的参数：

 

Js代码  

1. function postData(url, data, callback, waitingDialog) {  
2.       
3.     mui.ajax(url,{  
4.         data:'data='+JSON.stringify(data),  
5.         dataType:'json',  
6.         type:'post',  
7.         contentType:"application/x-www-form-urlencoded; charset=utf-8",  
8.         timeout:60000,  
9.         success:callback,  
10.         error:function(xhr,type,errorThrown){