您的位置：首页 > 理论基础 > 计算机网络

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

2012-05-20 10:49 766 查看

在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的方法简单很多，所以建议使用后面的这种方法。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航