[英]XMLHttpRequest open function's async event listener
我正在使用下面的代码对API执行POST请求并从服务器获取一些数据
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/json; charset=UTF8");
request.setRequestHeader("X-Accept", "application/json");
request.send(JSON.stringify(data));
我的问题是如何决定我是应该异步还是同步。 实际上我的异步问题是我不知道如何应用一个可以监听XHR完成情况的eventListener。
如果我使用异步调用,我的Web应用程序提取数据太晚,应用程序加载以前的缓存数据,但如果我使用同步调用,则需要大约一秒钟来获取和显示数据,我不知道如何显示“加载”图标,因为我不确定在哪里附加eventListener。
有人能说清楚如何正确使用XHR吗?
我想提一下,这是我第一次尝试使用XHR通过API从服务器获取数据。
坚持使用异步 ,因为它不会冻结浏览器并允许更优雅的方式来处理响应。 至于XHR的完成,请使用:
request.open("POST", url, true);
request.onreadystatechange = function () {
if (request.readyState === 4) {
// XHR state is DONE
if (request.status == 200) {
// HTTP 200 status code (success)
// HIDE YOUR "LOADING" SPINNER
// use request.responseText to get the response's content
}
}
};
request.setRequestHeader("Content-type", "application/json; charset=UTF8");
request.setRequestHeader("X-Accept", "application/json");
request.send(JSON.stringify(data));
// SHOW YOUR "LOADING" SPINNER
一如既往,阅读一些文档是个好主意: https : //developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest
“我的Web应用程序提取数据的时间太晚,应用程序加载了以前的缓存数据” - 我不确定你的意思是什么,但是如果你更详细地解释上面的代码是如何被调用/使用的,我就是确定它可以重新组织,以便正确地协同工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.