加载与解析XML文件、字符串是JS操作XML的重要部分，本文将为您详细讲解如何完成此操作。
加载XML文件
使用XMLHttpRequest对象，可以向服务器请求XML文件并返回。具体步骤如下：
- 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
- 打开XML文件
xhr.open("GET", "example.xml", true);
第一个参数是请求的方法。在这个例子中，我们使用GET方法来获取XML文件。
第二个参数是请求的URL路径。
第三个参数表示请求是否是异步的。在这个例子中，异步处理是true。
- 发送请求
xhr.send();
- 处理返回结果
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var xmlDoc = this.responseXML; //返回的XML文件为responseXML对象
}
}
通过调用responseXML属性，可以获取返回的XML文件。
解析XML文件字符串
如果你已经有了XML的字符串形式，那么可以使用DOMParser对象来将字符串解析为XML文件。具体步骤如下：
- 创建DOMParser对象
var parser = new DOMParser();
- 解析XML字符串
var xmlString = "<bookstore><book><title>Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year></book></bookstore>";
var xmlDoc = parser.parseFromString(xmlString, "text/xml");
第一个参数是XML字符串。
第二个参数是要解析的内容类型。在这个例子中，我们使用"text/xml"，因为我们要解析XML字符串，所以这个参数是"text/xml"。
- 处理返回结果
var books = xmlDoc.getElementsByTagName("book");
for(var i=0;i<books.length;i++){
var title = books[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
var author = books[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
var year = books[i].getElementsByTagName("year")[0].childNodes[0].nodeValue;
console.log(title + " - " + author + " - " + year);
}
这段代码从解析的XML文件中获取所有的book元素，并循环遍历每个元素，从中提取title，author和year值。
示例说明
示例1：使用XMLHttpRequest获取XML文件
<!DOCTYPE html>
<html>
<head>
<title>加载XML文件</title>
</head>
<body>
<div id="books"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "books.xml", true);
xhr.send();
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var xmlDoc = this.responseXML;
var books = xmlDoc.getElementsByTagName("book");
var html = "";
for(var i=0;i<books.length;i++){
var title = books[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
var author = books[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
html += "<p>" + title + " - " + author + "</p>";
}
document.getElementById("books").innerHTML = html;
}
}
</script>
</body>
</html>
这个示例演示了如何使用XMLHttpRequest对象加载XML文件。请求的XML文件是"books.xml"，并从中提取title和author值。
示例2：使用DOMParser解析XML字符串
<!DOCTYPE html>
<html>
<head>
<title>解析XML字符串</title>
</head>
<body>
<div id="books"></div>
<script>
var parser = new DOMParser();
var xmlString = "<bookstore><book><title>Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year></book></bookstore>";
var xmlDoc = parser.parseFromString(xmlString, "text/xml");
var books = xmlDoc.getElementsByTagName("book");
var html = "";
for(var i=0;i<books.length;i++){
var title = books[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
var author = books[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
var year = books[i].getElementsByTagName("year")[0].childNodes[0].nodeValue;
html += "<p>" + title + " - " + author + " - " + year + "</p>";
}
document.getElementById("books").innerHTML = html;
</script>
</body>
</html>
这个示例演示了如何使用DOMParser对象将XML字符串解析为DOM对象，并从中提取title，author和year值。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS操作XML实例总结(加载与解析XML文件、字符串) - Python技术站
微信扫一扫 
支付宝扫一扫 