jquery - 使用 jQuery $.ajax, 'GET' 方法将 XML 显示为 HTML - 仅适用于某些浏览器

Question

我正在尝试使用 jQuery $.ajax 'GET' 方法将 XML 文件中的数据作为 HTML 元素提取到网站中，但它目前仅适用于使用本地副本的两个浏览器jquery-1.9.1.min。

这在 Chrome 和 Firefox 中工作得很好，但在 Opera、Safari 和所有版本的 IE 中却没有任何效果。 Opera 是唯一在控制台中返回错误的浏览器:

Uncaught exception: TypeError: Cannot convert 'n.innerHTML' to object.

功能:

$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "content/pages.xml",
    crossDomain: true,
    dataType: "xml",
    success: function parseXml(xml){
      // find all page divs and load each into the main content area
      $(xml).find("page").each(function(){
        $("#contentArea").append($(this).find("mainPage").html());
      });
    }
  });
});

XML:

 <page>
    <mainPage>
        <div id="homePage" class="mainPage"><!-- columns incomplete -->
            <div id="homePage_txtpart_010" class="txtpart">
                <p id="homePage_txt_010">For those who are tired of spending tens of thousands of dollars to advertise on Live-Stream programming, only to receive minimal or ineffective exposure, StreamYourAd.com offers 
                a long overdue alternative to fruitless pre-roll ads. Take the guess work out of whether or not your ads reach your audience, and start paying less to attain more.</p>
                    <br />
                <p id="homePage_txt_020">When you partner with us, your ads...</p>
                <ul id="homePage_lst_010">
                    <li id="homePage_itm_010">Last longer</li>
                    <li id="homePage_itm_020">Cost less (less than a penny per view)</li>
                    <li id="homePage_itm_030">Can't be blocked, skipped or ignored</li>
                    <li id="homePage_itm_040">Reach a targeted, captivated audience</li>
                    <li id="homePage_itm_050">Reach mobile viewers</li>
                </ul>
            </div>
            <div id="homePageColumns">
                <div id="homePageColumn_010" class="homePageCol">
                    <h2 class="titles">Digital Branding</h2>
                    <p class="homePageColumns_txt">Embedded advertisements, logo blocks and digital PR.</p>
                </div>
                <div id="homePageColumn_020" class="homePageCol">
                    <h2 class="titles">Social Solutions</h2>
                    <p class="homePageColumns_txt">Facebook development, Twitter development, surveys and fan feedback.</p>
                </div>
                <div id="homePageColumn_030" class="homePageCol">
                    <h2 class="titles">Promotions and Endorsements</h2>
                    <p class="homePageColumns_txt">Product placement, streamer shout-outs, incentives and giveaways.</p>
                </div>
            </div>
        </div>
    </mainPage>
</page>

<page>
    <mainPage>
        <div id="aboutPage" class="mainPage">
            <div id="aboutPage_txtpart_010" class="txtpart">
                <p id="aboutPage_txt_010">StreamYourAd.com was created as an alternative to the stale forms of advertising currently offered in the Live-Streaming marketplace. Our goal is to get your message out to the masses.</p>
                <p id="aboutPage_txt_020">Commercials are often ignored, skipped and even blocked. However, our process directly connects streamers with advertisers and ensures delivery of your message to live-streaming audiences worldwide.</p>
                <p id="aboutPage_txt_030">Our ability to work with budgets big and small, create customizable service packages and employ streamers as advertisers makes working with StreamYourAd.com a partnership worth exploring.</p>
                <p id="aboutPage_txt_040">Check out our list of services and contact us to see how we will help you reach your target audience every time.</p>
            </div>
        </div>
    </mainPage>
</page>

<page>
    <mainPage>
        <div id="servicesPage" class="mainPage"><!-- includes four sub-pages; incomplete -->
            <div id="servicesPage_txtpart_010" class="txtpart">
                <p id="servicesPage_txt_010">services...</p>
            </div>
        </div>
    </mainPage>
</page>

<page>
    <mainPage>
        <div id="contactPage" class="mainPage"><!-- needs forms and more contextual info -->
            <div id="contactPage_txtpart_010" class="txtpart">
                <p id="contactPage_txt_010">If you are an advertiser that is interested in having our streamers promote your business, a streamer interested in joining our Stream Team, or for any other inquiries you may have, please contact us and leave us your comments.</p>
            </div>
        </div>
    </mainPage>
</page>

HTML:

            <div id="contentArea">
                <!-- populated by xml data on document ready -->
            </div>

我错过了什么或者我的语法不对吗？我通常不会以这种方式使用 jQuery 和 XML，所以不要害怕破坏我的代码:)

Answer 1

我建议在 xml 中将 html 作为 cdata 并使用 .text()。
同时删除 crossDomain: true, 因为通过您的网址您不会发出跨域请求。

$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "content/pages.xml",
    dataType: "xml",
    success: function parseXml(xml){
      // find all page divs and load each into the main content area
      $(xml).find("page").each(function(){
        $("#contentArea").append($(this).find("mainPage").text());
      });
    }
  });
});

<page>
    <mainPage><![CDATA[
        <div id="aboutPage" class="mainPage">
            <div id="aboutPage_txtpart_010" class="txtpart">
                <p id="aboutPage_txt_010">StreamYourAd.com was created as an alternative to the stale forms of advertising currently offered in the Live-Streaming marketplace. Our goal is to get your message out to the masses.</p>
                <p id="aboutPage_txt_020">Commercials are often ignored, skipped and even blocked. However, our process directly connects streamers with advertisers and ensures delivery of your message to live-streaming audiences worldwide.</p>
                <p id="aboutPage_txt_030">Our ability to work with budgets big and small, create customizable service packages and employ streamers as advertisers makes working with StreamYourAd.com a partnership worth exploring.</p>
                <p id="aboutPage_txt_040">Check out our list of services and contact us to see how we will help you reach your target audience every time.</p>
            </div>
        </div>]]>
    </mainPage>
</page>

http://jsfiddle.net/mowglisanu/2mT8E/