【ajax入门】使用Ajax异步实现用户名异步校检

【功能描述】 我们在注册网站的通常都需要填写用户名，但我们输入我们喜欢的用户名的鼠标离开输入框，有时会提醒 用户名已被注册，但是网页上的其它内容却没有更新。这就是异步实现。

下面我们描述是怎样实现的。(ajax+Servlet)

前台代码：

<div id="register" class="div_cntent">
      <form name="form1">
        <table>
            <tr>
                <th align="center" colspan="2">用户注册</th>
            </tr>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="reg_name" id="reg_name" onblur="checkName()" /><span id="name_tip"></span></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="reg_password" id="reg_password" /><span id="password_tip"></span></td>
            </tr>
            <tr>
                <td><input type="button" value="注册" class="btn_style" /></td>
                <td><input type="reset" value="重置" class="btn_style"/></td>                
            </tr>            
        </table>
       </form>    
    </div>

使用 onblur=“checkName（）”表示鼠标在用户名文本框失去焦点时调用 checkName（）方法

JS代码

/*
 * ajax异步检测用户名
 * */
 
function checkName(){
    var xmlhttpChk; // 穿件xmlHttpRequest对象 ,XMLHttpRequest 用于在后台与服务器交换数据。
    var reg_name = document.getElementById("reg_name").value;
    // 判断浏览器的问题：由于不同浏览器创建xmlhttp方式不同
    // 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
    if(window.XMLHttpRequest){
        xmlhttpChk = new XMLHttpRequest();    // 火狐，谷歌，opera……
    }else{
        xmlhttpChk = new ActiveXObject();  //  IE5 IE6……
    }
    
    // 请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
    xmlhttpChk.onreadystatechange = function(){
    /*
   * 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
   *	 0: 请求未初始化
   *     1: 服务器连接已建立
   *     2: 请求已接收
   *     3: 请求处理中
   *     4: 请求已完成，且响应已就绪
   * status 
    *   200:   表示  OK
   *    400： 表示“未找到页面”
    *  */
        if(xmlhttpChk.readyState == 4 && xmlhttpChk.status == 200){  
            alert(xmlhttpChk.responseText);
            // 使用JSONObject对象必须使用eval()方法把返回的数据转换为对象
            var resultObj = eval("("+xmlhttpChk.responseText+")");          
            if(resultObj.exist){
               //  用户名已存在
                document.getElementById("name_tip").innerHTML = "<font color=‘#f00‘>用户名已存在</font>";
               // 用户名可用
           }else{
                document.getElementById("name_tip").innerHTML = "<font color=‘#0f0‘>用户名可用</font>";
            }            
        }        
    };    
    
    // 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
    xmlhttpChk.open("get", "checkName?reg_name="+reg_name, true);
    xmlhttpChk.send();
   
    /* 
    open(method,url,async)    
	  规定请求的类型、URL 以及是否异步处理请求。
	  method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）	    
    send(string)    
	将请求发送到服务器。
	string：仅用于 POST 请求    
   */
}

上面代码就是是使用ajax异步实现用户名校检

var xmlhttpChk;
    var reg_name = document.getElementById("reg_name").value;
    // 判断浏览器的问题
    if(window.XMLHttpRequest){  
        xmlhttpChk = new XMLHttpRequest();
    }else{  
        xmlhttpChk = new ActiveXObject();
    }

后台代码

@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String reg_name = request.getParameter("reg_name");
        reg_name = new String(reg_name.getBytes("ISO8859-1"),"UTF-8");
        System.out.println(reg_name);
        // 创建Json对象
        JSONObject resultJson = new JSONObject();
        if("Allen".equals(reg_name)){
            resultJson.put("exist", true); // 表示用户名已存在
        }else{
            resultJson.put("exist", false); // 表示用户名不存在
        }    
        out.print(resultJson);
        out.flush();
        out.close();
    }

最后再 配置 web.xml 和拷贝下面几个文件到 lib文件中

到这里下载

<!-- 用户验证 -->
  <servlet>
      <servlet-name>CheckNameServlet</servlet-name>
    <servlet-class>com.ajax.web.CheckNameServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>CheckNameServlet</servlet-name>
      <url-pattern>/checkName</url-pattern>
  </servlet-mapping>