JavaScript 調用 XML,是Web開發中常用的一種技術。XML(eXtensible Markup Language)是一種標記語言,用于儲存和傳輸數據。而 JavaScript 能夠直接讀取 XML 文件,并將其中的數據放入HTML頁面中。
下面舉個例子,假設我們有一個名為 "books.xml" 的 XML 文件,其中包含了一些書籍的信息,如下所示:
<library> <book> <title>JavaScript高級程序設計</title> <author>Nicholas C.Zakas</author> <year>2013</year> </book> <book> <title>JavaScript DOM編程藝術</title> <author>Jeremy Keith</author> <year>2011</year> </book> </library>
使用 JavaScript 讀取上述 XML 文件,可以通過以下代碼實現:
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var xmlDoc = this.responseXML; document.getElementById("books").innerHTML = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; } }; xhttp.open("GET", "books.xml", true); xhttp.send();
解釋一下上面的代碼,首先創建一個 XMLHttpRequest對象,并指定其回調函數。當 readyState 改變時,回調函數會被調用,如果狀態碼為200,則說明請求成功,并獲取到了響應的 XML 數據。獲取到的 XML 數據會被存儲在 xmlDoc 中,然后可以通過 getElementByTagName() 方法獲取到書籍標題,并將其放入頁面中。
如果 XML 文件中包含多個不同類型的數據,可以將其存儲在 JavaScript 對象中,以便更方便的操作。例如,有一個名為 "people.xml" 的 XML 文件,其中包含了多個人員的信息,如下所示:
<people> <person id="001"> <name>張三</name> <age>25</age> <gender>男</gender> </person> <person id="002"> <name>李四</name> <age>30</age> <gender>女</gender> </person> </people>
將上述 XML 文件存儲在 JavaScript 對象中,可以通過以下代碼實現:
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var xmlDoc = this.responseXML; var people = []; var persons = xmlDoc.getElementsByTagName("person"); for (var i = 0; i < persons.length; i++) { var person = { id: persons[i].getAttribute("id"), name: persons[i].getElementsByTagName("name")[0].childNodes[0].nodeValue, age: persons[i].getElementsByTagName("age")[0].childNodes[0].nodeValue, gender: persons[i].getElementsByTagName("gender")[0].childNodes[0].nodeValue }; people.push(person); } console.log(people); } }; xhttp.open("GET", "people.xml", true); xhttp.send();
解釋一下上面的代碼,首先創建一個 XMLHttpRequest對象,并指定其回調函數。當 readyState 改變時,回調函數會被調用,如果狀態碼為200,則說明請求成功,并獲取到了響應的 XML 數據。獲取到的 XML 數據會被存儲在 xmlDoc 中,然后通過 getElementsByTagName() 方法獲取到所有的 person 元素,并遍歷它們獲取每個人員的信息,最后將每個人員的信息存儲在一個 JavaScript 對象中,并將其存入 people 數組中。
在實際開發中,XML 格式的數據并不常用,更多的是使用 JSON 格式的數據。不過,JavaScript 讀取 JSON 格式的數據與 XML 格式的數據非常類似,只需將代碼中的 responseXML 替換為 responseText,并在代碼中使用 JSON.parse() 方法將數據轉換成 JavaScript 對象即可。
綜上所述,JavaScript 調用 XML 是 Web 開發中非常常見的技術之一。通過實現相關代碼,可以更加深入地理解該技術的具體實現過程,并將其應用于實際開發中。