Javascript 为什么在发送方法之前要先加载

我是JavaScript新手，我想问一下AJAX，也就是说，为什么我们把xhr.onload放在xhr.send（）之前，因为即使我把xhr.onload放在xhr.send（）之后，所有这些都可以完美地工作。但大多数教程都会教您在发送（）之前先加载，而无需进行适当的解释。那么，我应该使用

let btn = document.querySelector('button').addEventListener('click', function(){
    let xhr = new XMLHttpRequest();

    xhr.onload=function(){
        if(this.status===200){
            let div=document.querySelector('div').innerHTML=xhr.responseText;
        }
    }
    xhr.open('GET', './mir.txt');
    xhr.send();

})

或

---

为什么呢？

使用你的第一个版本

从逻辑上讲，在浏览器缓存了响应的情况下，XHR可以立即完成，然后在响应已经加载之后尝试添加“onload”，那么什么也不会发生

事实上，即使在缓存时，我也不认为这会因为浏览器引擎的工作方式而发生，但从编码的角度来看，这似乎是可能发生的。因此，使图案在顶部具有onload消除了所有可能发生这种行为的怀疑。可能在较旧的浏览器中，当人们倾向于手动进行XHR测试时，这种事情实际上是一种危险

---

我知道，在同步加载请求的场景中，这很重要，因为在发送过程中，线程（以及整个窗口）将被阻塞，直到发送完成。

使用第一个版本

从逻辑上讲，在浏览器缓存了响应的情况下，XHR可以立即完成，然后在响应已经加载之后尝试添加“onload”，那么什么也不会发生

事实上，即使在缓存时，我也不认为这会因为浏览器引擎的工作方式而发生，但从编码的角度来看，这似乎是可能发生的。因此，使图案在顶部具有onload消除了所有可能发生这种行为的怀疑。可能在较旧的浏览器中，当人们倾向于手动进行XHR测试时，这种事情实际上是一种危险

---

我知道，在同步加载请求的场景中，这很重要，因为在发送过程中，线程（以及整个窗口）将被阻止，直到发送完成。

Onload是元素中最常用的方法，用于在网站完全加载（包括脚本文件、图像、CSS文件等）后执行脚本因此，这是一种很好的方法，让我们加载所有依赖项，然后进行API调用或Ajax调用来更新DOM

Onload是元素中最常用的一种方法，用于在网站完全加载（包括脚本文件、图像、CSS文件等）后执行脚本，因此这是一种很好的方法，让我们在进行API调用或Ajax调用以更新DOM之后加载所有依赖项

您不必在send（）之前使用onload（），您的第一个和第二个示例已经说明了这一点

onload（）是XHR对象的事件（XHR的load事件的属性），因此在XHR执行期间，当特定事件满足时，它将自动执行。XMLHttpRequest事务成功完成时调用的函数。因此，使用onload（）属性，您只需定义/告知在满足加载事件时需要执行的操作。如果你不需要它，你不需要定义

send（）是XHR的方法，而不是事件。所以如果你想要的话，你需要给它打电话。有关同步和异步调用的更多行为，请参阅参考链接

参考：

您不必在send（）之前使用onload（），您的第一个和第二个示例已经说明了这一点

onload（）是XHR对象的事件（XHR的load事件的属性），因此在XHR执行期间，当特定事件满足时，它将自动执行。XMLHttpRequest事务成功完成时调用的函数。因此，使用onload（）属性，您只需定义/告知在满足加载事件时需要执行的操作。如果你不需要它，你不需要定义

send（）是XHR的方法，而不是事件。所以如果你想要的话，你需要给它打电话。有关同步和异步调用的更多行为，请参阅参考链接

参考：

let btn = document.querySelector('button').addEventListener('click', function(){
    let xhr = new XMLHttpRequest();
    xhr.open('GET', './mir.txt');
    xhr.send();
 xhr.onload=function(){
        if(this.status===200){
            let div=document.querySelector('div').innerHTML=xhr.responseText;
        }
    }

})