兼容IE6、IE7、FF、Chrome浏览器，jquery验证用户名是否已存在。
1、AjaxXMLServer的Servlet代码:
package com.web;
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 {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
//响应的Content-Type必须是text/xml,因为在jquery中数据接收的格式为xml
response.setContentType("text/xml;charset=utf-8");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
//1、获取参数
String userName=request.getParameter("userName");
//2、返回的数据类型拼装成xml格式
StringBuilder builder=new StringBuilder();
builder.append("<message>");
if(userName==null || userName.length()==0){
builder.append("用户名不能为空").append("</message>");
}else{
//3.校验操作
if(userName.equals("tfq")){
//返回给用户提示信息
builder.append("用户名["+userName+"]已经存在,请重新输入用户名").append("</message>");
}else{
builder.append("用户名["+userName+"]尚未被注册,可以使用该用户名").append("</message>");
}
out.println(builder.toString());
}
} catch (Exception e) {
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
doGet(request,response);
}
}
2、checkUserJquery.html文件：
3、myVlidate_jquery.js文件：
//验证用户是否存在
function validate() {
// 1获取文本框的内容
// document.getElementById("userName"); dom的方式
// Jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点
var obj = $("#userName");
var userName = obj.val();
//alert("userName: " + userName);
// 2将获取到的内容发送给服务器的servlet
// 调用jquery的XMLHTTPrequest对象get请求的封装
//$.get("servlet/CheckUserName?userName=" + userName, null, callback);
//JS中定义一个简单对象的格式 www.jb200.com
var jsObj={name:"123",age:30};
//使用jquery的XMLHTTPRequest对象get请求的封装
$.ajax({
type:"POST", //http请求方式
url:"servlet/AjaxXMLServer", //发送给服务器的url
data:"userName="+userName, //发送给服务器的参数
dataType:"xml", //告诉JQUERY返回的数据格式(注意此处数据格式一定要与提交的servlet返回的数据格式一致,不然不会调用callback)
success:callback //定义交互完成,并且服务器正确返回数据时调用回调函数
});
}
// 回调函数
function callback(data) {
// 3接收报务器返回的数据
//首先需要将data这个dom对象中的数据解析出来
var jqueryObj=$(data);
//获取message节点
var message=jqueryObj.children();
//获取文本内容
var text=message.text();
// 4把返回的数据在div中显示
$("#showResult").html(text);
}
注意，servlet与query中返回的数据要一致。