首先写一个html userxmljquery.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户校验ajax实例</title>
<!-- ajax方式下不需要使用表单来进行数据提交,因此不用写表单标签form -->
<!-- ajax方式不需要name属性,需要一个id属性 -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/validatexmljquery.js"></script>
</head>
<body>
用户名校验AJAX实例,请输入用户名:</br>
<input type="text" id="userName"><br>
<input type="button" value="检查" οnclick="validatexmljquery()">
<!--这个div用于存放服务器返回的信息,开始为空-->
<!--id属性定义是为了利用dom的方式找到某一节点,进行操作-->
<div id="result"></div>
<!--<div id="result"></div><div>456</div>-->
<!--<span>123</span><span>456</span>-->
<!--div和span的直观差异,div中的内容独占行,span会和前后内容相连接-->
</body>
</html>
再写一个servlet类 jqueryServletXML
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServlet;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
public class jqueryServletXML extends HttpServlet{
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try{
//修改点1---响应Content-Type必须是text/xml
httpServletResponse.setContentType("text/xml;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
//1.取参数
String username = httpServletRequest.getParameter("username");
//修改点2---返回的数据需要拼装成xml格式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
//2.检查参数是否有问题
if(username == null || username.length() == 0){
builder.append("用户名不能为空").append("</message>");
} else{
//3.校验操作
if(username.equals("wangxingkui")){
//4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户
//写法没有变化,本质发生了改变
builder.append("用户名[" + username + "]已经存在,请使用其他用户名, ").append("</message>");
} else{
builder.append("用户名[" + username + "]尚未存在,可以使用该用户名注册, ").append("</message>");
}
//修改点3---这一句话要加上
out.println(builder.toString());
}
} catch(Exception e){
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
}
最后写一个js validatexmljquery.js
//定义用户名校验方法
function validatexmljquery(){
//首先测试一下页面的按钮按下,可以调用这个方法
//使用JavaScript的alert方法,显示一个弹出提示框
// alert("按钮被点击了");
//1.获取文本框中的内容
//document.getElementById("username"); dom方式
//jquery的查找节点的方式,参数中#加上id的属性值就可以找到一个节点
//jquery的方法返回的都是jquery的对象,可以继续在面执行其他的jquery操作
var jqueryObj = $("#userName");
//获取节点的值
var userName = jqueryObj.val();
//alert(userName);
//2.将文本框中的数据发送给服务器端的servlet
//javascript当中,一个简单的对象的定义方法
// var obj = {name:"123",age:24};
//使用jquery的XMLHTTPRequest对象get请求的封装
$.ajax( {
type:"POST",//HTTP请求方式
url:"jqueryServletXML",//服务器端的url地址
data:"username=" + userName,//发功给服务器端的数据
dataType:"xml",//告诉jquery返回的数据格式
success:callback //定义交互完成,并且服务器正确返回时调用的回调函数
} );
}
//回调函数
function callback(data){
// alert("服务器端的数据回来了!!");
//3.接收服务器端返回的数据
//需要将data这个dom对象中的数据解析出来
//首先需要将dom的对象转换成jquery的对象
var jqueryObj = $(data);
//获取message节点
var message = jqueryObj.children();
//获取文本内容
var text = message.text();
//.4将服务器端返回的数据动态的显示在页面上
//找到保存结果信息的节点
var resultObj = $("#result");
//动态改变页面中div节点中的内容
resultObj.html(text);
}
不要忘了配置web.xml