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

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

前台代码：@H_404_3@

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

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

@H_404_3@

JS代码@H_404_3@

/*
*ajax异步检测用户名
**/

functioncheckName(){
varxmlhttpChk;//穿件xmlHttpRequest对象,XMLHttpRequest用于在后台与服务器交换数据。
varreg_name=document.getElementById("reg_name").value;
//判断浏览器的问题：由于不同浏览器创建xmlhttp方式不同
//所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。
if(window.XMLHttpRequest){
xmlhttpChk=newXMLHttpRequest();//火狐，谷歌，opera……
}else{
xmlhttpChk=newActiveXObject();//IE5IE6……
}

//请规定在响应处于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()方法把返回的数据转换为对象
varresultObj=eval("("+xmlhttpChk.responseText+")");
if(resultObj.exist){
//用户名已存在
document.getElementById("name_tip").innerHTML="<fontcolor='#f00'>用户名已存在</font>";
//用户名可用
}else{
document.getElementById("name_tip").innerHTML="<fontcolor='#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异步实现用户名校检@H_404_3@

varxmlhttpChk;
varreg_name=document.getElementById("reg_name").value;
//判断浏览器的问题
if(window.XMLHttpRequest){
xmlhttpChk=newXMLHttpRequest();
}else{
xmlhttpChk=newActiveXObject();
}

@H_404_3@

后台代码@H_404_3@

@Override
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
this.doPost(request,response);
}

@Override
protectedvoiddoPost(HttpServletRequestrequest,IOException{
response.setContentType("text/html;charset=utf-8");
PrintWriterout=response.getWriter();
Stringreg_name=request.getParameter("reg_name");
reg_name=newString(reg_name.getBytes("ISO8859-1"),"UTF-8");
System.out.println(reg_name);
//创建Json对象
JSONObjectresultJson=newJSONObject();
if("Allen".equals(reg_name)){
resultJson.put("exist",true);//表示用户名已存在
}else{
resultJson.put("exist",false);//表示用户名不存在
}
out.print(resultJson);
out.flush();
out.close();
}

@H_404_3@

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

<!--用户验证-->
<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>