javascript - JQuery ajax to load XML, not working in IE or Edge - Stack Overflow

admin管理员组

文章数量:1426021

This is the xml that I currently have:

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

Then I use the following code to extract XML content:

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

This code works in Chrome, but not in IE. I wonder why that is the case. Of course, I could change html() to text(), which would be working in all browsers, yet that will evaluate to ICNHKG, which is not what I want.

Any ideas what is going on? Much help is appreciated.

This is the xml that I currently have:

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

Then I use the following code to extract XML content:

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

This code works in Chrome, but not in IE. I wonder why that is the case. Of course, I could change html() to text(), which would be working in all browsers, yet that will evaluate to ICNHKG, which is not what I want.

Any ideas what is going on? Much help is appreciated.

• javascript
• jquery
• html
• ajax
• xml

Share Improve this question Follow edited Apr 12, 2017 at 4:30 asked May 24, 2016 at 16:20 user6360214user6360214 2

• Which version of IE are you using? – JohannesB Commented May 24, 2016 at 18:03
• Microsoft Edge, the newest version – user6360214 Commented May 24, 2016 at 18:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

About $.get()

According to the Jquery documentation $.get() automatically guesses the content type and in accordance with the datatype it does some form of parsing, in the source code we can find this as:

// 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
},

About $.parseXML()

According to the Jquery documentation, this function uses the browsers native XML-parser, for IE this is called in another way than for the other browsers, as seen here in the Jquery source code, meaning not only that IE uses its another XML-parser than all other browsers, but also that this is one of these this is why we love IE moments:

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 );
}

About [object XMLDocument] and innerHTML

If you would try to alert() a XML parsed document you would get [object XMLDocument] as a return. What is an object XMLDocument actually? This means that this is a type of object different from a regular object (wow, didn't see that one ing).

In modern browsers this difference is actually (almost) not present. In IE however, this means that there is no such property as innerHTML. The only thing existing is some form of nodeValue and the regular .textContent, which both destroy the html content. This does however not mean that your br tag is totally impossible to retrieve from the XML, it just isn't that easy, as it is interpreted as a new XML-tag, as you can see with the code below:

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

Returns this in IE:

Accessing it however is not really easy;

$.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
});  

In short, the IE XML-parser is not really suitable for html contents. Many, many methods do not exist, which will cause major problems.

Then what should I do?

There are different possible approaches. The first one would just be to specify another datatype and handle it as such:

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

Another possibility would be to use 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());
});

本文标签： javascriptJQuery ajax to load XMLnot working in IE or EdgeStack Overflow