JSONP

发布时间：2020-12-16 18:40:40 所属栏目：百科来源：网络整理

导读：JSONP(JSON with Padding) 是 JSON 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。 JSONP本质由于浏览器的同源策略，会阻止Ajax请求，但是不会阻止 script src=""/script ，因此就可以通过 script src=""/script 的方式发送

JSONP(JSON with Padding) 是 JSON 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

JSONP本质

由于浏览器的同源策略，会阻止Ajax请求，但是不会阻止<script src=""></script>，因此就可以通过<script src=""></script>的方式发送请求。

注意：JSONP只能发送GET请求

JSONP数据格式

为了配合通过<script>发送请求，服务器端返回的数据应为JSONP格式：

callbackFunction(数据)

因为通过<script src=""></script>发送请求就等于将服务器返回的数据直接放入了<script></script>代码块中，所以服务器需要返回JS格式的数据，一般返回一个回调函数，然后将要发送给浏览器的数据当作参数传给函数，并且浏览器需要先定义一个函数供服务器调用。

示例：

.html:

<body>
<input type="button" id="get-JSONP" value="get" />
</body>
<script src="/static/jQuery3.4.1.js"></script>
<script src="/static/get_jsonp.js"></script>

get_jsonp.js:

$('#get-JSONP').click(function () {
    var tag = document.createElement('script');
    tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
    document.head.appendChild(tag);
    document.head.removeChild(tag);
});

function list(arg){
    console.log(arg);
}

通过这个示例就可以清晰地看出JSONP的原理

通过jQuery发送请求

示例

get_jsonp.js:

$('#u-get').click(function () {
    $.ajax({
        url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',type: 'GET',dataType: 'jsonp',jsonp: 'callback',jsonpCallback: 'list'
    })
function list(arg){
    console.log(arg);
}

请求类型可以使用POST，但是其实内部仍然将POST转换为GET

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!