原生Ajax用于同源数据交互，而JSONP专为解决跨域问题设计，两者在浏览器安全策略（CORS）普及的今天，JSONP已逐渐被废弃，但在维护老旧系统时仍具参考价值。
在现代前端开发中，网络请求是应用与服务器沟通的桥梁，虽然如今Vue、React等框架早已内置了axios或fetch等高级封装，但在底层原理面试或老旧项目维护中，理解原生Ajax和JSONP的实现细节依然至关重要，这不仅是技术面试的常客，更是理解浏览器同源策略（Same-Origin Policy）的必经之路。
原生Ajax的核心机制与实现路径
Ajax（Asynchronous JavaScript and XML）并非某项单一技术，而是多种技术的集合，其核心在于使用XMLHttpRequest对象与服务器进行异步数据交换，尽管名字里带有XML,但现代开发中绝大多数情况交换的是JSON格式数据。
XMLHttpRequest对象的创建
在IE6/7时代，创建XHR对象需要兼容ActiveX控件，而在现代浏览器中，直接实例化即可，业内专家指出,掌握不同浏览器的兼容写法是前端工程师的基本功。
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
// 兼容IE6及以下
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
请求流程的标准化步骤
一个完整的Ajax请求包含初始化、发送、监听状态变化和处理响应四个阶段，这种流程虽然繁琐,但逻辑清晰。
- 初始化：调用
open()方法，指定请求方法（GET/POST）、URL以及是否异步。 - 设置请求头：对于POST请求，必须设置
Content-Type为application/x-www-form-urlencoded,否则服务器可能无法解析参数。 - 发送请求：调用
send()方法，GET请求参数拼在URL后,POST请求参数作为参数传入。 - 监听状态：通过
onreadystatechange事件监听readyState
的变化，当
readyState为4且status为200时,表示请求成功。
关键状态码解析
- 0：请求未初始化。
- 1：服务器连接已建立。
- 2：请求已接收。
- 3：请求处理中。
- 4：请求已完成,且响应已就绪。
JSONP跨域原理及原生封装逻辑
由于浏览器的同源策略限制，Ajax无法直接请求不同域名、协议或端口的资源，JSONP（JSON with Padding）是一种非官方的跨域解决方案，它利用了<script>标签不受同源策略限制的特性。
为什么选择JSONP而非CORS？
CORS（跨域资源共享）是现代浏览器解决跨域的标准方案，需要服务器配合设置响应头，在CORS普及之前，或者在需要兼容IE8以下浏览器的场景中，JSONP是唯一的跨域选择，其核心原理是：前端动态创建<script>标签，src指向后端接口，后端返回的不是JSON数据，而是一段JavaScript代码,这段代码调用了前端预先定义好的回调函数。
JSONP封装的关键点
封装JSONP的核心在于动态生成唯一的回调函数名,并管理其生命周期。
- 生成唯一回调名：使用时间戳或随机数生成一个全局唯一的函数名，例如
jsonp_1698765432。 - 挂载全局函数：将该函数挂载到
window对象上,函数内部负责处理接收到的数据并移除脚本标签。 - 动态插入脚本：创建
<script>元素，设置src为接口地址,并将回调名作为参数传递。 - 清理与超时处理：请求成功后自动移除
<script>标签，防止内存泄漏；同时设置超时定时器，若在规定时间内未收到响应,则执行错误回调并清理资源。
两种技术的对比与选型建议
在实际项目中，选择Ajax还是JSONP,取决于目标浏览器的支持情况和服务器配置。
| 特性 | 原生Ajax (XHR) | JSONP |
|---|---|---|
| 跨域支持 | 不支持（需CORS配合） | 原生支持 |
| 请求方法 | GET, POST, PUT, DELETE等 | 仅支持GET |
| 数据格式 | 任意（XML, JSON, Text等） | 仅限JSON |
| 错误处理 | 可通过status判断 | 难以捕获网络错误，依赖超时 |
| 浏览器兼容 | IE7+ (IE6需ActiveX) | IE6+ |
| 安全性 | 较高，受同源策略保护 | 较低，存在XSS风险 |
何时使用JSONP？
多数情况下，除非你必须兼容IE8以下浏览器且服务器不支持CORS，否则不建议使用JSONP，近年来，随着移动端的普及和浏览器的升级，JSONP的使用场景已大幅缩减，据统计，在新建项目中，JSONP的需求占比已不足5%。
现代替代方案
对于现代前端开发，推荐使用fetch API或axios库，它们基于Promise，语法更简洁，且天然支持CORS，如果必须处理跨域，应优先配置服务器端的CORS响应头,而非依赖JSONP。
常见误区与调试技巧
在实际操作中，开发者常遇到一些棘手的问题,了解这些陷阱能显著提升开发效率。
JSONP的回调函数未执行
如果JSONP请求成功但数据未处理，首先检查后端返回的数据格式是否正确，后端必须返回类似callbackName({key: "value"})的格式，而非单纯的{key: "value"},确保回调函数名在URL参数中与后端一致。
Ajax请求被缓存
GET请求在浏览器中可能被缓存，导致后续请求返回旧数据，解决方法是在URL后添加时间戳参数，如?t=+new Date()，或使用cache: 'no-cache'配置。
跨域错误的排查
遇到跨域错误时，首先确认是否使用了JSONP，如果使用的是Ajax，检查浏览器控制台是否提示“Access-Control-Allow-Origin”相关错误，此时需联系后端开发人员,确保服务器返回了正确的CORS头。
Q&A：关于Ajax和JSONP的常见疑问
原生Ajax和JSONP封装的区别是什么？
原生Ajax封装主要围绕XMLHttpRequest对象的状态机进行，侧重于HTTP请求的生命周期管理、请求头设置及响应解析，而JSONP封装的核心在于动态DOM操作，即创建和销毁<script>标签，以及全局回调函数的注册与清理，Ajax是标准的HTTP协议交互,JSONP则是利用HTML标签特性的变通方案。
JSONP为什么只支持GET请求？
因为JSONP依赖于<script>标签的src属性发起请求，HTML规范中，<script>标签的加载行为本质上等同于GET请求，无法通过属性指定POST方法，JSONP无法发送POST数据，也无法设置复杂的请求头,这限制了其在现代API交互中的应用。
原生Ajax封装中如何处理超时？
XMLHttpRequest对象本身没有内置的timeout属性（尽管现代浏览器支持），在原生封装中，通常使用setTimeout函数，在发送请求前启动定时器，若在指定时间内未收到onreadystatechange的完成信号，则手动触发错误回调，并调用xhr.abort()中断请求,以防止资源浪费。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/311327.html
