`

动态获得xml格式的数据 dynamicContent.html

阅读更多

dynamicContent.html

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

<html>
<head>
<title>Dynamically Editing Page Content</title>
<script>
var xmlHttp;
function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

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();
		}
	}
}

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 headerTest = document.createTextNode("Results:");
	header.appendChild(headerTest);
	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>
</head>
<body>
<form action="#">
		<input type="button" value="Serrch" onclick="doSearch();" />
		<input type="button" value="Clearn" onclick="clearPreviousResults();" />
</form>
<span id="header"></span>
<table id="resultsTable" width="75%" border="0">
	<tbody id="resultsBody"></tbody>
</table>
</body>
</html>


dynamicContent.xml

<?xml version="1.0" encoding="UTF-8"?>
<properties>
	<property>
		<address>812 Gwyn Ave</address>
		<price>$100,000</price>
		<comments>Queet, serene neighborhood</comments>
	</property>
	<property>
		<address>3308 James Ave S</address>
		<price>$110,000</price>
		<comments>Close to schools, shopping, entertainment</comments>
	</property>
	<property>
		<address>98320 County Rd 113</address>
		<price>$115,000</price>
		<comments>Small acreage outside of town</comments>
	</property>
</properties>
分享到:
评论

相关推荐

    AJAX基础教程-3 Dynamic Content

    `dynamicContent.xml`可能是服务器端返回的动态内容数据。XML文档结构清晰,易于解析,使得客户端可以轻松地读取并操作数据。在AJAX请求中,服务器可能会返回一个XML文档,其中包含了要更新到页面上的新内容。 ### ...

    jQuery dynamic content loading.zip

    "jQuery dynamic content loading.zip"是一个开源项目,旨在帮助开发者轻松地在网站上实现动态内容的加载,同时维护HTML5的历史记录,确保后退/前进按钮的正常功能。 该项目的核心是利用jQuery的Ajax功能来异步加载...

    超炫Flash+XML网站模板源码

    - `elite_powerful_dynamic_xml_video_gallery.fla`:视频画廊模块,动态加载XML文件中的视频数据,提供丰富的用户体验。 - `elite_powerful_dynamic_xml_gallery.fla`:图片画廊模块,同理,通过XML来管理图片和...

    绝对酷的flash+xml全站网页模板1,有详细的注释说明,一共7各版块,功能齐全,并有换肤功能

    每个FLA文件都包含ActionScript代码,这是Flash的编程语言,用于控制动画行为和与XML数据的交互。注释在这些源文件中至关重要,它们帮助开发者理解代码的功能和用途,从而进行修改或扩展。对于初学者来说,这是一个...

    Hibernate 中文 html 帮助文档

    18.1. 用XML数据进行工作 18.1.1. 指定同时映射XML和类 18.1.2. 只定义XML映射 18.2. XML映射元数据 18.3. 操作XML数据 19. 提升性能 19.1. 抓取策略(Fetching strategies) 19.1.1. 操作延迟加载的关联 19.1.2. ...

    Ajaxify a simple HTML page using a web service

    在现代Web开发中,Ajax(Asynchronous JavaScript and XML)是一种常用的技术,用于创建动态和交互性强的网页。它允许页面在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。本教程将深入讲解如何...

    QT基于HTML生成WORD文件

    生成Word文件的过程通常涉及到将QTextDocument对象转换为Open XML格式,这是Microsoft Word支持的文件格式之一。QT提供了一个名为`QAxObject`的COM接口,可以与Windows系统的ActiveX控件交互,例如Word应用程序。...

    C# 抓取数据

    另外,如果需要抓取的数据是以JSON或XML格式返回,C#提供了丰富的序列化和反序列化工具。例如,使用System.Text.Json或Newtonsoft.Json库,可以轻松地将数据转换为C#对象: ```csharp using System.Text.Json; ...

    hibernate 体系结构与配置 参考文档(html)

    1. Hibernate入门 1.1. 前言 1.2. 第一部分 - 第一个Hibernate应用程序 1.2.1.... 1.2.2.... 1.2.3.... 1.2.4.... 用XML数据进行工作 18.1.1. 指定同时映射XML和类 18.1.2. 只定义XML映射 18.2. XML映射...

    动态HTML参考手册

    动态HTML(Dynamic HTML)是HTML技术的一个重要分支,它通过结合HTML、CSS、JavaScript以及DOM(Document Object Model)等技术,使得网页内容可以更加生动、交互性和响应性更强。本参考手册将深入探讨动态HTML的...

    springmybatis

    查询出列表,也就是返回list, 在我们这个例子中也就是 List&lt;User&gt; , 这种方式返回数据,需要在User.xml 里面配置返回的类型 resultMap, 注意不是 resultType, 而这个resultMap 所对应的应该是我们自己配置的 ...

    VereWebMVC案例(从数据到前端页面)

    打开 Eclipse 新建一个 test 项目 Eclipse -&gt; File -&gt; New -&gt; Dynamic Web Project 将解压后 VereMVC/lib 目录下面的 jar 包拷贝到 test/WebContent/WEB-INF/lib 里面 commons-fileupload-1.2.1.jar ...

    HTML基础PDF的资料

    - **DHTML**: DHTML (Dynamic HTML) 是一种结合HTML、CSS和JavaScript的技术组合,用于创建动态网页。 - **XML**: XML (eXtensible Markup Language) 是一种用于存储和传输数据的语言,与HTML相比,XML更加灵活且...

    Lotus Domino WEB详细 学习笔记

    44. 在Domino Designer中使用XML数据 96 45. 在Domino Designer上执行XML 100 46. Show single category view, the next stage 107 47. Checkboxes in a list box 108 48. Formatting a Notes view in ...

    DHTML HTML5帮助文档

    DHTML(Dynamic HTML)是一种技术,它通过结合HTML、CSS(层叠样式表)、JavaScript以及DOM(Document Object Model)来增强静态HTML页面的交互性和动态性。在DHTML中,网页不再只是静态展示信息,而是能够响应用户...

    ajax动态选项卡(支持iframe)

    5. **XML/JSON**:通常作为Ajax通信的数据格式,XML用于结构化数据,JSON则更轻量级且易于JavaScript处理。 **动态选项卡实现** 动态选项卡通常包含以下部分: 1. **HTML结构**:定义选项卡的UI元素,如按钮或链接...

    asp.net 调用天气预报接口实现天气查寻

    在这个例子中,我们假设已经找到了一个天气预报API,并了解了其使用方法,包括请求URL、所需的参数(如城市名、API密钥)以及返回的数据格式。 在ASP.NET中,我们可以使用`System.Net.Http`命名空间中的`HttpClient...

    LotusDomino学习笔记(400页涵盖代理和公式使用)

    44. 在Domino Designer中使用XML数据 96 45. 在Domino Designer上执行XML 100 46. Show single category view, the next stage 107 47. Checkboxes in a list box 108 48. Formatting a Notes view in HTML table ...

Global site tag (gtag.js) - Google Analytics