使用 AJAX 解析 XML

Question

解析xml使用ajax时遇到问题。似乎看不出这里出了什么问题，因为我已经能够在我的代码中使用 ajaxelsewhere 检索 API。任何帮助将不胜感激。

html:

<div id="technology" class="tab-pane fade">
  <h3>TECH</h3>
  <p id="tech_news"></p>
</div>

jquery:

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "http://feeds.bbci.co.uk/news/technology/rss.xml",
    dataType: "xml",
    cache: false,
    success: parseXml
  });
});

function parseXml(xml) {
  $(xml).find("item").each(function() {
    $("#tech_news").append($(this).find("title").text() + "<p>");
    $("#tech_news").append($(this).find("description").text() + "<p>");
  });
}

Answer 1

实际上你有一个corsissue。我们收到此错误消息：

加载失败 http://feeds.bbci.co.uk/news/technology/rss.xml?_=1511718738881: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

但是您可以使用此服务https://crossorigin.me/ 允许通过ajax 进行跨源请求。

类似这样的：

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "https://crossorigin.me/http://feeds.bbci.co.uk/news/technology/rss.xml",
    dataType: "xml",
    cache: false,
    success: parseXml
  });
});

function parseXml(xml) {
  $(xml).find("item").each(function() {
    $("#tech_news").append($(this).find("title").text() + "<p>");
    $("#tech_news").append($(this).find("description").text() + "<p>");
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="technology" class="tab-pane fade">
  <h3>TECH</h3>
  <p id="tech_news"></p>
</div>

即便如此，您应该知道它是一项外部服务，可能无法 24/7 全天候运行。