3.Ajax的数据格式:XML
2019-08-27 本文已影响0人
Ringo_
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method, url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4) {
if(request.status == 200 || request.status == 304) {
//1.结果为xml格式 所以需要使用responseXML来获取
var result = request.responseXML;
//2.结果不能直接使用，必须先创建对应的节点 再把节点加入到showdetails中
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var age = result.getElementsByTagName("age")[0].firstChild.nodeValue;
// alert(name);
// alert(age);
var hnode = document.createElement("h2");
hnode.appendChild(document.createTextNode(name));
var pnode = document.createElement("p");
pnode.appendChild(document.createTextNode(age));
var details = document.getElementById("showDetails");
details.appendChild(hnode);
details.appendChild(pnode);
}
}
}
return false;
}
}
</script>
</head>
<body>
<a href="content/people2.xml">Jerry</a>
<div id="showDetails"></div>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<details>
<name>Jerry</name>
<age>20</age>
</details>
优点：
-XML是一种通用的数据格式
-不必把数据强加到已定义好的格式中，而是为数据自定义合适的标记
-利用DOM可以完全掌控文档
缺点：
-如果文档完全来自服务器，就必须得保证文档含有正确的首部信息，若文档类型不正确，那么responseXML的值将为空
-但浏览器接收到长的XML文件后，DOM解析会很复杂
