程序功能

当用户名输入完成(即用户名输入框失去焦点)，利用Ajax检测用户名是否已经注册！

实现过程

利用Ajax向CheckUserServlet发送请求，判断该用户名是否可用。这里只是为了演示Ajax的用法，就不访问数据库了，直接设置一些用户名就好了，模拟一下即可。

关于中文编码的处理

坑爹，在javascript中传递中文参数，需要先编码，然后解码。详细见JavaScript利用URL向后台传入中文参数乱码问题解决之道。

运行截图

代码实例

JSP页面

pageEncoding="UTF-8"%>

检查用户名是否唯一

function checkUser(username) {

if (username.value == "") {

alert("请输入用户名!");

username.focus();

return;

} else {

createRequest('CheckUserServlet?user='+encodeURI(encodeURI(username.value)));

}

}

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 = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

}

}

}

if (!http_request) {

alert("不能创建XMLHttpRequest对象实例!");

return false;

}

//alert("创建成功!");

http_request.onreadystatechange = getResult;

http_request.open('GET', url, true);

http_request.send(null);

}

function getResult() {

if (http_request.readyState == 4) { //请求已经完成

if (http_request.status == 200) { //请求成功

document.getElementById("msg").innerHTML = http_request.responseText;

} else {

alert("你请求的页面有错误!");

}

}

}

用户名：

密 码：

检查是非已经注册的工具类

package cn.edu.pzhu.servlet.util;

public class UserUtils {

private static String[] userList = {"张三", "李四", "Tom", "Jerry"};

public static boolean checkUser(String username) {

boolean ok = true;

for (int i = 0; i < userList.length; i++) {

if (username.equals(userList[i])) {

ok = false;

break;

}

}

return ok;

}

}

servlet处理

package cn.edu.pzhu.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.net.URLDecoder;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.jasper.tagplugins.jstl.core.Out;

import cn.edu.pzhu.servlet.util.UserUtils;

/**

* Servlet implementation class CheckUserServlet

*/

@WebServlet("/CheckUserServlet")

public class CheckUserServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

/**

* @see HttpServlet#HttpServlet()

*/

public CheckUserServlet() {

super();

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

*/

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String username = request.getParameter("user");

//解码

username = URLDecoder.decode(username, "UTF-8");

System.out.println(username);

PrintWriter out = response.getWriter();

if (UserUtils.checkUser(username)) {

out.print("该用户名可用!");

} else {

out.print("该用户名不可用!");

}

//request.getRequestDispatcher("index.jsp").forward(request, response);

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

*/

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

doGet(request, response);

}

}

如有不当之处欢迎指出！