Ajax三种实现形式解析：XMLHttpRequest、$.ajax与fetch是否相同？

这三种实现并不相同，它们是Ajax异步请求在不同阶段的实现方案，底层逻辑、语法风格和适用场景各有差异，具体拆解如下：

1. 原生XMLHttpRequest #

这是浏览器最早提供的原生异步HTTP请求API，也是所有Ajax方案的底层基础（包括早期jQuery的Ajax实现）。

• 特点：需要手动监听onreadystatechange事件，自行判断请求就绪状态（readyState）和响应状态码（status），代码写法相对繁琐，但兼容性拉满——能支持几乎所有旧版浏览器（包括IE6+）。
• 你的示例中通过它发起了一个GET请求，并在成功响应后更新DOM内容。

2. jQuery的$.ajax #

这是jQuery库对原生XMLHttpRequest的上层封装，核心目的是简化异步请求的代码编写，同时抹平不同浏览器之间的XHR兼容性差异。

• 特点：通过配置对象的方式传入请求参数（请求方法、URL、请求数据、成功/失败回调等），语法更简洁直观，还内置了JSON自动解析、错误统一处理等便捷功能。
• 底层依然依赖XMLHttpRequest，适合已经引入jQuery的传统前端项目。

3. Fetch API #

这是ES6之后推出的现代浏览器原生异步请求API，基于Promise设计，是官方为替代XMLHttpRequest推出的方案。

• 特点：采用Promise链式调用（或配合async/await）处理响应，语法更符合现代JavaScript的异步编程风格。
• 和前两者的关键差异：默认不会携带Cookie（需要手动配置credentials: 'include'）；仅在网络层面出错时才会触发Promise的reject，HTTP错误码（如404、500）不会自动触发reject，需要手动判断响应状态。

核心共性 #

三者的本质都是实现异步HTTP请求（即Ajax的核心定义），都能在不刷新页面的情况下与服务器交互数据，这也是你能把它们归为Ajax相关实现的原因。

内容的提问来源于stack exchange，提问作者Parin Insuwan