ajax异步验证

ajax

ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
（注：上面介绍来自百度百科）
本篇主要讲述的是ajax登陆异步验证。

一、js部分

//定义一个变量用于存放XMLHttpRequest对象
var xmlHttp;
function checkIt(){
    //获取文本框的值    
   var username=document.getElementById("username").value;//从登陆框中获取用户输入的账号
    //alert("测试获取文本框的值："+username);
    //先创建XMLHttpRequest对象
    // code for IE7+, Firefox, Chrome, Opera, Safari
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //服务器地址和数据
    var url="Login_ajax.jsp?username="+username;//此处的地址为ajax验证控制器的地址
    //规定请求的类型、URL 以及是否异步处理请求。
    xmlHttp.open("GET",url,true);
    //将请求发送到服务器
    xmlHttp.send();
    //回调函数
    xmlHttp.onreadystatechange=function(){
        if (xmlHttp.readyState==4 && xmlHttp.status==200){
            //给div设置内容
            document.getElementById("errorAccount").innerHTML = xmlHttp.responseText;//把验证是否成功的信息返回到界面上，如下图
        	
        }
    }
}

二、html部分

 <div class="form-group">
         <div class="field field-icon-right">
                  <input type="text" onblur="checkIt()" class="input input-big" name="username" 		 id="username" placeholder="登录账号" />
                   <span class="icon icon-user margin-small"></span>
          </div>
           <span id="errorAccount" style="color:red;display:inline;"></span>//从控制类中返回验证信息
   </div>

三、控制器部分（此处用jsp代替servlet）

<%
	UserDao dao = new UserDao();
	String username = request.getParameter("username");//获取界面上用户输入的账号
	boolean isExistUsername = dao.isExistByUsername(username);//判断此账号是否存在
	
	response.setCharacterEncoding("utf-8");
	response.setContentType("text/html");
	
	if(!isExistUsername){
		out.println("<font color='red'>该帐号不存在，请重新输入!</font>");
		
	}else{
		out.println("<font color='green'>恭喜您，该帐号可以使用!</font>");
		//response.sendRedirect("Login_result.jsp");
	}
%>