【Ajax技术】JQuery处理XML数据

我们将之前写的应用使用jquery返回xml数据
程序清单
服务端Servelt:AjaxXMLServer.java
静态页面:ajaxJqueryXml.html
javascript脚本文件：verifyjqueryxml.js

AjaxXMLServer.java:

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

//这个servlet返回的是XML的数据
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{

	        	//修改点1------相应的ContentType必须为text/xml
	            httpServletResponse.setContentType("text/xml;charset=utf-8");
	            PrintWriter out = httpServletResponse.getWriter();

	            //inte用来记录验证次数
	            Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
	            int temp = 0;
	            if (inte == null) {
	                temp = 1;
	            } else {
	                temp = inte.intValue() + 1;
	            }
	            httpServletRequest.getSession().setAttribute("total",temp);

	            //1.取参数
	            String old = httpServletRequest.getParameter("name");
	            //String name = new String(old.getBytes("iso8859-1"),"UTF-8");
	            String name = URLDecoder.decode(old,"UTF-8");

	            //修改点2-----返回的数据需要拼装成xml格式
            	StringBuilder builder=new StringBuilder();
            	builder.append("<message>");

	            //2.检查参数是否有问题
	            if(old == null || old.length() == 0){
	            	builder.append("用户名不能为空").append("</message>");
	            } else{

	                if(name.equals("hpu")){
	                    //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
	                    //写法没有变化，本质发生了改变
	                	builder.append("用户名[" + name + "]已经存在，请使用其他用户名, " + temp).append("</message>");
	                } else{
	                	builder.append("用户名[" + name + "]尚未存在，可以使用该用户名注册, " + temp).append("</message>");
	                }
	                out.println(builder.toString());
	                System.out.println(builder.toString());
	            }
	        } catch(Exception e){
	            e.printStackTrace();
	       }
	 }
}

ajaxJqueryXml.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户校验ajax实例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="js/verifyjqueryxml.js"></script>
  </head>

  <body>
    <h1> 用户校验ajax实例</h1><br>
    请输入用户名:<br/>
    <!-- ajax不需要使用表单进行数据提交，因此不用写表单标签 -->

    <!-- ajax不需要name属性，只需要一个id的属性 -->
    <input type="text" id="username"/>
    <input type="button" value="校验" onclick="verify()"/>
    <!-- 这个div用于存放服务器返回的信息，开始为空 -->
    <!-- id属性定义是为了利用dom的方式找到某一个节点，进行操作 -->
    <div id="result">

    </div>
    <!-- div和span的值的差异，div的内容独占行，span的内容和其他内容相处良好 -->

  </body>
</html>

verifyjqueryxml.js:

//定义用户名校验的方法
function verify(){
	//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:20};

	//使用JQuery的XMLHttpRequest对象请求的封装
	$.ajax({
		type:"POST",//Http请求方式
		url:"AjaxXMLServer", //服务器端url地址
		data:"name="+username, //发送给服务器端的数据
		dataType:"xml",//告诉JQuery返回的数据方式
		success:callback //定义交互完成，并且服务器正确返回数据时调用的回调函数
	});

}

//回调函数
function callback(data){

	//3.接受服务器端返回的数据
	//需要将data这个dom对象中的数据解析出来
	//首先需要将dom的对象转换成jquery的对象
	var jqueryObj=$(data);
	//获取message节点
	var message=jqueryObj.children();
	//获取节点中的内容
	//如果节点中有多条信息，执行text方法会把所有信息拼接在一块
	var text=message.text();
	//4.将服务器返回的数据动态的显示在页面上
	//找到保存信息的节点
	var resultObj=$("#result");
	//往这个节点填充服务器返回的值
	//div节点中的内容就会被改变
	resultObj.html(text);
}

测试：输入123点击校验，服务器端返回的信息在界面上显示，试验成功！
可以看到，使用jquery所封装的方法写的js文件，比传统的调用XMLHttpRequest对象去操作要

简洁了许多，这就是站在巨人肩膀上看得更远。

转载请注明出处：http://blog.csdn.net/acmman/article/details/47720219