JavaScript使用XMLHttpRequest调用URL后alert弹窗重复弹出两次问题求解

• XMLHttpRequest的onreadystatechange事件会在请求的readyState状态值每次变化时触发，原生XMLHttpRequest的readyState共有5个取值：
  • 0：请求未初始化
  • 1：服务器连接已建立
  • 2：请求已接收
  • 3：请求处理中
  • 4：请求已完成，且响应已就绪
• 当readyState为2和4时，Http.responseText都已经有返回内容，你的判断条件只校验了Http.responseText存在，所以这两个状态都会触发alert，就出现了两次弹窗的情况。

你需要在判断中额外校验两个条件：readyState === 4（请求完全结束）、status === 200（接口返回正常），修改后的代码如下：

<script type="text/javascript">
function call() {
    const Http = new XMLHttpRequest();
    const url='https://url_to_get_the_response';
    Http.open("GET", url);
    Http.send();
    Http.onreadystatechange = (e) => {
        // 新增状态校验
        if (Http.readyState === 4 && Http.status === 200 && Http.responseText) {
            alert(Http.responseText);
        }
    }
}
</script>

如果你不需要兼容特别旧的浏览器，也可以直接用onload事件替代onreadystatechange，onload只会在请求完全完成时触发一次，不会出现重复触发的问题，代码示例：

Http.onload = (e) => {
    if (Http.status === 200 && Http.responseText) {
        alert(Http.responseText);
    }
}

内容的提问来源于stack exchange，提问作者omega1