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

69 阅读 0 评论 46 点赞

我是靠谱客的博主默默唇彩，最近开发中收集的这篇文章主要介绍XMLHTTPRequest处理返回XML数据和jQuery处理返回XML数据比较，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在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" οnblur="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" οnblur="test();"/><span id="div1" style="color: red"></span>
<br/>
密码:<input type="password" id="password" /><br/>
邮箱:<input type="text" id="mail" />
</body>
</html>

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