postingXML.html-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_9891/article/details/81692317

本文介绍了一个使用Ajax技术发送XML数据到服务器端的例子。通过JavaScript创建XMLHttpRequest对象，并利用POST请求方式发送用户选择的宠物类型数据。服务器端接收XML数据并解析，将解析后的结果返回给客户端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例子来源：《Ajax 基础教程》金灵等译这本书非常不错

postingXML.html


<html>
<head>
<title></title>
<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

function createXML() {
	var xml = "<pets>";
	var options = document.getElementById("petTypes").childNodes;
	var option = null;
	for(var i = 0; i < options.length; i++) {
		option = options[i];
		if(option.selected) {
			xml = xml + "<type>" + option.value + "<\/type>";
		}
	}
	xml = xml + "<\/pets>";
	return xml;
}

function sendPetTypes() {
	createXMLHttpRequest();

	var xml = createXML();
	var url = "PostingXMLExample?timeStamp=" + new Date().getTime();

	xmlHttp.open("POST", url, true);
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
	xmlHttp.send(xml);
}

function handleStateChange() {
	if(xmlHttp.readyState == 4) {
		if(xmlHttp.status == 200) {
			parseResults();
		}
	}
}

function parseResults() {
	var responseDiv = document.getElementById("serverResponse");
	if (responseDiv.hasChildNodes()) {
		responseDiv.removeChild(responseDiv.childNodes[0]);
	}

	var responseText = document.createTextNode(xmlHttp.responseText);
	responseDiv.appendChild(responseText);
}

</script>
</head>
<body>
<h1>Select the types of pets in your home: </h1>
<form action="#" >
	<select id="petTypes" size="6" multiple="true">
		<option value="cats">cats</option>
		<option value="dogs">dogs</option>
		<option value="fish">fish</option>
		<option value="birds">birds</option>
		<option value="hamsters">hamsters</option>
		<option value="rabbits">rabbits</option>
	</select>
	<br /><br />
	<input type="button" value="submit Pets" onclick="sendPetTypes();" />
	<h2>Server Response:</h2>

	<div id="serverResponse"></div>

</form>
</body>
</html>

PostingXMLExample.java


package ajaxbook.chap3;

import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;

import org.w3c.dom.Document;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

public class PostingXMLExample extends HttpServlet {

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		String xml = readXMLFromRequestBody(request);
		Document xmlDoc = null;
		try {
			xmlDoc = DocumentBuilderFactory.newInstance().newDocumentBuilder()
						.parse(new ByteArrayInputStream(xml.getBytes()));
		}
		catch(ParserConfigurationException e) {
			System.out.println("ParserConfigurationException: " + e);
		}
		catch(SAXException e) {
			System.out.println("SAXException: " + e);
		}

		NodeList selectedPetTypes = xmlDoc.getElementsByTagName("type");
		String type = null;
		String responseText = "selected Pets: ";
		for(int i = 0; i < selectedPetTypes.getLength(); i++) {
			type = selectedPetTypes.item(i).getFirstChild().getNodeValue();
			responseText = responseText + " " + type;
		}

		response.setContentType("text/xml");
		response.getWriter().print(responseText);


	}

	private String readXMLFromRequestBody(HttpServletRequest request) {
		StringBuffer xml = new StringBuffer();
		String line = null;
		try {
			BufferedReader reader = request.getReader();
			while((line = reader.readLine()) != null) {
				xml.append(line);
			}
		}
		catch(Exception e) {
			System.out.println("Error reading XML: " + e.toString());
		}
		return xml.toString();
	}

}