利用XMLHttpRequest对象接受与处理XML数据

最新推荐文章于 2023-06-09 11:02:49 发布

原创最新推荐文章于 2023-06-09 11:02:49 发布 · 264 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#XML #Servlet #Ajax #HTML #IE

Ajax 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用AJAX技术实现的用户名校验示例，包括HTML页面搭建、服务器端Servlet程序编写、web.xml配置及客户端JavaScript代码。展示了如何通过AJAX进行异步数据交互，以及服务器端如何响应XML数据。

1.新建一个html文件。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>ajaxxml.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<script type="text/javascript" src="js/verifyxml.js"></script>
	</head>

	<body>
		<h3>
			用户名输入校验的例子
		</h3>
		<input name="username" type="text" id="username">
		<br>
		<input type="button" value="检验" onclick="verify()">
		<div id="result"></div>
	</body>
</html>

2.创建服务器端servlet程序

package com.zchen.ajax.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;

//返回XML数据
public class AJAXXMLServlet extends HttpServlet {
	private static final long serialVersionUID = 3611240119854641367L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		try {
			//修改点1：响应的Content-Type必须是text/xml
			response.setContentType("text/xml;charset=utf-8");
			
			PrintWriter out = response.getWriter();
			String old = request.getParameter("name");
			
			//修改点2：返回数据需要拼装成xml格式
			StringBuilder builder = new StringBuilder();
			builder.append("<message>");
			if (old == null || old.length() == 0) {
				out.println("用户名不能为空");
			} else {
				String name = new String(old.getBytes("ISO-8859-1"), "UTF-8");
				if (name.equals("chenzhen")) {
					builder.append("用户名[" + name + "]已经存在。").append("</message>");
				} else {
					builder.append("用户名[" + name + "]尚未存在。").append("</message>");
				}
				out.println(builder.toString());
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

3.将servlet映射配置到web.xml文件中。

4.新建客户端js文件

//用户名校验的方法
//这个方法是用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
//1.使用dom的方式获取文本框的值
	//document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面的一个标签，例如<input >
	//.value可以获取一个元素节点的value属性值
var username = document.getElementById("username").value;
//2.创建XMLHTTPRequest对象
	//这XMLHTTPRequest是对象内部使用中最复杂的一步
	//需要针对IE和其他类型的游览器建立这个对象的不同使用方式
	if(window.XMLHttpRequest){
		//针对FireFox、Mozillar、Opera、safari、IE7、IE8
		xmlhttp = new XMLHttpRequest();
		if(xmlhttp.overrideMineType){
			//针对某些特定版本的mozillar游览器的BUG进行修正
		   xmlhttp.overrideMimeType("text/html");
		}
	}else if(window.ActiveXObject){
	 	//针对IE6、IE5.5、IE5
	 	//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
	 	//排在前面的版本较新
	 	var activexName = ['MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
	 	for(var i=0;i<activexName.length;i++){
	 		try{
	 			//取出一个控件名进行创建，如果创建成功就终止循环
	 			//如果创建失败回抛出异常然后可以继续循环继续藏式创建
	 			xmlhttp = new ActiveXObject(activexName[i]);
	 			break;
	 		}catch(e){
	 			
	 		}
	 	}
	}
	//确认XMLHTTPRequest对象创建成功
	if(!xmlhttp){
		alert("XMLHTTPRequest对象创建失败！");
	}else{
		//alert(xmlhttp.readyState);
	}
	
//3.注册回调函数
	//注册回调函数时，只需要函数名不需要括号
	//我们需要将函数名之策，如果加上括号就会把函数的返回值注册上这是错误的
	xmlhttp.onreadystatechange = callback;	
	
//4.设置连接信息
	//第一个参数表示http的请求方式，支持所有http的请求方式，只要使用get和post
	//第二个参数表示请求的url地址，get方式请求的参数也在url中
	//第三个参数表示采用异步还是同步方式交互 true表示异步
	//xmlhttp.open("GET","servlet/AJAXServer?name="+username,true);
	
	//POST方式请求的代码
	xmlhttp.open("POST","servlet/AJAXXMLServlet",true);
	//POST方式需要自己设置http的请求头
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//POst方式发送数据
	xmlhttp.send("name="+username);
	
//5.发送数据，开始和服务器端进行交互
	//同步方式下，send这句话会在服务器端数据回来后才执行完
	//异步方式下，send这句话会立即完成执行
	//xmlhttp.send(null);
}

function callback(){
	//alert(xmlhttp.readyState);
//6.接受响应的数据
	//判断对象的状态时交互完成
	//一共有5种状态，4表示完成
	if(xmlhttp.readyState == 4){
		//判断http的交互是否成功 200表示成功
		if(xmlhttp.status == 200){
			//使用responseXML的方式来接受XML数据对象的DOM对象
			var domObj = xmlhttp.responseXML;
			if(domObj){
				//<message>123456789</message>我们要获取message里面的文本信息
				//dom中利用getElementByTagName可以根据标签名来获取元素的节点
				var messageNode = domObj.getElementsByTagName("message");
				if(messageNode.length > 0){
					//获取message节点中的文本内容
					//message标签中的文本在dom中是message标签所对应的元素节点的子节点，firstChild可以获取到当前节点的第一个元素
					//通过以下方式就可以获得文本内容所对应的节点
					var textNode = messageNode[0].firstChild;
					//对应文本节点来说可以通过nodeValue的方式返回文本节点的文本内容
					var responseMessage = textNode.nodeValue;
					
					//将数据显示在页面上
					//通过dom的方式找到div标签所对应的元素的节点
					var divNode = document.getElementById("result");
					//设置元素节点中的html内容
					divNode.innerHTML = responseMessage;
			 	}else{
			 		alert("XML数据格式错误，原始文本内容为："+xmlhttp.responseMessage);
				}
			 }
		}else{
			alert("出错了");
		}
	}
}

5.测试okay