javascript - XMLHttpRequest - 解析属性 - JS

Question

首先，这完全是一个新手问题。我真的不太清楚自己在做什么。

我有一个 API，可以返回 JustGiving 的前 10 位筹款者。我可以获取要显示的 XML 信息，但它只是将所有内容全部转储出来。这是我到目前为止所拥有的 JS:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.justgiving.com/{appid}/v1/event/{eventID}/leaderboard?currency=gbp/", true);
xhr.responseJSON;
xhr.send();

xhr.onreadystatechange = processRequest;

function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.write(xhr.responseText);
    }
}

我花了几个小时寻找不同的方法来将这些信息输出到我可以在网页上操作的东西。可以包裹在 div 中的东西。

很确定我需要修改它......

document.write(xhr.responseText);

请帮助或指出我正确的方向。或者，如果我完全走错了方向，请告诉我。可能已经有一个解决方案，但由于我的知识非常有限，我可能所有搜索的措辞都是错误的。

API 的文档是 https://api.justgiving.com/docs/resources/v1/Leaderboard/GetEventLeaderboard

提前非常感谢。

Answer 1

由于您使用的是 JS，因此如果可能的话，我会避免使用 XML。

如果您在请求中包含适当的 header ，JustGiving API 还应该能够提供 JSON 响应。

类似于:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.justgiving.com/{appid}/v1/event/{eventID}/leaderboard?currency=gbp/", true);

// Add accept header to indicate you want JSON
xhr.setRequestHeader("Accept", "application/json");
xhr.send();

xhr.onreadystatechange = processRequest;

function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {

      // Parse the JSON in the response
      document.write(JSON.parse(xhr.responseText));
    }
}