使用AJAX解析XML

Question

Having trouble parsig xmlusing ajax. Can't seem to see what's going wrong here, as I have been able to retrieve API's using ajaxelsewhere in my code. Any help would be greatly appreciated.

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

Actually you have a corsissue. We have this error message:

Failed to load 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.

However you can use this service https://crossorigin.me/ to allow cross origins requests through ajax.

Something like this:

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

Even so, you should know that it is an external service that may not be operational 24/7.

</div>