AJAX - onreadystatechange 事件 readyState属性 status属性使用逻辑

1. onreadystatechange 事件

onreadystatechange 是一个事件处理器，它会在 XMLHttpRequest 对象的 readyState 属性发生变化时被触发。readyState 属性表示请求/响应过程的当前状态。它有以下可能的值：

• 0: UNSENT - 代理被创建，但尚未调用 open() 方法。
• 1: OPENED - open() 方法已经被调用。
• 2: HEADERS_RECEIVED - send() 方法已经被调用，并且头部和状态已经可用。
• 3: LOADING - 下载中；responseText 属性已经包含部分数据。
• 4: DONE - 下载操作已完成。

当 readyState 变为 4（即 DONE 状态）时，你可以检查 status 和 statusText 属性来确定请求是否成功

var xhr = new XMLHttpRequest();  
xhr.onreadystatechange = function() {  
    if (xhr.readyState === 4) {  
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {  
            // 请求成功  
            console.log(xhr.responseText);  
        } else {  
            // 请求失败  
            console.error('HTTP Error: ' + xhr.status);  
        }  
    }  
};  
xhr.open('GET', 'https://api.example.com/data', true);  
xhr.send();

2. status 属性

status 属性返回服务器响应的 HTTP 状态码（如 200 表示成功，404 表示未找到等）。但是，你应该在 readyState 变为 4（即请求已完成）后再检查 status 属性，因为在此之前，status 可能不可用或未定义。

总结

• onreadystatechange 事件用于在 XMLHttpRequest 的 readyState 属性发生变化时执行某些操作。你通常会在这个事件处理器中检查 readyState 是否为 4（即请求已完成），然后进一步检查 status 属性以确定请求是否成功。
• status 属性用于获取服务器响应的 HTTP 状态码。你应该在 readyState 为 4 时检查它。
• 一句话：先看你的请求(readyState )是否正常，再看你请求服务端响应(status )是否正常，然后进行你的业务操作...。