<!--div和span的直观差异,div中的内容独占行,span中的内容和前后其他内容相处良好-->
function verify(){
//Jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点。
//jquery的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法
var jqueryObj = $("#userName");
//获取节点的值
var userName = jqueryObj.val();
//使用jquery的XMLHTTPrequest对象get请求的封装
$.ajax({
type: "POST", //http请求方式
url: "AJAXXMLServer", //服务器段url地址
data: "name=" + userName, //发送给服务器段的数据
dataType: "xml", //告诉JQuery返回的数据格式
success: callback //定义交互完成,并且服务器正确返回数据时调用的回调函数
});
}
//回调函数
function callback(data) {
// 接收服务器端返回的数据
// 需要将data这个dom对象中的数据解析出来
// 首先需要将dom的对象转换成JQuery的对象
var jqueryObj = $(data);
// 获取message节点
var message = jqueryObj.children();
// 获取文本内容
var text = message.text();
// 将服务器段返回的数据动态的显示在页面上
// 找到保存结果信息的节点
var resultObj = $("#result");
// 动态的改变页面中div节点中的内容
resultObj.html(text);
}
public class AJAXXMLServer extends HttpServlet{
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try{
// 响应的Content-Type必须是text/xml
httpServletResponse.setContentType("text/xml;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
// 取参数
String old = httpServletRequest.getParameter("name");
// 返回的数据需要拼装成xml格式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
//2.检查参数是否有问题
if(old == null || old.length() == 0){
builder.append("用户名不能为空").append("</message>");
} else{
//3.校验操作
String name = old;
if(name.equals("hardwin")){
// 和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户
builder.append("用户名[" + name + "]已经存在,请使用其他用户名").append("</message>");
} else{
builder.append("用户名[" + name + "]尚未存在,可以使用该用户名注册").append("</message>");
}
out.println(builder.toString());
System.out.println(builder.toString());
}
} catch(Exception e){
e.printStackTrace();
}
}
}