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