Javascript XMLHttpRequest开放函数'；异步事件侦听器

我使用下面的代码对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));

我的问题是如何决定是异步还是同步。实际上，我对async的问题是，我不确定如何应用eventListener来监听XHR的完成

如果我使用异步调用，我的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

和往常一样，阅读一些关于它的文档是个好主意：

---

“我的web应用程序获取数据太晚，并且应用程序加载了以前的缓存数据”-我不确定您的确切意思，但如果您详细解释如何调用/使用上述代码，我相信可以对其进行重新组织以使其正常工作。

感谢您的快速回答！“我不确定你到底是什么意思，但如果你进一步解释如何调用/使用上面的代码，我相信它可以重新组织以正常工作。”我发现了问题所在，我没有正确地传递数据。没问题！听起来不错，如果您需要更多帮助或有更多问题，请告诉我！