javascript - JQuery ajax 加载 XML，不适用于 IE 或 Edge

Question

这是我目前拥有的 xml:

<?xml version="1.0" standalone="yes"?>
<lang>
    <item code="g">ICN<br />HKG</item>
</lang>

然后我使用下面的代码来提取 XML 内容:

$.get("file.xml",function(d){
   $("div").html($(d).find("item:first").html()); 
});

此代码在 Chrome 中有效，但在 IE 中无效。我想知道为什么会这样。当然，我可以将 html() 更改为 text()，这将适用于所有浏览器，但计算结果为 ICNHKG，这不是我想要的。

知道发生了什么事吗？非常感谢您的帮助。

Answer 1

关于$.get()

根据 Jquery 文档 $.get() 自动猜测内容类型并根据数据类型进行某种形式的解析，在源代码中我们可以找到如下内容:

// Data converters
// Keys separate source (or catchall "*") and destination types with a single space
converters: {

    // Convert anything to text
    "* text": String,

    // Text to html (true = no transformation)
    "text html": true,

    // Evaluate text as a json expression
    "text json": jQuery.parseJSON,

    // Parse text as xml
    "text xml": jQuery.parseXML
},

关于$.parseXML()

根据 Jquery 文档，此函数使用浏览器 native XML 解析器，对于 IE，此调用方式不同于其他浏览器，如 Jquery 源代码中所示，这意味着不仅 IE 使用其另一个XML 解析器优于所有其他浏览器，而且这是其中之一 这就是我们喜欢 IE 的原因:

if ( window.DOMParser ) { // Standard
    tmp = new window.DOMParser();
    xml = tmp.parseFromString( data, "text/xml" );
} else { // IE
    xml = new window.ActiveXObject( "Microsoft.XMLDOM" );
    xml.async = "false";
    xml.loadXML( data );
}

关于[object XMLDocument]和innerHTML

如果您尝试 alert() 一个 XML 解析文档，您将得到 [object XMLDocument] 作为返回值。对象 XMLDocument 实际上是什么？这意味着这是一种不同于常规对象的对象类型(哇，没看到那个来了)。

在现代浏览器中，这种差异实际上(几乎)不存在。然而，在 IE 中，这意味着没有 innerHTML 这样的属性。唯一存在的是某种形式的 nodeValue和常规的 .textContent，它们都破坏了 html 内容。然而，这并不意味着您的 br 标签完全不可能从 XML 中检索，只是没那么容易，因为它被解释为一个新的 XML 标签，您可以在下面的代码中看到:

$.get("/file.xml", function(d) {
    console.log(d.getElementsByTagName("item")[0].childNodes);
});

在 IE 中返回:

然而访问它并不容易；

$.get("file.xml", function(d) {
    console.log(d.getElementsByTagName("item")[0].childNodes[1].nodeValue); //returns null
    console.log(d.getElementsByTagName("item")[0].childNodes[1].nodeName); //returns br
});  

简而言之，IE XML 解析器并不真正适合 html 内容。很多很多的方法不存在，会造成很大的问题。

那我该怎么办呢？

有不同的可能方法。第一个只是指定另一种数据类型并这样处理它:

$.get("file.xml", function(d) {
    $("div").html($(d).find("item:first").html());
},"text"); //Datatype: text

另一种可能性是使用 CDATA :

XML

<?xml version="1.0" standalone="yes"?>
<lang>
    <item id="g"><![CDATA[HKG<br />ICN]]></item>
</lang>

Javascript(jquery)

$.get("file.xml", function(d) {
    $("div").html($(d).find("item:first").text());
});