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("恭喜您，该用户名没有被注册！");
	}
%>

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

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