Question

我是JavaScript的新手，想询问有关AJAX的信息，这就是为什么我们将xhr.onload放在xhr.send（）之前，因为即使我将xhr.onload放在xhr.send（）之后也可以正常工作。但是大多数教程都教您在没有适当说明的情况下将onload放在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();

})

或

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;
        }
    }

})

为什么？

Answer 1

使用您的第一个版本。

从逻辑上讲，在浏览器已缓存响应的情况下，XHR可以立即完成，然后尝试在响应已加载后添加“ onload”，则不会发生任何事情。

实际上，即使被缓存，我也不认为是由于浏览器引擎的工作方式而发生的，但是从编码的角度来看，它似乎可能发生。因此，使模式在顶部具有onload可以消除所有怀疑会发生这种行为的怀疑。可能是在较旧的浏览器中，当人们确实倾向于手动执行XHR请求时，这种事情是真正的危险吗？

我确实知道，在您同步加载请求的情况下，这确实很重要，因为在发送期间线程将被阻塞（包括整个窗口），直到完成为止。 / p>

Answer 2

在网站完全加载（包括脚本文件，图像，CSS文件等）后，元素最常使用Onload执行脚本（因此包括脚本文件，图像，CSS文件等），因此，在创建API之后，它是一种加载所有依赖项的好方法或Ajax调用来更新我们的DOM。

Answer 3

您不必在 send（）之前使用 onload（），第一个和第二个示例已经显示了这一点。
onload（）是 XHR 对象的事件（XHR的 load 事件的属性），因此它将自动执行当XHR执行期间满足特定事件时。 XMLHttpRequest事务成功完成时调用的函数。因此，使用 onload（）属性，您只需定义/告知在满足加载事件时需要执行的操作。您无需定义是否不需要它。
send（）是XHR的一种方法，不是事件。因此，如果需要，您需要调用它。请参阅参考链接，以了解有关同步和异步调用的行为的更多信息。

参考：

为什么要在send方法之前放上onload

3 个答案: