AJAX学习总结（三）--jQuery处理xml数据
步骤1.新建项目ajaxtrain
?
步骤2.在WebRoot下新建jslib文件夹，并将jQuery的库（jquery-1.4.2.min.js）放在该目录下
?
步骤3.新建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 AJAXXMLServer extends HttpServlet {private static final long serialVersionUID = 280925768036330892L;public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//修改点1response.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);}}?
?
步骤4.新建js--verifyjqueryxml.js
?
?
function verify(){//alert("点击了");//1、获取文本框的内容//document.getElementById("userName");dom的方式//jQuery的查找节点的方式，参数中#加上id属性值可以找到一个节点//jQuery的方法返回的都是jQuery的对象，可以继续在上面执行其他的jQuery方法var jqueryObj = $("#userName");//获取节点的值var userName = jqueryObj.val();//alert(userName);//2、将文本框中的数据发送给服务器端的servlet//使用jQuery的XMLHTTPRequest对象get请求的封装$.ajax({type:"POST", //http请求方式url:"AJAXXMLServer",//url请求地址data:"name=" + 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);}??
步骤5.新建jsp文件---ajaxjqueryxml.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/verifyjqueryxml.js"></script><script type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script> </head> <body> 请输入你要注册的用户名： <input type="text" id="userName"/> <input type="button" value="注册" onclick="verify()"/> <div id="result"></div> </body></html>
?
?
?
然后访问http://localhost:8080/ajaxtrain/ajaxjqueryxml.jsp即可