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

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

前台代码：

     
            
      
               
       
        用户注册            
       
       
                    
                          
            
                          
                
            
            
                          
                
            
            
                          
                
                            
                    
        
         
         
         
          
用户名：
          
           
           
         
         
          
密码：
          
           
           
         
         
          
           
          
           
         
        
       
               
      
     

使用 οnblur=“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 = "
     
      用户名已存在";               // 用户名可用           }else{                document.getElementById("name_tip").innerHTML = "
      
       用户名可用";            }                    }            };            // 如需将请求发送到服务器，我们使用 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文件中

       
     
            
      
       CheckNameServlet
          
      
       com.ajax.web.CheckNameServlet
        
       
     
            
      
       CheckNameServlet
            
      
       /checkName