innerHTML.html

最新推荐文章于 2021-06-28 15:31:21 发布

原创最新推荐文章于 2021-06-28 15:31:21 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #Ajax #XML #Microsoft

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个简单的Ajax应用实例，通过获取外部XML文件并利用JavaScript更新网页中的innerHTML属性来展示活动列表。此方法实现了局部刷新，提升了用户体验。

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


<html>
<head>
<title>Using responseText with innerHTML</title>
<script>
var xmlHttp;
function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}
function startRequest() {
	createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open("GET", "innerHTML.xml", true);
	xmlHttp.send(null);
}
function handleStateChange() {
	if(xmlHttp.readyState == 4) {
		if(xmlHttp.status == 200) {
			document.getElementById("results").innerHTML = xmlHttp.responseText;
		}
	}
}
</script>
</head>
<body>
<form action="#">
	<input type="button" value="Serrch for Today's Activeties" onClick="startRequest();">
</form>
<div id="results"></div>
</body>
</html>

innerHTML.xml


<table border="1">
	<tbody>
		<tr>
			<th>Activity Name</th>
			<th>Location</th>
			<th>Time</th>
		</tr>
		<tr>
			<td>Waterskiing</td>
			<td>Dock #1</td>
			<td>9:00 AM</td>
		</tr>
		<tr>
			<td>Volleyball</td>
			<td>East Court</td>
			<td>2:00 PM</td>
		</tr>
		<tr>
			<td>Hiking</td>
			<td>Trail 3</td>
			<td>3:30 PM</td>
		</tr>
	</tbody>
</table>