Ajax讀取XML資料
阿新 • • 發佈:2019-01-12
-
最早的Ajax推出的時候實際上只給出了兩類資料
- 文字資料:最初只是虛妄簡單的返回一些處理標記(後來功能得到了擴充)
- XML資料:是為了攜帶更多的資料返回,
-
假設有如下的XML資料
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<shop>
<book id="1">
<name>美好的未來</name>
<year>2</year>
<price> 56100</price>
</book>
<book id="2">
<name>新的世界,新的你</name>
<year>3</year>
<price>56.6</price>
</book>
<book id="3">
<name>java入門到跑路</name>
<year>111</year>
<price>100</price>
</book>
</shop >
- 希望可以將這些XML資料交個前臺頁面進行輸出,xml本身結構只適合資料傳輸使用,不適合資料顯示使用,所以為了可以讓其進行資料的顯示,需要對接收到的xml資料執行DOM處理.
- 編寫XML讀取操作
<script type="text/javascript">
//儲存XMLHttpRequest物件的變數
var xmlHttpRequest;
window.onload=function(){
//為提交按鈕繫結函式
document.getElementById("read").addEventListener ("click",function(){
//得到使用者輸入的提交內容
read();
},false)
}
//建立XMLHttpRequest物件的方法
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
//判斷是否為IE6的瀏覽器
}else if(ActiveXObject){
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
}
}
//提交請求方法
function read(){
createXMLHttpRequest();
//使用XMLHttpRequest物件設定請求型別
//設定請求引數接收位置
xmlHttpRequest.open("post","book.xml");
//傳送請求
xmlHttpRequest.send(null);
//針對伺服器請求,做出迴應處理
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
//取得XML檔案的DOM物件
var domVar = xmlHttpRequest.responseXML;
var books = domVar.getElementsByTagName("book");
for(var x = 0; x < books.length;x++){
var id = books[x].getAttribute("id");
var name = books[x].getElementsByTagName("name")[0].firstChild.nodeValue;
var year = books[x].getElementsByTagName("year")[0].firstChild.nodeValue;
var price = books[x].getElementsByTagName("price")[0].firstChild.nodeValue;
//在表格中新增一行資料
addRow(id,name,year,price);
}
}
}
}
function addRow(id,name,year,price){
//得到表格的元素
var tableEle = document.getElementById("readTable");
//建立一行新的資料行
var newtr = document.createElement("tr");
//建立三個td元素
var idtd = document.createElement("td");
idtd.appendChild(document.createTextNode(id));
var nametd = document.createElement("td");
nametd.appendChild(document.createTextNode(name));
var yeartd = document.createElement("td");
yeartd.appendChild(document.createTextNode(year));
var pricetd = document.createElement("td");
pricetd.appendChild(document.createTextNode(price));
newtr.appendChild(idtd);
newtr.appendChild(nametd);
newtr.appendChild(yeartd);
newtr.appendChild(pricetd);
tableEle.append(newtr);
}
</script>
- 頁面效果
-
如果要讀取的是XML資料,則可以使用responseText()和responseXML()兩種方法.
- responseText()方法返回的是文字資料
- responseXML()方法返回的是節點資料
-
通過以上的程式碼可以發現,使用Ajax獲取得到"book.xml"檔案中的資料之後,再將資料交個read()函式處理,動態生成頁面.
-
如果Ajax從伺服器端讀取xml檔案的資料後,動態生成頁面的任務,就不需要伺服器端的程式完成,而是交由客戶端完成,這樣可以大大提高程式碼整體的效率,做到客戶端和伺服器端的程式碼分離.