XMLHTTPRequest处理返回XML数据和jQuery处理返回XML数据比较

来源：互联网发布：网络教育高升本费用编辑：程序博客网时间：2024/04/28 11:33

在Ajax应用中，使用XMLHTTPRequest处理的请求后台可以返回给纯文本数据，也可以是XML数据，但是XML数

据比纯文本更好一些。可以在其中包含大量的数据，更可以使用dom4j这样的XML工具进行XML文本的解析，下面我们

通过两种方式，分别是纯JavaScript创建XMLHTTPRequest对象和Dom 解析XML，然后再使用jQuery处理XML对象，

比较一下就可以发现jQuery写Ajax应用的优势。

首先是JavaScript实现XML数据的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>ajax1.html</title><script type="text/javascript">var xmlhttp;function verify(){//这个方法使用XMLHttpRequest对象来进行Ajax异步交互数据//1.使用dom的方式获取文本框的内容var userName = document.getElementById("userName").value;//2.创建XMLHTTPRequest对象if(window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}else if(window.ActiveXObject){//针对ie6以下版本var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];//两个可以用来创建XMLHTTPRequest对象的控件，进行尝试创建for(var i=0; i < activexName.length; i++){try{xmlhttp = new ActiveXObject(activexName[i]);break;}catch(e){}}}//最后 确认xmlhttprequest对象创建成功if(!xmlhttp){alert("请更换更新版本的浏览器");return;}else{//2.注册回调函数,只需要函数名不需要加括号xmlhttp.onreadystatechange = callback;//3.设置连接信息xmlhttp.open("GET","/Ajax/servlet/AjaxXmlServer?name="+userName, true);//4.发送数据，开始和服务器端进行交互xmlhttp.send(null);}}//回调函数function callback(){//判断对象交互完成if(xmlhttp.readyState==4){//判断http交互是否成功if(xmlhttp.status==200){//获取服务器的数据//获取XML包装的的数据var responseText = xmlhttp.responseXML;var messageNodes = responseText.getElementsByTagName("message");var messageNode = messageNodes[0];var text = messageNodes[0].firstChild.nodeValue;document.getElementById("div1").innerHTML=text;}}}</script>  </head>    <body>   用户名:<input type="text" id="userName" onblur="verify();"/><span id="div1" style="color: red"></span><br/>    密码:<input type="password" id="password" /><br/>    邮箱:<input type="text" id="mail" />  </body></html>

下面的是后台的servlet的代码

package com.bird.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 {/** * 返回XML数据 */private static final long serialVersionUID = 1L;public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/xml;charset=UTF-8");String name = request.getParameter("name");//name = new String(name.getBytes("ISO-8859-1"),"UTF-8");PrintWriter out = response.getWriter();StringBuilder builder = new StringBuilder();builder.append("<message>");if(name.equals("bird")){builder.append("用户名"+name+"已经存在").append("</message>");}else{builder.append("用户名不存在，可以使用"+"</message>");}out.println(builder.toString());}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}}

然后是jQuery的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>ajax.html</title><script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script><script type="text/javascript">function test(){//1.获取文本框中的值var value = $("#userName").val();//2.将文本框中的内容发送给后台服务器//JavaScript定义一个简单的对象如下//var obj = {name:"123",age:20};$.ajax({type: "POST",////http请求方式url: "/Ajax/servlet/AjaxXmlServer",  //服务器的地址data: "name="+value, //发送的数据dataType: "xml", //数据的返回类型success: callback  //注册回调函数});}function callback(data){//回调函数//需要将data这个dom对象中的数据解析出来，首先需要将dom对象转换成jQuery对象var jqueryObj = $(data);//获取messahe节点var message = jqueryObj.children();var text = message.text();$("#div1").html(text);}</script>  </head>    <body>    用户名:<input type="text" id="userName" onblur="test();"/><span id="div1" style="color: red"></span><br/>    密码:<input type="password" id="password" /><br/>    邮箱:<input type="text" id="mail" />  </body></html>

可以发现,jquery的方法简单很多，所以建议使用后面的这种方法。