使用AJAX请求时，如何准确获取并判断HTTP状态码？ajax获取http状态码

在Web前端开发中,通过Ajax发起异步请求时，开发者往往容易忽略HTTP状态码的准确获取与处理，导致错误排查困难或用户体验不佳，核心上文小编总结是：获取Ajax请求状态码的正确方式取决于所使用的技术栈，对于原生XMLHttpRequest对象，应通过xhr.status属性获取；对于jQuery的$.ajax方法，应在error回调函数中通过jqXHR.status参数获取；而对于现代前端主流的Fetch API，则需检查response.ok属性或response.status属性，必须严格区分HTTP状态码（如404、500）与网络层面的错误（如DNS解析失败、断网），前者由服务器返回，后者由浏览器底层拦截，处理方式截然不同。

原生XMLHttpRequest的状态码获取

在传统的原生JavaScript开发中,XMLHttpRequest（XHR）是发起Ajax请求的基础对象，获取状态码的关键在于监听load或error事件，并在回调函数中访问this.status或xhr.status。

需要注意的是,XHR对象在请求完成时，status属性会返回一个数字，常见的状态码包括：

• 200：请求成功。
• 404：资源未找到。
• 500：服务器内部错误。
• 0：这通常表示请求未完成或发生本地错误（如跨域问题、网络断开或请求被取消），而非服务器返回的错误。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log('成功', xhr.responseText);
    } else {
        // 获取具体的HTTP状态码
        console.error('请求失败，状态码：', xhr.status);
    }
};
xhr.onerror = function () {
    // 网络错误，status通常为0
    console.error('网络错误，状态码：', xhr.status);
};
xhr.send();

jQuery Ajax中的状态码处理

jQuery封装了底层差异,使得状态码获取更加直观，在$.ajax方法中，成功回调success仅在HTTP状态码为2xx时触发，如果状态码为4xx或5xx，流程会直接进入error回调。

在error回调中，第三个参数jqXHR（在jQuery 1.4+中）包含了完整的请求信息，其中status属性即为HTTP状态码。

$.ajax({
    url: '/api/data',
    type: 'GET',
    success: function(data) {
        console.log('数据获取成功');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // jqXHR.status 即为HTTP状态码
        console.log('请求出错，HTTP状态码：' + jqXHR.status);
        console.log('错误文本：' + textStatus);
    }
});

Fetch API的现代实践

随着ES6的普及,Fetch API已成为现代前端开发的标准，Fetch的行为与XHR和jQuery不同：它只在网络故障时拒绝Promise，而对于404、500等HTTP错误，Fetch默认不会拒绝Promise，而是返回一个包含错误状态码的Response对象。

获取状态码必须显式检查response.status或response.ok。

fetch('/api/data')
    .then(response => {
        // response.ok 为 true 当且仅当 status 在 200-299 之间
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('成功', data);
    })
    .catch(error => {
        // 这里捕获的是手动抛出的错误，包含状态码信息
        console.error('请求失败', error.message);
    });

深度解析：状态码0与网络错误的区别

许多开发者误以为状态码0代表服务器拒绝连接,实则不然，状态码0通常意味着请求根本没有到达服务器，或者浏览器因安全策略（如CORS跨域资源共享限制）拦截了响应。

• CORS错误：如果服务器未正确配置Access-Control-Allow-Origin头，浏览器会拦截响应，导致status为0。
• 网络中断：设备离线或DNS解析失败。
• 请求取消：调用xhr.abort()后，status也会变为0。

解决此类问题不能仅依赖状态码判断,需结合textStatus（jQuery）或检查Response的type属性（Fetch，值为"opaque"或"error"）来综合诊断。

最佳实践建议

1. 统一错误处理中间件：在项目中建立统一的API请求拦截器，对所有Ajax请求的状态码进行标准化处理，避免重复代码。
2. 用户友好提示：不要直接将状态码抛给用户，而应映射为易懂的提示语，404映射为“页面不存在”，500映射为“服务器繁忙，请稍后重试”。
3. 区分静默失败与用户可见错误：对于非关键请求（如埋点上报），状态码错误可静默处理；对于核心业务请求，必须阻断流程并提示用户。

---

相关问答

Q1: Fetch API中response.status为0是什么原因？

A: 在Fetch API中，如果response.status为0，通常是因为请求是“跨域”且服务器未返回正确的CORS头，或者请求被浏览器因安全策略拦截，此时response.type通常为"opaque"或"error"，这与XHR中的status 0类似，表示请求未成功完成或未被服务器响应。

Q2: 为什么jQuery的error回调中jqXHR.status有时为0？

A: 当请求发生跨域问题（CORS）、网络断开、DNS解析失败或请求被手动取消时，jQuery的error回调会被触发，且jqXHR.status返回0，这表示HTTP请求并未成功完成，因此没有服务器返回的状态码。