在介绍了向服务器发送请求与处理服务器响应之后，下面将通过一个完整的实例，更好地说明在Ajax中如何与服务器通信。
问题描述：在某用户注册界面，检测用户输入的用户名是否唯一。
1、创建index.jsp文件，在该文件中添加一个用于收集用户注册信息的表单及表单元素，以及代表“检测用户名”按钮的图片，并在该图片的onclick事件中调用checkName()方法，检测用户名是否被注册。关键代码如下：
<form method="post" action="" name="form1"> 用户名：<input name="username" type="text"id="username" size="32"/> <img src="images/checkBt.jpg" width="104" height="23" style="cursor: hand;"οnclick="checkUser(form1.username);"> 密码：<input name="pwd1" type="password" size="35"/> 确认密码：<input name="pwd2" type="password" size="35"/> E-mail：<input name="email" type="text" size="45"/> <input type="image" name="imageField"src="images/registerBt"/> </form>
2、在页面合适位置添加一个用于显示提示信息的<div>标记，并且通过CSS设置该<div>标记的样式。关键代码如下：
<style type="text/css"> #toolTip{ position: absolute; left: 331px; top:39px; width: 98px; height: 48px; padding-top: 45px; padding-left: 25px; padding-right: 25px; z-index: 1; display: none; color: red; background-image: url(images/tooltip.jpg); } </style> <div id="toolTip"></div> 3、编写一个自定义的JavaScript函数createRequest()，在该函数中，首先初始化XMLHttpRequest对象，然后指定处理函数，再创建与服务器的连接，最后向服务器发送请求。具体代码如下：
function createRequest(url){ http_request = false; if(window.XMLHttpRequest){ http_request = new XMLHttpRequest(); }else if(window.ActiveXObject) { try{ http_request = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request = newActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } if(http_request){ alert("不能创建XMLHttpRequest实例！"); return false; } http_request.onreadystatechange=getResult; http_request.open("GET",url,true); http_request.send(null); } 4、编写回调函数getResult()，该函数主要根据请求状态对返回结果进行处理。在该函数中，如果请求成功，为提示框设置相应的提示内容，并且让提示框显示。具体代码如下：
function getResult(){ if(http_request.readyState==4){ //判断请求状态 if(http_request.status==200){ //请求成功，开始处理返回结果 document.getElementById("toolTip").innerHTML=http_request.responseText; document.getElementById("toolTip").style.display="block"; }else{ alert("您所请求的页面有错误！"); } } } 5、编写自定义的JavaScript函数checkUser()，用于检测用户名是否为空，当用户名不为空时，调用createRequest()函数发送异步请求检测用户名是否被注册。具体代码如下：
function checkUser(userName){ if(userName.value==""){ alert("请输入用户名！"); userName.focus(); return; }else{ createRequest('checkUser.jsp?user='+userName.value); } } 6、编写检测用户名是否被注册的处理页checkUser.jsp，在该页面中判断输入的用户名是否被注册，并应用JSP内置对象out的println()方法输出判断结果。checkUser.jsp的具体代码如下：
<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String[] userList = {"张三","李四","王五","钱六"}; // 此处就不从数据库获取数据了，这个一维数组表示已被注册的用户名 String user = new String(request.getParameter("user").getBytes("IOS-8859-1"),"UTF-8")//获取用户名，此处需转码，详见《师门技术论坛：字符编码》 Arrays.sort(userList);//对数组排序 int result = Arrays.binarySearch(userList,user); //搜索数组 if(result>-1){ out.println("很抱歉，该用户名已经被注册！"); }else{ out.println("恭喜您，该用户名没有被注册！"); } %> 运行本实例，在“用户名”文本框中输入“张三”，单机“检查用户名”按钮，将显示“很抱歉，该用户名已经被注册！”提示信息。
注：由于本实例比较简单，这里没有从数据库中获取用户信息，而是将用户信息保存在一个一维数组中。在实际项目开发中，通常情况下是从数据库中获取用户信息。
