【Ajax技术】利用XHR接受与处理XML数据

简介:
我们将之前写的应用使用xml返回数据,下面是如何修改:
程序清单
服务端Servelt:AjaxXMLServer.java
静态页面:ajaxXml.html
javascript脚本文件:verifyxml.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();
	       } 
	 }

}

ajaxXml.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/verifyxml.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>

verifyxml.js:

//用户名校验的方法
//这个方法使用XMLHttpRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
	//1.使用最基本的DOM_API来获取文本框中的值
	//document.getElementById("username")是dom中获取元素节点的一种方法,一个元素节点对应HTML
	//页面中的一个标签,.value可以获取一个元素节点的value属性值
	//
	var username=document.getElementById("username").value;
	
	//2.创建XMLHttpRequest对象
	//这是XMLHttpRequest对象五步使用中最复杂的一步
	//这是由于各种浏览器兼容问题造成的,要使用各种库来屏蔽掉这种差异
	//下面根据IE和其它类型的浏览器建立这个对象的不同方式写不同的代码
	if(window.XMLHttpRequest){
		//针对FireFox、Mozillar、Opera、Safari、IE7、IE8
		xmlhttp=new XMLHttpRequest();
		//修复类似Mozillar浏览器的bug
		if(xmlhttp.overrideMimeType){
			xmlhttp.overrideMimeType("text/xml");
		}
	}else if(window.ActiveXObject){
		//所有的IE中window.ActiveXObject条件都成立
		//针对IE6、IE5.5、IE5(现在没人用了,可以把这条if分支删除)
		//两个可以用于创建XMLHttpRequest对象的控件名称,保存在一个js的数组中
		//排在前面的版本最新
		var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
		for(var i=0;i<activeName.length;i++){
			try{
				//获取一个控件名进行创建,如果创建成功就终止循环
				//如果创建失败,会抛出异常,然后就可以继续循环,继续尝试创建
				xmlhttp=new ActiveXObject(activeName[i]);
				break;
			}catch(e){
				//仍然不能创建,抛出异常后,给出友好提示
			}
		}		
	}
	//确认XMLHttpRequest对象创建成功
	if(!xmlhttp){
		alert("XMLHttpRequest对象创建失败!!");
	}else{
		alert(xmlhttp);
	}


	//2.注册回调函数
	//后面写的是函数名,千万不要加括号,会把
	//回调函数的返回值给XHR的回调函数对象
	xmlhttp.onreadystatechange=callback;
	
	//3.设置连接信息
	//包括传输方式(get/post),请求的url地址,异步还是同步方式(true/false),账号和密码(可不写)
	xmlhttp.open("POST","AjaxXMLServer", true);
	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	//4.发送数据,开始和服务器端进行交互
	//同步方式下,send这句话会在服务器端数据回来之后才执行
	//异步方式下,send这句话会立即完成执行
	xmlhttp.send("name="+username);
}


//回调函数
function callback(){
	//判断对象的状态是交互完成
	//XHR的交互状态readyState代号有:
	/**
	  * 监听服务器返回的状态一共有五个状态:
	  * 0,1,2,3,4
	  * 0是啥都没有连接的时候
	  * 1是open方法还没被调用
	  * 2是open方法调用了,send方法没有执行
	  * 3是open方法执行了,send方法也执行了
	  * 4是返回结果的时候的状态(status) 
	  * */
	if(xmlhttp.readyState==4){
		//判断http的交互是否成功
		if(xmlhttp.status==200){
			//使用responseXML的方式来接收XML数据对象的DOM对象
			var domobj=xmlhttp.responseXML;
			if(domobj){
				//<message>123123123</message>
				//利用getElementsByTagName可以根据标签名来获取元素节点
				var messgaeNode=domobj.getElementsByTagName("message");
				if(messgaeNode.length>0){
					//可能会找到很多message节点,所以接收到的是数组,因为就一个,所以取0号节点
					//message标签中的文本在dom中是message标签所对应的元素节点的子节点,firstChild可以获取到
					//当前节点的第一个子节点
					//通过以下方式就可以获取到文本内容所对应的节点
					var textNode=messgaeNode[0].firstChild;
					//对于文本节点来说,可以通过nodeValue的方式返回文本节点的内容
					var responseMessage=textNode.nodeValue;
					
					//将数据显示在界面上
					//通过DOM的方式找到div标签对应的元素节点
					var divNode=document.getElementById("result");
					//设置元素节点中的html内容
					divNode.innerHTML=responseMessage;
				}else{
					alert("XML数据错误,原始文本内容为:"+xmlhttp.responseText);
				}
			}else{
				alert("XML数据错误,原始文本内容为:"+xmlhttp.responseText);
			}
		}else{
			alert("出错了!");
		}
	}
}

