1.新建一个html文件。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajaxxml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/verifyxml.js"></script>
</head>
<body>
<h3>
用户名输入校验的例子
</h3>
<input name="username" type="text" id="username">
<br>
<input type="button" value="检验" οnclick="verify()">
<div id="result"></div>
</body>
</html>
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;
//返回XML数据
public class AJAXXMLServlet 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 {
//修改点1:响应的Content-Type必须是text/xml
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) {
out.println("用户名不能为空");
} else {
String name = new String(old.getBytes("ISO-8859-1"), "UTF-8");
if (name.equals("chenzhen")) {
builder.append("用户名[" + name + "]已经存在。").append("</message>");
} else {
builder.append("用户名[" + name + "]尚未存在。").append("</message>");
}
out.println(builder.toString());
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
3.将servlet映射配置到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.readyState); } //3.注册回调函数 //注册回调函数时,只需要函数名不需要括号 //我们需要将函数名之策,如果加上括号就会把函数的返回值注册上这是错误的 xmlhttp.onreadystatechange = callback; //4.设置连接信息 //第一个参数表示http的请求方式,支持所有http的请求方式,只要使用get和post //第二个参数表示请求的url地址,get方式请求的参数也在url中 //第三个参数表示采用异步还是同步方式交互 true表示异步 //xmlhttp.open("GET","servlet/AJAXServer?name="+username,true); //POST方式请求的代码 xmlhttp.open("POST","servlet/AJAXXMLServlet",true); //POST方式需要自己设置http的请求头 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //POst方式发送数据 xmlhttp.send("name="+username); //5.发送数据,开始和服务器端进行交互 //同步方式下,send这句话会在服务器端数据回来后才执行完 //异步方式下,send这句话会立即完成执行 //xmlhttp.send(null); } function callback(){ //alert(xmlhttp.readyState); //6.接受响应的数据 //判断对象的状态时交互完成 //一共有5种状态,4表示完成 if(xmlhttp.readyState == 4){ //判断http的交互是否成功 200表示成功 if(xmlhttp.status == 200){ //使用responseXML的方式来接受XML数据对象的DOM对象 var domObj = xmlhttp.responseXML; if(domObj){ //<message>123456789</message>我们要获取message里面的文本信息 //dom中利用getElementByTagName可以根据标签名来获取元素的节点 var messageNode = domObj.getElementsByTagName("message"); if(messageNode.length > 0){ //获取message节点中的文本内容 //message标签中的文本在dom中是message标签所对应的元素节点的子节点,firstChild可以获取到当前节点的第一个元素 //通过以下方式就可以获得文本内容所对应的节点 var textNode = messageNode[0].firstChild; //对应文本节点来说可以通过nodeValue的方式返回文本节点的文本内容 var responseMessage = textNode.nodeValue; //将数据显示在页面上 //通过dom的方式找到div标签所对应的元素的节点 var divNode = document.getElementById("result"); //设置元素节点中的html内容 divNode.innerHTML = responseMessage; }else{ alert("XML数据格式错误,原始文本内容为:"+xmlhttp.responseMessage); } } }else{ alert("出错了"); } } }
5.测试okay