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

最新推荐文章于 2021-12-28 17:57:49 发布

这个角度有点胖

最新推荐文章于 2021-12-28 17:57:49 发布

阅读量390

点赞数

本文链接：https://blog.csdn.net/qq_43679366/article/details/87379530

版权

在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>