正在将 XHR 响应数据加载到索引 HTML 页面

Question

我有一个 .NET api 端点，returns 匿名数据和客户端通过 Promise 接收这些数据，如下所示：

function getDataByPromise(method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.send();
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText,
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText,
      });
    };
  });
}

或者像这样通过回调：

function getDataByCallback(method, url, done) {
  let xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.send();
  xhr.onload = function () {
    done(null, xhr.response);
  };
  xhr.onerror = function () {
    done(xhr.response);
  };

或通过Async/Await

async function getDataByAsyncAwait() {
  try {
    console.log("By Async Await");
    await getDataByPromise(method, url);
  } catch (error) {
    console.log(error);
  }
}

或者像这样通过普通的 XHR：

function getDataByXHR(method, url) {
  let xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.onload = function () {
    console.log("By XHR: ");
    console.log(xhr.response);
    let gameSettings = JSON.parse(xhr.response);
    this.data = gameSettings;
    waitAsyncAwait(this.data);
    waitPromise(this.data);
  };
  xhr.onerror = function () {
    console.error("An error occur getting the XMLHttpRequest");
  };
  xhr.send();
}

如何通过按下按钮或 table 在 html 文件中显示这些 JSON 对象？我应该像这样将功能加载到按钮中吗？

<button onclick="">Get Data By Normal XHR</button>

如果是这种情况，那么我应该将 XHR 请求的响应保存到某种数组或常量或变量中并显示它们吗？或者我应该采取任何其他方法在 HTML dom?

上显示 XHR 响应

Answer 1

这里有一个例子：

var url = "https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19";

var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
    document.getElementById('output').innerHTML = JSON.parse(xmlHttp.responseText).total;
}
xmlHttp.open("GET", url, true);
xmlHttp.send();

Html:

<div id="container">
  <div id="output">NO DATA</div>
</div>

正在将 XHR 响应数据加载到索引 HTML 页面

Loading XHR response data to index HTML page

html

javascript

xmlhttprequest

asp.net-web-api

ecmascript-6