步骤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="注册" οnclick="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="注册" οnclick="verify()"/>
<div id="result"></div>
</body>
</html>
然后访问http://localhost:8080/ajaxtrain/ajaxxml.jsp测试即可!!!