ajax异步登录验证实现

如何用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" onblur="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;">&nbsp;</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" onblur="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;">&nbsp;</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" onclick="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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!