ajax原生js怎么实现？ajax原生js请求封装方法

使用原生JavaScript进行AJAX开发的核心在于利用XMLHttpRequest或Fetch API对象，通过配置请求头、监听状态变化并处理响应数据，实现页面局部刷新而不需重新加载整个文档。

在2026年的前端开发语境下，虽然React、Vue等框架早已普及，但深入理解底层通信机制依然是区分初级与高级开发者的分水岭，许多初学者在面对复杂交互时，往往过度依赖库而忽略了浏览器原生能力的边界，掌握原生实现，不仅能帮你排查框架封装下的隐蔽Bug，更能让你在面对老旧系统维护或极简场景需求时,拥有最轻量的解决方案。

加载中

【载入OW电竞史册】Lep与Bliss上演同时ajax | OWCS北美赛区

椰壳karuyek

1.1万1093

原视频地址

理解AJAX原生的核心机制

AJAX（Asynchronous JavaScript and XML）并非某一种特定的技术，而是一种网页更新技术，它的本质是浏览器与服务器之间进行异步数据交换，过去我们常说XML，但现在JSON已成为绝对主流，理解这一过程，就像理解两个人打电话：你发起请求（拨号），对方处理并回复（接通），你监听对方说话（状态监听），最后挂断（完成）。

业内专家指出，现代浏览器对fetch API的支持已经非常完善，但在需要兼容旧版IE或需要精细控制请求生命周期的场景中，XMLHttpRequest（XHR）依然是绕不开的基础。

为什么还要学原生AJAX

很多人问，既然有jQuery的$.ajax,为什么还要手写原生JS？

• 零依赖：原生代码不需要引入任何第三方库,体积几乎为零。
• 性能可控：你可以精确控制请求的每一步，包括超时设置、中断请求、进度监听等。
• 面试硬通货：在高级前端岗位面试中，手写一个AJAX封装是考察候选人对事件循环、回调地狱及Promise理解程度的经典题目。

原生AJAX的两种主要方式

目前主流的原生实现方式主要有两种：传统的XMLHttpRequest对象和较新的Fetch API。

1. XMLHttpRequest (XHR)：这是AJAX技术的鼻祖，它基于事件驱动，通过监听

   

   onreadystatechange事件来感知请求状态，它的优势在于兼容性好，支持上传文件进度监控，但代码结构较为繁琐,回调嵌套深。

2. Fetch API：基于Promise，语法更简洁，符合现代异步编程规范，它默认不发送Cookie，且网络错误时不会reject，需要手动判断response.ok。

实操：使用XMLHttpRequest实现GET请求

让我们从最基础的场景开始，假设你需要从服务器获取一组用户列表数据，并在页面上展示,以下是标准的原生JS实现路径。

创建一个XMLHttpRequest实例,这是所有操作的起点。

var xhr = new XMLHttpRequest();

配置请求，我们需要指定请求方法（GET/POST）、URL地址以及是否异步（通常设为true）。

// 初始化请求，GET方法，URL为/data/users.json，异步模式
xhr.open('GET', '/data/users.json', true);

设置请求头，如果是GET请求，通常不需要额外设置，但如果是POST发送JSON数据，必须设置Content-Type。

xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

监听状态变化是XHR的核心。readyState有5个状态，其中readyState === 4表示请求已完成，status === 200表示服务器响应成功。

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 解析JSON数据
            var data = JSON.parse(xhr.responseText);
            console.log('获取成功:', data);
            // 此处编写更新DOM的逻辑
        } else {
            console.error('请求失败，状态码:', xhr.status);
        }
    }
};

发送请求，对于GET请求，参数直接跟在URL后，send方法传入null。

xhr.send(null);

这种写法虽然冗长，但它清晰地展示了请求的生命周期，对于需要处理ajax原生js封装方法的场景，开发者通常会将其封装为一个返回Promise的函数,从而消除回调地狱。

进阶：使用Fetch API简化异步操作

在现代项目中，Fetch API是更推荐的选择，它的代码量更少，且天然支持异步/await语法,使代码看起来像同步流程一样清晰。

Fetch的基本用法

fetch('/data/users.json')
    .then(response => {
        // 检查响应状态
        if (!response.ok) {
            throw new Error('网络响应错误');
        }
        return response.json(); // 解析JSON
    })
    .then(data => {
        console.log('获取成功:', data);
    })
    .catch(error => {
        console.error('请求出错:', error);
    });

使用async/await后,代码更加优雅：

async function getUsers() {
    try {
        const response = await fetch('/data/users.json');
        if (!response.ok) {
            throw new Error('网络响应错误');
        }
        const data = await response.json();
        console.log('获取成功:', data);
    } catch (error) {
        console.error('请求出错:', error);
    }
}

处理POST请求与JSON数据

在实际业务中，提交表单数据是常见场景，使用Fetch发送POST请求时,需要注意请求体和头部的设置。

const userData = { name: '张三', age: 25 };
fetch('/api/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    body: JSON.stringify(userData)
})
.then(response => response.json())
.then(data => console.log('提交成功:', data))
.catch(err => console.error('提交失败:', err));

这里有一个常见的陷阱：Fetch默认不会携带Cookie，如果需要保持登录状态，必须显式添加

credentials: 'include'选项，这一点在跨域或单点登录场景下尤为重要,许多开发者在此处踩坑。

常见问题与最佳实践

在处理原生AJAX时，开发者经常遇到跨域、超时和取消请求等问题。

跨域问题（CORS）

浏览器出于安全考虑，执行同源策略，如果前端域名与后端域名不一致，就会触发跨域限制，解决这一问题的核心不在前端JS代码，而在后端配置响应头，后端需要添加Access-Control-Allow-Origin头，前端无需特殊处理,只需正常发起请求即可。

请求超时与取消

XMLHttpRequest支持设置超时时间。

xhr.timeout = 5000; // 设置5秒超时
xhr.ontimeout = function() {
    console.log('请求超时');
};

对于Fetch API，可以使用AbortController来取消请求。

const controller = new AbortController();
const signal = controller.signal;
fetch('/data/users.json', { signal })
    .then(...)
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('请求已取消');
        }
    });
// 取消请求
controller.abort();

错误处理策略

原生AJAX的错误处理往往被忽视，网络断开、服务器500错误、JSON解析失败等情况都需要捕获，建议统一封装错误处理逻辑,将原始错误转换为友好的用户提示。

掌握ajax原生js实现原理不仅是技术深度的体现，更是构建健壮前端应用的基础，从XMLHttpRequest的繁琐回调到Fetch API的简洁Promise，技术的演进旨在提升开发效率,但底层逻辑始终未变。

在2026年的开发环境中，除非有特殊的兼容性需求或极简场景，否则建议优先使用Fetch API配合async/await，对于ajax原生js封装库的选择，应基于项目具体需求，而非盲目追随潮流，理解原生，方能驾驭框架；掌握底层,方能应对万变。