用XMLHTTPRequest对象来进行AJAX的异步数据交互实现用户名校验的方法
废话不多说直接贴源码：
1.新建一个jsp页面
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/verifyown.js"></script>
</head>
<body>
<h3>用户名输入校验的例子</h3>
<input name="username" type="text" id="username"><br>
<input type="button" value="检验" onclick="verify()">
<div id="result"></div>
</body>
</html>
这样就不需要定义在form表单里了。
2.创建Servlet
package com.zchen.ajax.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AJAXServer extends HttpServlet {
private static final long serialVersionUID = 3611240119854641367L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
if (old == null || old.length() == 0) {
out.println("用户名不能为空");
} else {
String name = new String(old.getBytes("ISO-8859-1"), "UTF-8");
if (name.equals("chenzhen")) {
out.println("用户名[" + name + "]已经存在。");
} else {
out.println("用户名[" + name + "]尚未存在。");
out.println("<br/><a href=\'index.jsp\'>返回校验页面</a>");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
3.jiangservlet配置在web.xml中（很简单忽略）
4.最重要的一部新建一个js文件进行异步校验
//用户名校验的方法
//这个方法是用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
//1.使用dom的方式获取文本框的值
//document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面的一个标签，例如<input >
//.value可以获取一个元素节点的value属性值
var username = document.getElementById("username").value;
//2.创建XMLHTTPRequest对象
//这XMLHTTPRequest是对象内部使用中最复杂的一步
//需要针对IE和其他类型的游览器建立这个对象的不同使用方式
if(window.XMLHttpRequest){
//针对FireFox、Mozillar、Opera、safari、IE7、IE8
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMineType){
//针对某些特定版本的mozillar游览器的BUG进行修正
xmlhttp.overrideMimeType("text/html");
}
}else if(window.ActiveXObject){
//针对IE6、IE5.5、IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新
var activexName = ['MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var i=0;i<activexName.length;i++){
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败回抛出异常然后可以继续循环继续藏式创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
//确认XMLHTTPRequest对象创建成功
if(!xmlhttp){
alert("XMLHTTPRequest对象创建失败！");
}else{
alert(xmlhttp);
}
//3.注册回调函数
//注册回调函数时，只需要函数名不需要括号
//我们需要将函数名之策，如果加上括号就会把函数的返回值注册上这是错误的
xmlhttp.onreadystatechange = callback;
//4.设置连接信息
//第一个参数表示http的请求方式，支持所有http的请求方式，只要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互 true表示异步
xmlhttp.open("GET","servlet/AJAXServer?name="+username,true);
//5.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器端数据回来后才执行完
//异步方式下，send这句话会立即完成执行
xmlhttp.send(null);
}
function callback(){
//6.接受响应的数据
//判断对象的状态时交互完成
//一共有5种状态，4表示完成
if(xmlhttp.readyState == 4){
//判断http的交互是否成功 200表示成功
if(xmlhttp.status == 200){
//获取服务器端返回的数据
//获取服务器端返回的纯文本数据
var responseText = xmlhttp.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素的节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseText;
}
}
}
注意：上面使用的get方式请求参数如果要换成post则应该将：
xmlhttp.open("GET","servlet/AJAXServer?name="+username,true);
xmlhttp.send(null);
换成：
//POST方式请求的代码
xmlhttp.open("POST","servlet/AJAXServer",true);
//POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POst方式发送数据
xmlhttp.send("name="+username);
5测试okay。