JS AJAX--- XML文件

望望byte

于 2021-08-06 12:56:44 发布

阅读量178

点赞数

分类专栏： JavaScript学习笔记文章标签： js ajax

原文链接：https://www.w3school.com.cn/js/js_ajax_xmlfile.asp

版权

JavaScript学习笔记专栏收录该内容

71 篇文章 0 订阅

订阅专栏

AJAX 可用于同 XML文件进行交互式通信

AJAX XML 实例

下面的例子演示网页如何通过 AJAX 从 XML 文件读取信息：

当用户点击“获取 CD 信息”按钮时，执行 loadDoc() 函数。
loadDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并向服务器发送请求。
当服务器响应就绪后，构建 HTML 表格，从 XML 文件提取节点（因素），最后使用由 XML 数据填充的 HTML 表格对元素“demo”进行更新：

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadDoc()" >获取我的音乐列表</button>
<br><br>
<table id="demo"> </table>
<script>
function loadDoc() {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange= function() {
		if(this.readyState== 4&& this.status == 400){
		 myFunction(this);
		}
	}
	xhttp.open("GET" ,"/demo/music_list.xml", true);
	xhttp.send();
}
function myFunction(xhttp){
	var i, xmlDoc = xhttp.responseXML;
	var table="<tr><th>艺术家</th><th>曲目</th></tr>";
	var x= xmlDoc,getElementByTagName("TRACK");
	for (i=0; i<x.length; i++){
		table += "<tr><tb>"+ x[i].getElementByTagName("ARTIST")[0].childNodes[0].nodeValue +    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";	
	}
	  document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>

望望byte

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS AJAX--- XML文件

AJAX 可用于同 XML文件进行交互式通信AJAX XML 实例下面的例子演示网页如何通过 AJAX 从 XML 文件读取信息：当用户点击“获取 CD 信息”按钮时，执行 loadDoc() 函数。loadDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并向服务器发送请求。当服务器响应就绪后，构建 HTML 表格，从 XML 文件提取节点（因素），最后使用由 XML 数据填充的 HTML 表格对元素“demo”进行更新：<!DOCTYP.
复制链接

扫一扫