postingXML.html

本文介绍了一个使用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();
}

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值