这次给大家带来ajax实现安全性很高的登陆界面，ajax实现登陆界面的注意事项有哪些，下面就是实战案例，一起来看一下。
登录界面是信息系统提供的必备的功能，是提供给用户提供维护信息的接口。接下来，我来带领大家打造一个漂亮、安全的登录界面，使用的技术是asp.net+jquery
先来看看预览效果
ajax登录重点在ajax，输入用户名和密码后，使用ajax方式将信息提交到服务器端，服务器端判断时候存在该用户，存在则登录成功并转向管理界面（有时需要写cookie或是利用session，此处不作讨论），不存在则提示登录失败。
基本流程图如下
上面是主要思路，为了打造安全的登录，在使用ajax将密码传到服务器端前，我们可以使用md5对密码进行加密，当然数据库中存储的也是加密后的字符串。jquery有一款这样的md5加密插件，使用十分方便。
流程知道了，就可以方便实现了。以下是一些主要的代码
default.aspx：主要是提供超链接，点击会调用thickbox，打开弹出页面。
<p style="margin-left:50px; margin-top:50px; ">
欢迎使用后台，
<a href="login.htm?tb_iframe&height=180&width=350&modal=true" class="thickbox" id="mytooltip" title="点击登录，进入后台管理" >
点击登录！</a>
继续浏览前台，<a href="../default.aspx">返回前台</a>
login.htm：真正的登录界面，负责登录逻辑
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$().ready(function () {
$('#login').click(function () {
if ($('#username').val() == || $('#password').val() == ) {
alert(用户名或密码不能为空！);
}
else {
$.ajax({
type: post,
url: ajax/loginhandler.ashx,
data: username= + escape($('#username').val()) + &password= + escape($('#password').val()),
beforesend: function () {
$(#loading).css(display, block); //点击登录后显示loading，隐藏输入框
$(#login).css(display, none);
},
success: function (msg) {
$(#loading).hide(); //隐藏loading
if (msg == success) {
//parent.tb_remove();
parent.document.location.href = admin.htm; //如果登录成功则跳到管理界面
parent.tb_remove();
}
if (msg == fail) {
alert(登录失败！);
}
},
complete: function (data) {
$(#loading).css(display, none); //点击登录后显示loading，隐藏输入框
$(#login).css(display, block);
},
error: function (xmlhttprequest, textstatus, thrownerror) {
}
});
}
});
});
</script>
<p id="loading" style="text-align: center; display: none; padding-top: 10%">
<img src="images/loadingajax.gif" alt="loading" />
</p>
<p id="login" style="text-align: center">
<p style="position:absolute; right:0; top:0"><img src="images/closebox.png" onclick="parent.tb_remove()" alt="点击关闭" style="cursor:pointer" /></p>
<table border="0" cellpadding="3" cellspacing="3" style="margin: 0 auto;">
<tr>
<td style="text-align: right; padding: 10px">
<label>
用户名:</label>
</td>
<td>
<input id="username" type="text" size="20" />
</td>
</tr>
<tr>
<td style="text-align: right; padding: 10px">
<label>
密码:</label>
</td>
<td>
<input id="password" type="password" size="20" />
</td>
</tr>
<tr align="right">
<td colspan="2">
<input type="submit" id="login" value=" 登 录 " style="margin-right: 50px">
<input type="submit" id="logincancel" value=" 取 消 " onclick="parent.tb_remove()">
</td>
</tr>
</table>
</p>
loginhandler.ashx：ajax处理类，简单的逻辑
string username = context.request[username].tostring();
string password = context.request[password].tostring();
//context.response.write(password);如果使用加密，则写入数据库要加密后的字段，然后登陆的时候就用加密后的字符串匹配
//此处连接数据库查看是否有此用户，此处为了方便起见，直接判断
if (username == admin && password == 1)
{
context.response.write(success);
//存储session
}
else
{
context.response.write(fail);
}
ok，一个简单的登录功能就完成了，当然此处在登录的时候没有进行密码加密。
下面我们来看看jquery的加密插件md5插件， 使用十分方便，加入md5.js的引用就可以使用$.md5()函数对字符串进行加密，
如下对上述代码做稍微改变，即可看到加密后的字符串，
login.htm中：
data: username= + escape($('#username').val()) + &password= + $.md5(escape($('#password').val())),
success: function (msg) {
$(#loading).hide(); //隐藏loading
alert(msg);
if (msg == success) {
//parent.tb_remove();
parent.document.location.href = admin.htm; //如果登录成功则跳到管理界面
parent.tb_remove();
}
if (msg == fail) {
alert(登录失败！);
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
ajax怎么使文件与图片异步上传
使用ajax进行form表单提交步骤详解
jquery怎样向服务器发出get和post请求
以上就是ajax实现安全性很高的登陆界面的详细内容。