XMLHttpRequest學習筆記
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<button id="btn">請求數據</button>
<div id="myDiv">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>number</th>
<th>title</th>
<th>author</th>
<th>year</th>
<th>price</th>
</tr>
</thead>
<tbody id="mytbody"></tbody>
</table>
<p>getAllResponseHeaders()</p>
<p id="pp"></p>
<p>getResponseHeader("Last-Modified")</p>
<p id="ppp"></p>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function loadXHR() {
var XHR;
if (window.XMLHttpRequest) {
XHR = new XMLHttpRequest();
} else {
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
XHR.open("GET", "./text/books.xml", true);
//經過 XML HTTP 加載 XML 文件
XHR.send();
XHR.onreadystatechange = function() {
if (XHR.readyState == 4 && XHR.status == 200) {
// 4 = "loaded" 200 = 「OK」
var xmlDoc = XHR.responseXML;
var txt = "<tr>";
var x = xmlDoc.getElementsByTagName("book");
for (var i = 0; i < x.length; i++) {
//把 XML 文件顯示爲 HTML 表格
txt += "<td>" + i + "</td>";
xx = x[i].getElementsByTagName("title");
txt += "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
xx = x[i].getElementsByTagName("author");
txt += "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
xx = x[i].getElementsByTagName("year");
txt += "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
xx = x[i].getElementsByTagName("price");
txt += "<td>" + xx[0].childNodes[0].nodeValue
+ "</td></tr>";
}
document.getElementById("mytbody").innerHTML = txt;
//經過 XML HTTP 進行一次 HEAD 請求
document.getElementById("pp").innerHTML = XHR.getAllResponseHeaders();
//經過 XML HTTP 進行一次指定的 HEAD 請求
document.getElementById("ppp").innerHTML = XHR.getResponseHeader("Last-Modified");
}
}
}
document.getElementById("btn").onclick = function() {
loadXHR();
}
</script>
</body>
</html>
//books.xml
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>
相關文章
- 1. XMLHttpRequest 學習筆記（一）
- 2. JavaScript權威設計--跨域,XMLHttpRequest(簡要學習筆記十九)
- 3. Ajax學習筆記——XMLHttpRequest對象readyState屬性
- 4. 學習筆記 之--AJAX核心對象 XMLHttpRequest
- 5. 原生XMLHttpRequest學習日誌
- 6. JS XMLHttpRequest 學習總結
- 7. 「學習筆記」學習筆記合集
- 8. 【學習筆記】FastCGI學習筆記
- 9. [學習筆記]CentOS 學習筆記01
- 10. 【Java 學習筆記】 Hadoop學習筆記
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章