本文深入解析JSONP跨域请求原理，从同源策略出发，阐述利用script标签src属性实现跨域的核心机制。通过百度搜索API示例，展示JSONP如何配合后端生成回调函数，并分析其仅支持GET请求及需前后端配合的局限性。
同源策略的定义
该策略由Netscape提出，作为著名的安全机制，目前所有支持JavaScript的浏览器均遵循此策略。
核心在于域名、协议及端口必须一致。若浏览器中两个标签页分别访问百度和谷歌，执行脚本时会校验同源状态，仅允许同源脚本运行。若非同源，浏览器控制台将报错并拒绝访问。
JSONP的概念
JSONP全称为JSON with Padding，属非官方协议。其允许服务器返回Script标签至客户端，通过JavaScript回调函数形式实现跨域数据访问（此为JSONP的基础实现方式）。
对前述概念的理解
HTML标签的src属性既可用于请求本地图片，也可请求网络资源，表明src属性支持跨域。同理，JSONP跨域请求利用script标签的src属性实现。
具体示例分析
首先创建一个HTML文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<title>jsonp请求资源</title>
<script type="text/javascript" src="./t10.js"></script>
</body>
</html>
随后编写一个JS文件：
console.log("我被请求了！");
查看控制台输出结果：
JSONP实现了本地数据的请求模拟，展示了本地请求的实现过程。
若需请求服务器数据，应如何实现？
解析跨域请求模式：
打开百度搜索页面，进入控制台并点击Network选项卡：
在页面输入字符b：
https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35105,31660,35239,35457,34584,35245,35480,35499,35329,35316,26350,35475&wd=b&req=2&csor=1&cb=jQuery11020022466709590333256_1639545101298&_=1639545101299
关键字参数为：wd=b
此处回调函数为：
cb=jQuery11020022466709590333256_1639545101298&_=1639545101299
观察可知请求方式为GET，JSONP默认亦采用GET请求。通过GET方式向服务器请求数据，若返回JSON字符串，将自动转换为JS对象。因此，JSONP需前后端协同配合。
红色方框标识返回的关键字信息：
未手动编写callback方法，jQuery自动封装了一个。将CD修改为001后，其名称变为001。
https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35105,31660,35239,35457,34584,35245,35480,35499,35329,35316,26350,35475&wd=b&req=2&csor=1&cb=001
实践练习
获取请求数据并展示（以百度搜索框为例）。
具体操作步骤如下：
根据用户输入动态创建脚本，获取回调函数中的值，并在页面添加列表以展示这些数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../12-5/js/jquery.js"></script>
<style>
input {
width: 540px;
height: 40px;
border: 2px solid #4E6EF2;
}
li{
height: 40px;
width: 411px;
line-height: 40px;
font-size: 16px;
list-style: none;
}
</style>
</head>
<body>
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
<div>
<input type="text" value =''>
</div>
<ul></ul>
<script>
//
function getData(data){
var script = document.querySelector('#jsonp');
script.parentNode.removeChild(script);
$('ul').html('');
for(var i =0;i<data.g.length;i++){
$('<li>'+data.g[i].q +'</li>').appendTo('ul');//将获取到的数据加入列表
}
}
//动态生成script脚本
function getList(wd){
var script = document.createElement('script');
script.id = 'jsonp';
script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&req=2&csor=1&cb=getData&wd='+wd;
document.body.appendChild(script);
}
//给input设置键盘事件。
//实现输入文本后调用脚本函数
var ipt = document.querySelector('input');
ipt.addEventListener('keyup',function(){
var wd = this.value;
getList(wd);
})
</script>
</body>
</html>
JSONP的局限性
- 仅支持发送GET请求，因script标签仅支持GET请求。
- 需后端配合。该请求方式要求前后端协作，将返回结果封装为callback(result)格式。
总结
本文关于JSONP跨域请求原理的介绍至此结束，更多相关内容请搜索本站历史文章或继续浏览下方相关文章，感谢大家的支持！