非同步處理XML非同步資料——以原生的JavaScript與jQuery中的$.ajax()為例
阿新 • • 發佈：2018-11-13
此文件解決以下問題：
一、原生的JavaScript從伺服器端輸出XML格式資料
1.XMLHttpRequest物件的運用
XMLHttpRequest物件的open()方法
XMLHttpRequest物件的send()方法
XMLHttpRequest物件的onreadystatechange事件運用
XMLHttpRequest物件的readyState屬性
XMLHttpRequest物件的status屬性
XMLHttpRequest物件的responseXML屬性
2.document物件的運用
createTextNode()方法
getElementsByTagName() 方法
3.元素物件的運用
appendChild() 方法
childNodes 屬性
nodeValue 屬性
4.Table物件的運用
insertRow() 方法
5.tr物件的運用
insertCell()方法
二、jQuery的$.ajax()從伺服器端輸出XML格式資料
7.$.ajax()方法
8.find()方法
9.each()方法
10.append()方法
一、原生的JavaScript從伺服器端輸出XML格式資料
1）index01.html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="
2）books.xml:
<?xml version="1.0" encoding="utf-8"?> <bookstore> <book category="CHILDREN"> <title>Harry Potter1</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="WEB"> <title>Learning XML1</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore>
3)執行結果：
二、jQuery的$.ajax()從伺服器端輸出XML格式資料
1）index02.html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// function addTableRow(title, author, year) {
// var oTable = document.getElementById("member");
// //insertRow() 方法用於在表格中的指定位置插入一個新行
// var oTr = oTable.insertRow(oTable.rows.length);
// var aText = new Array();
// //createTextNode() 方法 建立一個文字節點:
// aText[0] = document.createTextNode(title);
// aText[1] = document.createTextNode(author);
// aText[2] = document.createTextNode(year);
//
// for(var i = 0; i < aText.length; i++) {
// //insertCell() 方法用於在 HTML 表的一行的指定位置插入一個空的 <td> 元素。
// var oTd = oTr.insertCell(i);
// //appendChild() 方法可向節點的子節點列表的末尾新增新的子節點。
// oTd.appendChild(aText[i]);
// }
// }
function getXML(addressXML) {
$.ajax({
type: "GET",
url: addressXML,
dataType: "xml",
success: function(myXML) {
//myXML 相當於xhtp.responseXML
$(myXML).find("book").each(function() {
Node1 = $(this).find("title")[0].childNodes[0].nodeValue;
Node2 = $(this).find("author")[0].childNodes[0].nodeValue;
Node3 = $(this).find("year")[0].childNodes[0].nodeValue;
//addTableRow(Node1, Node2, Node3);
$("#member").append("<tr><td>"+Node1+"</td><td>"+Node2+"</td><td>"+Node3+"</td></tr>");
})
}
})
}
</script>
</head>
<body>
<div id="myDiv"></div>
<br />
<input type="text" name="txtin" id="txtin" value="" />
<input type="text" name="txtage" id="txtage" value="" />
<input type="button" name="btn" id="btn" value="提交" onclick="getXML('books.xml')" />
<table border="" cellspacing="" cellpadding="" id="member">
<tr>
<th>title</th>
<th>author</th>
<th>year</th>
</tr>
</table>
</body>
</html>
2）books.xml:
<?xml version="1.0" encoding="utf-8"?> <bookstore> <book category="CHILDREN"> <title>Harry Potter1</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="WEB"> <title>Learning XML1</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore>
3)執行結果：
正文結束！~~