本文介绍了一个基于AJAX的用户名验证系统实现过程，包括使用XMLHttpRequest对象进行异步数据交互，通过文本和XML两种方式接收服务器响应。
步骤1.新建项目ajaxtrain
下面有基于XMLHttprequest的文本返回方式和XML返回方式：
（一）文本返回形式
步骤2.新建servlet
package 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 = -7936252450796205712L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
if(old == null || old.length() == 0){
out.println("用户名不能为空！");
}else{
String name = old;
if(name.equals("lichao")){
out.println("用户名为：【"+name+"】的用户名已存在，请选用其他的用户名！");
}else{
out.println("用户名为：【"+name+"】的用户名尚未存在，可以使用该用户名！");
}
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>AJAXServer</servlet-name>
<servlet-class>servlet.AJAXServer</servlet-class>
</servlet>
<servlet>
<servlet-name>AJAXXMLServer</servlet-name>
<servlet-class>servlet.AJAXXMLServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServer</servlet-name>
<url-pattern>/AJAXServer</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>AJAXXMLServer</servlet-name>
<url-pattern>/AJAXXMLServer</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
步骤3.WebRoot下新建jslib文件夹，其下新建js文件verifyown.js
//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
//0.使用dom的方式获取文本框中的值
//document.getElementById("userName")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如<input>,
//value可以获取一个元素节点的value属性值
var userName = document.getElementById("userName").value;
//1.创建XMLHttprequest对象
//这是XMLHttprequest对象五步使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6,IE5,IE5.5
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中，排在前面的版本较新
var activxName = ["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对象创建失败！！");
return;
}else{
alert(xmlhttp);
}
//2.注册回调函数
//注册回调函数时，只需要函数名，不要加括号
//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
xmlhttp.onreadystatechange = callback;
//3.设置连接信息
//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
/**
*GET方式请求
*/
//xmlhttp.open("GET","AJAXServer?name="+ userName,true);
/**
*POST方式请求的代码
*/
xmlhttp.open("POST","AJAXServer",true);
//POST方式需要自己设置http的请求
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name=" + userName);
//4.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器端数据回来后才执行完
//异步方式，send这句话会立即完成执行
//xmlhttp.send(null);
}
//回调函数
function callback(){
//5.接收响应数据
//判断对象的状态是交互完成
if(xmlhttp.readyState == 4){
//判断http的交互是否成功
if(xmlhttp.status == 200){
//获取服务器端返回的数据
//获取服务器端输出的纯文本数据
var responseText = xmlhttp.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素节点
var divNode = document.getElementById("result");
//设置元素节点的html内容
divNode.innerHTML = responseText;
}
}
}
步骤4.新建jsp---ajax1.jsp
<%@ page language="java" pageEncoding="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>ajax测试注册页面</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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jslib/verifyown.js"></script>
</head>
<body>
请输入你要注册的用户名：
<input type="text" id="userName"/>
<input type="button" value="注册" onclick="verify()"/>
<div id="result"></div>
</body>
</html>
然后访问http://localhost:8080/ajaxtrain/ajax1.jsp测试即可
（二）XML返回形式
步骤5.新建servlet---AJAXXMLServer
package 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 AJAXXMLServer extends HttpServlet {
private static final long serialVersionUID = 280925768036330892L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//修改点1
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
//修改点2-------xml文本形式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
if(old == null || old.length() == 0){
builder.append("用户名不能为空！").append("</message>");
}else{
String name = old;
if(name.equals("lichao")){
builder.append("用户名为：【"+name+"】的用户名已存在，请选用其他的用户名！").append("</message>");
}else{
builder.append("用户名为：【"+name+"】的用户名已存在，请选用其他的用户名！").append("</message>");
}
}
out.println(builder.toString());
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
步骤6.WebRoot下新建jslib文件夹，其下新建js文件verifyxml.js
//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
//0.使用dom的方式获取文本框中的值
//document.getElementById("userName")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如<input>,
//value可以获取一个元素节点的value属性值
var userName = document.getElementById("userName").value;
//1.创建XMLHttprequest对象
//这是XMLHttprequest对象五步使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6,IE5,IE5.5
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中，排在前面的版本较新
var activxName = ["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对象创建失败！！");
return;
}else{
alert(xmlhttp);
}
//2.注册回调函数
//注册回调函数时，只需要函数名，不要加括号
//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
xmlhttp.onreadystatechange = callback;
//3.设置连接信息
//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
/**
*GET方式请求
*/
//xmlhttp.open("GET","AJAXServer?name="+ userName,true);
/**
*POST方式请求的代码
*/
xmlhttp.open("POST","AJAXXMLServer",true);
//POST方式需要自己设置http的请求
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name=" + userName);
//4.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器端数据回来后才执行完
//异步方式，send这句话会立即完成执行
//xmlhttp.send(null);
}
//回调函数
function callback(){
//5.接收响应数据
//判断对象的状态是交互完成
if(xmlhttp.readyState == 4){
//判断http的交互是否成功
if(xmlhttp.status == 200){
//使用responseXML的方式来接收XML数据对象的DOM对象
var domObj = xmlhttp.responseXML;
alert(domObj);
if(domObj){
//dom中利用getElementsByTagName可以根据标签名来获取元素节点，返回的是一个数组
var messageNodes = domObj.getElementsByTagName("message");
if(messageNodes.length > 0){
//获取message节点中的文本内容
//message标签中的文本在dom中是message标签所对应的元素节点的字节点，firstChild可以获取到当前内容
//通过以下方式可以获取到文本内容所对应的节点
var textNode = messageNodes[0].firstChild;
//对于文本节点来说，可以通过nodeValue的方式返回文本节点的文本内容
var responseMessage = textNode.nodeValue;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素节点
var divNode = document.getElementById("result");
//设置元素节点的html内容
divNode.innerHTML = responseMessage;
}else{
alert("XML数据格式错误，原始文本内容为1：" + xmlhttp.responseText);
}
}else{
alert("XML数据格式错误，原始文本内容为2：" + xmlhttp.responseText);
}
}
}
}
步骤7.新建Jsp文件---ajaxxml.jsp
<%@ page language="java" pageEncoding="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>ajax测试注册页面</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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jslib/verifyxml.js"></script>
</head>
<body>
请输入你要注册的用户名：
<input type="text" id="userName"/>
<input type="button" value="注册" onclick="verify()"/>
<div id="result"></div>
</body>
</html>
然后访问http://localhost:8080/ajaxtrain/ajaxxml.jsp测试即可！！！
扫一扫
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
