Ajax技术之与服务器通信-一个完整的实例(实现检测用户名是否唯一功能)

在介绍了向服务器发送请求与处理服务器响应之后，下面将通过一个完整的实例，更好地说明在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;"onclick="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("恭喜您，该用户名没有被注册！");}%>

运行本实例，在“用户名”文本框中输入“张三”，单机“检查用户名”按钮，将显示“很抱歉，该用户名已经被注册！”提示信息。

注：由于本实例比较简单，这里没有从数据库中获取用户信息，而是将用户信息保存在一个一维数组中。在实际项目开发中，通常情况下是从数据库中获取用户信息。