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