我有一个.NET api端点，该端点返回匿名数据，并且客户端通过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 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();
}
如何通过按按钮或到表格在html文件中显示这些JSON对象？我应该将函数加载到这样的按钮中吗？
<button onclick="">Get Data By Normal XHR</button>
如果是这种情况，那么我应该将XHR请求的响应保存到某种数组或const或变量中并显示它们吗？还是我应该采取其他方法在HTML dom上显示XHR响应？
这是一个例子：
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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句