在前端开发中，我们经常需要使用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的具体实现方式：
----- --- - --- -----------------
---------------------- - ---------- -
-- ---------------- --- - -- ----------- --- ---- -
-- ------
-
--
--------------- -------
-----------当XHR对象的状态改变时，就会触发onreadystatechange事件。由于XHR对象的状态有5种，因此当readyState为4（表示请求已完成且响应已就绪）且status为200（表示服务器响应成功）时，我们才会处理返回的数据。
xhr.onload
那么，能否用xhr.onload方式来代替xhr.onreadystatechange呢？答案是可以的。下面是一个使用xhr.onload方式进行AJAX调用的示例：
----- --- - --- -----------------
---------- - ---------- -
-- ------------ --- ---- -
-- ------
-
--
--------------- -------
-----------与xhr.onreadystatechange实现相比，这里只需在onload事件中判断状态码即可。当XHR对象成功完成请求时，即status属性为200时，我们处理返回的数据。
总结
通过上述分析，我们得出了以下结论：
xhr.onreadystatechange和xhr.onload都可以用来监听AJAX请求的返回。- 在AJAX请求中，
xhr.onreadystatechange适用于需要监测多种状态变化的情况，如上传文件等。 - 对于一般的AJAX请求，使用
xhr.onload更加简洁明了。
最后，我们要注意的是，在使用xhr.onload进行AJAX调用时，我们需要确保服务器正确地设置了HTTP状态码。否则，当服务器返回了其他状态码时，我们就无法正确处理返回的数据。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26354