如何用ajax异步登录验证实现?
ajax异步无刷新登陆实现分为四步:
<span style="white-space:pre"> </span><FORM id="shop_login_form" class="js_mmjs_validation">
<span style="white-space:pre"> </span><INPUT type="hidden" name="returnUrl">
<span style="white-space:pre"> </span><DIV class="login_form">
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span><DIV class="form_row js_mmjs_validation_fe_wrap">
<span style="white-space:pre"> </span><INPUT id="shop_login_username"
<span style="white-space:pre"> </span>class="fe_text jsv_required js_has_dval" title=请输入用户名
<span style="white-space:pre"> </span>tabIndex="1" maxLength="60" type="text" name="username" οnblur="checkName();" /> <SPAN class="shop_login_sprite icon_m"></SPAN>
<span style="white-space:pre"> </span><DIV id="loginname"
<span style="white-space:pre"> </span>class="validation_marked_info js_validation_marked_info" style="height:20px;"> </DIV>
<span style="white-space:pre"> </span></DIV>
<span style="white-space:pre"> </span><!-- END form_row-1 -->
<span style="white-space:pre"> </span><DIV class="form_row js_mmjs_validation_fe_wrap">
<span style="white-space:pre"> </span><INPUT id="shop_login_password"
<span style="white-space:pre"> </span>class="fe_text jsv_required js_caps_passwd js_has_dval"
<span style="white-space:pre"> </span>title="密码不能小于6位,密码前后不能包含空格" tabIndex="2" type="password"
<span style="white-space:pre"> </span>name="password" οnblur="checkPass();" /> <SPAN
<span style="white-space:pre"> </span>class="shop_login_sprite icon_p"></SPAN>
<span style="white-space:pre"> </span><DIV id="loginmessage"
<span style="white-space:pre"> </span>class="validation_marked_info js_validation_marked_info" style="height:20px;"> </DIV>
<span style="white-space:pre"> </span></DIV>
<span style="white-space:pre"> </span><!--需要验证码-->
<span style="white-space:pre"> </span><!-- END form_row-3 -->
<span style="white-space:pre"> </span><DIV class="form_row radio_box">
<span style="white-space:pre"> </span><INPUT id="shop_login_cookie" value=true type=checkbox
<span style="white-space:pre"> </span>name=autoLogin>
<span style="white-space:pre"> </span><!-- 两周内自动登录 -->
<span style="white-space:pre"> </span><SPAN class="shop_login_sprite a_l c_radio js_c_radio">两周内免登录</SPAN>
<span style="white-space:pre"> </span></DIV>
<span style="white-space:pre"> </span><!-- END form_row-4 -->
<span style="white-space:pre"> </span><DIV>
<span style="white-space:pre"> </span><img src="/shopping/frontPage/login_files/login_btn.jpg" id="btn" οnclick="btnSubmit();" />
<span style="white-space:pre"> </span></DIV>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span></DIV>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span><!-- END form_row-5 -->
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span></FORM>
ajax代码如下:
<script type="text/javascript">
var xmlhttp; //声明异步请求对象
//根据不同浏览器产生异步请求对象
function doAjax() {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} catch (e) {
}
}
}
}
function btnSubmit() {
xmlhttp=null;
var name = document.getElementById("shop_login_username").value;
var pass = document.getElementById("shop_login_password").value;
var url = "/shopping/doLoginServlet";
//1.产生异步请求对象
doAjax();
if (xmlhttp == null || name == "" || pass=="") {
return;
}
if(!checkName()&checkPass()){
return;
}
//2.建立连接
xmlhttp.open("post", url, true);
//3.指定回调函数
xmlhttp.onreadystatechange = rollback;
//如果以post方式请求,必须要添加
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.发送请求,get请求方式时传null
xmlhttp.send("name=" + name+"&pass="+pass);
}
function rollback(){
var divName=document.getElementById("loginmessage");
divName.innerHTML="";
//当响应完成且响应结果是正常时再进行处理
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var result=xmlhttp.responseText; //获得响应结果,如果是xml内容需要使用responseXML
if(result=="登录成功"){
location.href="/shopping/index.jsp";
return;
}
divName.innerHTML=result; //将响应结果显示在页面上
}
}
</script>