使用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代码
- function postData(url, data, callback, waitingDialog) {
- mui.ajax(url,{
- data:'data='+JSON.stringify(data),
- dataType:'json',
- type:'post',
- contentType:"application/x-www-form-urlencoded; charset=utf-8",
- timeout:60000,
- success:callback,
- error:function(xhr,type,errorThrown){