javascript加載XML字符串或文件

時間 2020-09-20

標籤 javascript 加載 xml 字符串文件欄目 JavaScript 简体版

原文原文鏈接

1. 加載XML文件

方法1：ajax方式。代碼以下：html

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("GET", "data.xml", false);
xhr.send(null);
var xmlDoc = xhr.responseXML;
console.log(xmlDoc);

（關於XMLHttpRequest對象的用法，請參加 http://www.w3school.com.cn/xmldom/dom_http.asp）node

注意，代碼第二行的「false」，表示不用異步。若是這裏改成「true」，那麼xmlDoc將獲得null。由於js的異步操做，不會等待文件加載完，就直接執行下面的語句了。因此，咱們這裏必須設置爲「false」，表示必須等待文件加載完，再執行如下操做，這樣才能獲得正確的xmlDoc。ajax

這種方式兼容全部高級瀏覽器，建議採用這種方式加載。跨域

方法2：IE的方式。代碼以下：瀏覽器

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.load("note.xml");

console.log(xmlDoc);

經過IE特有的ActiveXObject("Microsoft.XMLDOM")對象的load()方法加載文件。安全

注意，這裏仍是設置了異步是false，緣由和方法1的同樣。網絡

方法3：Firefox的方式，代碼以下：dom

var xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.async = "false";
xmlDoc.load("note.xml");
console.log(xmlDoc);

關於跨域加載：安全起見，現代瀏覽器不能跨域訪問，即只能加載本機上的xml文件。異步

2. 加載XML字符串

先看代碼：async

 1       function LoadXmlText() {
 2 
 3             //拼接XML字符串
 4             var txt = '';
 5             txt = txt + "<note>";
 6             txt = txt + "<to>George</to>";
 7             txt = txt + "<from>John</from>";
 8             txt = txt + "<heading>Reminder</heading>";
 9             txt = txt + "<body>Don't forget the meeting!</body>";
10             txt = txt + "</note>";
11 
12             
13             if (window.DOMParser) {
14                 //非IE瀏覽器
15                 xmlDoc = (new DOMParser()).parseFromString(txt, "text/xml");
16             } else {
17                 //IE瀏覽器
18                 xmlDoc = new ActiveXObject("Microsoft.XMLDOM");         
19                 // 或者：xmlDoc = new ActiveXObject("MSXML2.DOMDocument");      
20 
21                 xmlDoc.async = "false";        //不啓用異步，保證加載文件成功以前不會進行下面操做
22                 xmlDoc.loadXML(txt);
23             }
24 
25             console.log(xmlDoc);
26         }

若是瀏覽器支持window.DOMParser對象，則直接用它的parseFromString()方法加載xml字符串。

IE瀏覽器不支持window.DOMParser，則用loadXML()加載。

代碼中註釋都寫的很親你清楚。

出處：https://www.cnblogs.com/wangfupeng1988/p/3709924.html

============================================================================

我根據上面的說明，也寫個符合本身是一的吧

    // 加載xml文檔
    function loadXmlFile(xmlFile) {
        var xmlDoc = null;
        if (window.ActiveXObject) {
            xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
            xmlDoc.async = false;
            xmlDoc.load(xmlFile);
        }
        else if (document.implementation && document.implementation.createDocument) {
            xmlDoc = document.implementation.createDocument('', 'doc', null);
            xmlDoc.async = false;
            xmlDoc.preserveWhiteSpace = true;
            xmlDoc.load(xmlFile);
        }
        else if (window.XMLHttpRequest) {//支持出網絡獲取
            var xmlhttp = new window.XMLHttpRequest();
            xmlhttp.open("GET", "#", false);
            xmlhttp.send(null);
            xmlDoc = xmlhttp.responseXML.documentElement;
        }
        return xmlDoc;
    }
    //加載xml字符串
    function loadXmlStr(xmlStr) {
        var xmlDoc = null;
        if (window.DOMParser) {
            //非IE瀏覽器
            xmlDoc = (new DOMParser()).parseFromString(xmlStr, "text/xml");
        }
        else {
            //IE瀏覽器
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            // 或者：xmlDoc = new ActiveXObject("MSXML2.DOMDocument");
            xmlDoc.async = "false";        //不啓用異步，保證加載文件成功以前不會進行下面操做
            xmlDoc.loadXML(xmlStr);
        }
        return xmlDoc;
    }

參考：https://www.jb51.net/article/76019.htm

========================================================

既然作到了這裏，就不得不說的是操做xml，其實就是dom的操做，那麼就可能會用到nodeName 、nodeType、 nodeValue 這些屬性

NodeTypes

文檔、元素、屬性以及 HTML 或 XML 文檔的其餘方面擁有不一樣的節點類型。

存在 12 種不一樣的節點類型，其中可能會有不一樣節點類型的子節點：

節點類型		描述	子節點
1	Element	表明元素	Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2	Attr	表明屬性	Text, EntityReference
3	Text	表明元素或屬性中的文本內容。	None
4	CDATASection	表明文檔中的 CDATA 部分（不會由解析器解析的文本）。	None
5	EntityReference	表明實體引用。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6	Entity	表明實體。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7	ProcessingInstruction	表明處理指令。	None
8	Comment	表明註釋。	None
9	Document	表明整個文檔（DOM 樹的根節點）。	Element, ProcessingInstruction, Comment, DocumentType
10	DocumentType	向爲文檔定義的實體提供接口	None
11	DocumentFragment	表明輕量級的 Document 對象，可以容納文檔的某個部分	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12	Notation	表明 DTD 中聲明的符號。	None

節點類型 - 返回值

對於每種節點類型，nodeName 和 nodeValue 屬性的返回值：

節點類型		nodeName 返回	nodeValue 返回
1	Element	元素名	null
2	Attr	屬性名稱	屬性值
3	Text	#text	節點的內容
4	CDATASection	#cdata-section	節點的內容
5	EntityReference	實體引用名稱	null
6	Entity	實體名稱	null
7	ProcessingInstruction	target	節點的內容
8	Comment	#comment	註釋文本
9	Document	#document	null
10	DocumentType	文檔類型名稱	null
11	DocumentFragment	#document 片斷	null
12	Notation	符號名稱	null

NodeTypes - Named Constants

NodeType	Named Constant
1	ELEMENT_NODE
2	ATTRIBUTE_NODE
3	TEXT_NODE
4	CDATA_SECTION_NODE
5	ENTITY_REFERENCE_NODE
6	ENTITY_NODE
7	PROCESSING_INSTRUCTION_NODE
8	COMMENT_NODE
9	DOCUMENT_NODE
10	DOCUMENT_TYPE_NODE
11	DOCUMENT_FRAGMENT_NODE
12	NOTATION_NODE