AJAX基础教程－3 Dynamic Content

JS/XML交互实例

最新推荐文章于 2023-01-11 23:32:18 发布

最新推荐文章于 2023-01-11 23:32:18 发布 · 161 阅读

文章标签：

#Ajax #XML #JavaScript #Microsoft #HTML #ViewUI

JavaScript&AJAX 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个使用JavaScript处理XML文件的具体示例。通过Ajax技术获取并解析XML文件内容，然后将数据呈现在HTML页面上。

js 代码

<script type=< span="">"text/javascript">
var xmlHttp;
//创建xmlHttp对象
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//读取指定xml文件的操作
function doSearch() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "dynamicContent.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
clearPreviousResults(); //清除以前的结果集
parseResults(); //解析结果集生成制定的html表单
}
}
}
//清除以前的结果集
function clearPreviousResults() {
var header = document.getElementById("header");
if(header.hasChildNodes()) {
header.removeChild(header.childNodes[0]);
}
var tableBody = document.getElementById("resultsBody");
while(tableBody.childNodes.length > 0) {
tableBody.removeChild(tableBody.childNodes[0]);
}
}
//解析结果集
function parseResults() {
var results = xmlHttp.responseXML;
var property = null;
var address = "";
var price = "";
var comments = "";
var properties = results.getElementsByTagName("property");
for(var i = 0; i < properties.length; i++) {
property = properties[i];
address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
addTableRow(address, price, comments);
}
var header = document.createElement("h2");
var headerText = document.createTextNode("Results:");
header.appendChild(headerText);
document.getElementById("header").appendChild(header);
document.getElementById("resultsTable").setAttribute("border", "1");
}
//添加表行数据
function addTableRow(address, price, comments) {
var row = document.createElement("tr");
var cell = createCellWithText(address);
row.appendChild(cell);
cell = createCellWithText(price);
row.appendChild(cell);
cell = createCellWithText(comments);
row.appendChild(cell);
document.getElementById("resultsBody").appendChild(row);
}
function createCellWithText(text) {
var cell = document.createElement("td");
var textNode = document.createTextNode(text);
cell.appendChild(textNode);
return cell;
}
</script>

xml 代码

xml version="1.0" encoding="UTF-8"?>
<properties>
<property>
<address>812 Gwyn Aveaddress>
<price>$100,000price>
<comments>Quiet, serene neighborhoodcomments>
property>
<property>
<address>3308 James Ave Saddress>
<price>$110,000price>
<comments>Close to schools, shopping, entertainmentcomments>
property>
<property>
<address>98320 County Rd 113address>
<price>$115,000price>
<comments>Small acreage outside of towncomments>
property>
properties>