第37篇：原生AJAX从零手写源码——彻底弄懂前端网络请求底层

前言在前面章节我们使用过 Fetch、封装过 Promise 请求。但Fetch 是现代API真正前端网络底层根基永远是AJAXXMLHttpRequest。绝大多数新人只会调用接口从来不知道网络请求底层是怎么建立的请求头、响应头如何配置请求状态码、 readyState 到底是什么为什么可以异步不阻塞页面本篇带你从零手写完整原生AJAX源码弄懂前端网络底层吊打面试网络原理题同时为下一篇跨域知识点打下绝对基础。一、AJAX是什么面试满分定义AJAX 是异步的 JavaScript 和 XML核心作用在不刷新页面的情况下与服务器进行异步数据通信。前端所有接口请求底层根源都是 AJAXjQuery.ajax 底层 XMLHttpRequestaxios 底层 XMLHttpRequestFetch 是新规范但底层思想依然是AJAX异步通信二、AJAX 核心五大步骤必背创建请求实例new XMLHttpRequest()初始化请求open(请求方式, 接口地址, 是否异步)监听状态变化onreadystatechange发送请求send()接收响应数据判断状态码、解析数据三、readyState 五状态详解面试必考0未初始化未调用open1请求已建立未发送2请求已发送响应头已返回3正在接收响应数据部分返回4请求彻底完成数据全部接收成功我们真正处理业务逻辑只判断readyState 4四、状态码 status 含义200请求成功404接口地址不存在403权限不足500服务器报错五、手写完整AJAXGET请求完整版// 1. 创建xhr实例 const xhr new XMLHttpRequest(); // 2. 初始化请求方式和地址 // 第三个参数true异步 false同步 xhr.open(GET,https://jsonplaceholder.typicode.com/posts/1,true); // 3. 监听状态变化 xhr.onreadystatechange function(){ // 请求完成 if(xhr.readyState 4){ // 请求成功 if(xhr.status 200){ // 拿到服务器返回数据 console.log(请求成功,JSON.parse(xhr.responseText)); }else{ console.log(请求失败,xhr.status); } } } // 4. 发送请求 xhr.send(null);六、手写POST请求带请求体、请求头const xhr new XMLHttpRequest(); xhr.open(POST,https://xxx.com/api,true); // POST必须手动设置请求头 xhr.setRequestHeader(Content-Type,application/json); xhr.onreadystatechange function(){ if(xhr.readyState 4){ console.log(xhr.status,xhr.responseText); } } // 传递JSON参数 const data JSON.stringify({name:张三,age:18}); xhr.send(data);七、封装Promise版AJAX企业通用把原生AJAX封装成 Promise兼容 async/await对标 axios 底层思想。function ajax(url,methodGET,datanull){ return new Promise((resolve,reject){ const xhr new XMLHttpRequest(); xhr.open(method,url,true); // 设置请求头 xhr.setRequestHeader(Content-Type,application/json); xhr.onreadystatechange function(){ if(xhr.readyState 4){ if(xhr.status 200 xhr.status 300){ resolve(JSON.parse(xhr.responseText)); }else{ reject(请求失败 xhr.status); } } } // 发送数据 xhr.send(data ? JSON.stringify(data) : null); }) } // 使用 ajax(https://jsonplaceholder.typicode.com/posts) .then(resconsole.log(res)) .catch(errconsole.log(err));八、本篇结语学完本篇你不再是只会调用 Fetch、axios 的小白。你真正掌握了前端网络请求底层原理理解请求全过程、状态流转、头部配置、参数传递。所有网络框架万变不离其宗底层全部是 AJAX。下一篇我们攻克前端超级高频痛点跨域问题与全套解决方案彻底解决项目接口报错问题。