AJAX的核心写法是通过XMLHttpRequest对象或FetchAPI异步加载数据，无需刷新页面即可更新局部内容，这是现代Web开发的基础技能。
很多初学者在接触前端开发时，总以为网页跳转就是唯一的交互方式，这种认知已经过时了，现在的用户期望页面像原生应用一样流畅，点击按钮后数据瞬间呈现，而不是看着白屏转圈，AJAX（AsynchronousJavaScriptandXML）虽然名字里带着XML，但如今它主要处理JSON数据，掌握它的正确写法,是构建高性能Web应用的必经之路。
在深入代码之前，我们需要理清技术演进的脉络，业内专家指出，从XMLHttpRequest到FetchAPI的过渡，不仅仅是语法的简化,更是编程思维的转变。
XMLHttpRequest（XHR）是AJAX技术的鼻祖，它在IE6时代就存在，兼容性极好，但写法繁琐，你需要监听不同的状态码（readyState），处理回调地狱，还要手动解析响应文本，对于复杂的数据交互，XHR的代码可读性较差,维护成本高。
FetchAPI基于Promise，写法更加简洁直观，它返回一个Promise对象，支持链式调用，天然适合异步编程，更重要的是，Fetch是原生API，不依赖jQuery等第三方库，体积更小,性能更优。
| 特性 | XMLHttpRequest | FetchAPI |
|---|---|---|
| 语法风格 | 回调函数，事件驱动 | Promise链式调用 |
| 错误处理 | 需检查status和readyState | 仅网络错误拒绝Promise，HTTP错误不拒绝 |
| 数据格式 | 默认文本，需手动JSON.parse | 原生支持.json()方法 |
| 浏览器支持 | 所有浏览器，包括IE | 现代浏览器，IE不支持 |
无论是使用哪种方式，AJAX的核心逻辑都是固定的：创建请求、配置参数、发送请求、处理响应，下面以目前主流的FetchAPI为例,拆解具体的操作流程。
获取数据是最常见的场景，假设我们要从服务器获取用户列表,代码结构如下：
具体代码示例：
注意，这里有一个常见的陷阱，Fetch在收到HTTP错误状态码（如404或500）时，并不会拒绝Promise，而是正常返回Response对象，必须手动检查response.ok属性,否则错误处理逻辑会失效。
当需要向服务器提交数据时，比如用户注册或表单提交，必须配置RequestHeaders和Body。
关键点在于Content-Type必须设置为application/json，否则后端可能无法正确解析JSON字符串，JavaScript对象必须通过JSON.stringify()转换为字符串才能放入Body中。
虽然Promise链式调用已经比XHR简洁，但多层嵌套依然会让代码变得难以阅读，Async/Await是ES2017引入的特性,它让异步代码看起来像同步代码一样直观。
使用async函数包裹请求逻辑，用await关键字暂停执行,直到Promise解决。
这种写法极大地提升了代码的可读性，错误处理统一放在try-catch块中，避免了多层嵌套的.catch()，对于初学者来说，理解async/await比理解Promise链更容易上手。
在实际开发中，我们经常需要同时请求多个接口，比如同时获取用户信息和订单列表，如果使用串行await，总耗时是各个请求耗时之和，使用Promise.all可以实现并发请求,显著缩短加载时间。
行业共识认为，对于独立且无依赖关系的请求，优先使用Promise.all，这不仅提升了用户体验,也减轻了服务器的排队压力。
AJAX开发中，错误处理往往比正常流程更复杂，许多开发者忽略了对边界情况的处理,导致线上问题频发。
浏览器出于安全考虑，默认禁止跨域请求，如果你在前端请求不同域名或端口的API，会遇到CORS（Cross-OriginResourceSharing）错误，解决这个问题的方法不在前端，而在后端，后端服务器需要在响应头中添加
Access-Control-Allow-Origin字段,允许特定的域名访问。
网络环境不稳定时，请求可能会超时或失败，对于关键业务，实现重试机制是必要的，可以封装一个带有重试逻辑的请求函数,在失败后等待一段时间再重新发起请求。
确保后端返回的数据格式符合预期，如果后端返回了HTML而非JSON，response.json()会抛出语法错误，在开发环境中，开启浏览器的Network面板，仔细检查Response内容,是排查此类问题的最快方法。
FetchAPI基于Promise，语法更简洁，支持流式处理，且是原生API，无需引入第三方库，XMLHttpRequest基于回调，语法繁琐，但在IE浏览器中兼容性更好，现代开发中，除非需要支持IE，否则优先使用FetchAPI。
使用try-catch包裹async/await代码，或使用.catch()处理Promise链中的错误，必须手动检查HTTP状态码,因为Fetch不会将4xx或5xx状态码视为错误。
XMLHttpRequest可以通过调用abort()方法取消请求，FetchAPI本身没有直接取消的方法，但可以使用AbortController对象，创建一个AbortController实例，将它的signal属性传递给fetch，然后在需要取消时调用controller.abort()。
掌握AJAX的正确写法，不仅能提升页面性能，还能优化用户体验，从XHR到Fetch，再到Async/Await，技术的演进始终围绕着简洁、高效和易维护展开，选择适合项目的技术栈，规范错误处理,是每一位前端开发者必须修习的基本功。
微信 
电话 
QQ