【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>