使用jQuery $.ajax，“GET”方法将XML显示为仅在某些浏览器中工作的XML。

Question

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

这将在Chrome和Firefox中运行得很好，但是在Opera、Safari和IE的所有版本中都是如此。Opera是唯一在控制台中返回错误的浏览器：

默认异常: TypeError:无法将'n.innerHTML‘转换为对象。

职能：

$(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,，因为通过您的url，您没有提出跨域请求。

$(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/

Answer 2

出现此问题是因为这些浏览器不支持XML数据的innerHTML属性(调用.html()方法时的jQuery access innerHTML属性)。

以下是Opera的蜻蜓工具的截图：

​

​

解决办法有点脏，但它起作用了:您必须替换

dataType: "xml",

使用

dataType: "html",

不幸的是，它在IE8和IE9中不起作用(但是如果删除crossDomain: true，它在IE9中工作得很好)

编辑

还值得注意的是，所有page节点都应该由pages.xml文件中的一个父节点包装。