我们在js的回调函数中为了保证对数据处理的正确性,进行了多层次的判断

测试:输入123点击校验,服务器端返回的信息在界面上显示,试验成功!


总结----AJAX应用的五个步骤
1.建立XMLHttpRequest
2.设置回调函数
3.使用open方法与服务器建立连接
4.向服务器端发送数据
5.再回调函数针对不同相应状态进行处理

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

相关文章
|
15天前
|
XML JavaScript 数据格式
XML 相关技术
XML 相关技术
|
3月前
|
XML JavaScript Java
【JAVA XML 探秘】DOM、SAX、StAX:揭秘 Java 中 XML 解析技术的终极指南!
【8月更文挑战第25天】本文详细探讨了Java中三种主流的XML解析技术:DOM、SAX与StAX。DOM将XML文档转换为树状结构,便于全方位访问和修改;SAX采取事件驱动模式,适用于大型文件的顺序处理;StAX则兼具DOM和SAX的优点,支持流式处理和随机访问。文中提供了每种技术的示例代码,帮助读者理解如何在实际项目中应用这些解析方法。
185 1
|
8天前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
25 3
|
19天前
|
JSON 前端开发 JavaScript
java-ajax技术详解!!!
本文介绍了Ajax技术及其工作原理,包括其核心XMLHttpRequest对象的属性和方法。Ajax通过异步通信技术,实现在不重新加载整个页面的情况下更新部分网页内容。文章还详细描述了使用原生JavaScript实现Ajax的基本步骤,以及利用jQuery简化Ajax操作的方法。最后,介绍了JSON作为轻量级数据交换格式在Ajax应用中的使用,包括Java中JSON与对象的相互转换。
33 1
|
5月前
|
XML Java 数据格式
必知的技术知识:java基础73dom4j修改xml里面的内容(网页知识)
必知的技术知识:java基础73dom4j修改xml里面的内容(网页知识)
39 1
|
1月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
|
1月前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
|
2月前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
217 2
|
3月前
|
C# 前端开发 UED
WPF数据验证实战:内置控件与自定义规则,带你玩转前端数据验证,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,数据验证是确保输入正确性的关键环节。前端验证能及时发现错误,提升用户体验和程序可靠性。本文对比了几种常用的WPF数据验证方法,并通过示例展示了如何使用内置验证控件(如`TextBox`)及自定义验证规则实现有效验证。内置控件结合`Validation`类可快速实现简单验证;自定义规则则提供了更灵活的复杂逻辑支持。希望本文能帮助开发者更好地进行WPF数据验证。
118 0
|
3月前
|
前端开发 Java UED
告别页面刷新时代:Struts 2 Ajax技术揭秘,轻松实现动态加载,Web应用焕然一新!
【8月更文挑战第31天】在Web应用开发中,用户体验至关重要。为减少页面刷新带来的不适,Ajax技术应运而生。Struts 2作为流行的Java EE框架,通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式,展示了Struts 2如何轻松实现Ajax功能,提升了用户体验和开发效率,并灵活地实现了数据交换。然而,使用Ajax时还需注意SEO和跨域请求等局限性。
44 0