能否用xhr.onload替换xhr.onreadystatechange来进行AJAX调用？

在前端开发中，我们经常需要使用AJAX（Asynchronous JavaScript and XML）来向后端服务器发送异步请求。而在AJAX调用中，经常使用的XHR（XMLHttpRequest）对象有两个重要的回调函数：onreadystatechange与onload。那么问题来了，能否用xhr.onload替换xhr.onreadystatechange来进行AJAX调用呢？本文将探讨这一问题。

前置知识

在深入讨论这个问题之前，我们需要先理解一些相关的前置知识：

• onreadystatechange：当readyState属性改变时触发的事件，readyState代表XHR对象的状态。
• onload：当XHR对象成功完成请求时触发的事件。
• readyState属性：XHR对象的状态，有5种状态码分别为0、1、2、3、4。
• status属性：HTTP状态码，代表服务器响应的状态。

xhr.onreadystatechange vs. xhr.onload

xhr.onreadystatechange

首先，我们来看下xhr.onreadystatechange的具体实现方式：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
        // 处理返回数据
    }
};
xhr.open('GET', 'url');
xhr.send();

当XHR对象的状态改变时，就会触发onreadystatechange事件。由于XHR对象的状态有5种，因此当readyState为4（表示请求已完成且响应已就绪）且status为200（表示服务器响应成功）时，我们才会处理返回的数据。

xhr.onload

那么，能否用xhr.onload方式来代替xhr.onreadystatechange呢？答案是可以的。下面是一个使用xhr.onload方式进行AJAX调用的示例：

const xhr = new XMLHttpRequest();
xhr.onload = function() {
    if (this.status === 200) {
        // 处理返回数据
    }
};
xhr.open('GET', 'url');
xhr.send();

与xhr.onreadystatechange实现相比，这里只需在onload事件中判断状态码即可。当XHR对象成功完成请求时，即status属性为200时，我们处理返回的数据。

总结

通过上述分析，我们得出了以下结论：

• xhr.onreadystatechange和xhr.onload都可以用来监听AJAX请求的返回。
• 在AJAX请求中，xhr.onreadystatechange适用于需要监测多种状态变化的情况，如上传文件等。
• 对于一般的AJAX请求，使用xhr.onload更加简洁明了。

最后，我们要注意的是，在使用xhr.onload进行AJAX调用时，我们需要确保服务器正确地设置了HTTP状态码。否则，当服务器返回了其他状态码时，我们就无法正确处理返回的数据。

参考资料

• XMLHttpRequest.readyState
• XMLHttpRequest.status
• Using XMLHttpRequest

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26354