Ajax基础判断当前用户名是否已经存在

=========  异步判断当前用户账号是否存在  运行效果如下   ===========

输入数据库中存在的账号 离开输入框后提示 账号存在

若不存在这个用户 提示用户账号可用

 【网页写法】

//测试表单
    <form action="" method="post">
     Account:<input type="text" onblur="accountChk();" id="accountId" name="accountName" /><span id="tipInfo"></span><br />
     Another:<input type="text">
    </form>

 // javaScrpt 写法

//脚本
    <script type="text/javascript">
    var account = document.getElementById("accountId");         //取得账号输入框元素
    var tipInfo = document.getElementById("tipInfo");           //取得账号输入框后面的提示元素
    var xmlHttpReq;     //存放Ajax灵魂 --   XMLHTTPRequest 对象
    
    function accountChk()
    {
        sendRequest();
    }
    
    
    function sendRequest()
    {
        var accountValue = account.value;
        createXMLHttpRequest();             //创建 XMLHTTPRequest 对象
        var url = "accountChkServlet.do";       //指明处理处理发送信息的 servlet
        xmlHttpReq.open("post",url,true);           //打开连接
        xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    //设置请求头部
        xmlHttpReq.onreadystatechange = processResponse;        //指明得到响应调用的函数
        xmlHttpReq.send("account="+accountValue);               //发送信息
    }



    function processResponse()
    {
        if(xmlHttpReq.readyState == 4)      // 4 表示响应好了
            if(xmlHttpReq.status ==200)     // 200 表示响应成功
                tipInfo.innerHTML = xmlHttpReq.responseText;    //把响应回来的信息作为提示显示给用户
            else
                alert("request Exception!");
    }
    
    
    // create xmlHttpRequest Object
    function createXMLHttpRequest()
    {
        if(window.XMLHttpRequest)       // 判断是不是 google firefox 类浏览器
            xmlHttpReq = new XMLHttpRequest();

        else if(window.ActiveXObject)   //判断是不是 internet explorer
            {
                try{xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");}
                catch(e)
                {
                    try{ xmlhttpReq=new ActiveXObject("Miscrosoft.XMLHTTP");}
                    catch(e){}
                }
            }
    }
</script>

【Servlet 类写法】

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;



@WebServlet(urlPatterns = { "/accountChkServlet.do" })      //指明 /accountChkServlet.do 
public class RegisterServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        String account = request.getParameter("account");
        response.setContentType("text/html;charset=GBK");   //设置文本类型 
        PrintWriter out=response.getWriter();       //创建 out 对象 来返回提示信息
        
        if(isExist(account))    //判断用户账号是不是已经被使用  然后 out 对象返回相应的 提示信息
            out.print("<font color=red>accountExist</font>");
        else
            out.print("<font color=green><b>√ canUse</b><font>");
    }
    private boolean isExist(String account)     //模拟数据库层
    {
        String[] acts = {"aaa","bbb","ccc","ddd"};
        for(String act : acts)
            if(act.equals(account)) return true;

        return false;
    }
}