ajax jsonp跨域

2019年8月31日 166次阅读 来源: zhangqh

JSONP是一种非正式传输协定，该协定的一个要点就是许可用户通报一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，如许客户端就能够随便定制本身的函数来自动处置惩罚返回数据了。

简朴明白

应用<script>标签能够跨域，让服务器端返回可执行的Javascript函数，参数为要回发的数据。

像如许

<script>
    function foo(res) {
        console.log(res); // {name: "tom", age: 23}
    }
</script>
<script src="http://localhost:8080/test/demo.php?bar=foo"></script>

php代码

<?php
header('content-type: application/json');
$a = array('name'=>'tom','age'=>23);
echo $_GET['bar'].'('.json_encode($a).')';

下面以 $.ajax 的 jsonp 为例：

function foo(res) {
    console.log(res);
}
$.ajax({
    type: 'get',
    url: 'demo.php',
    dataType: 'jsonp',
    jsonp: 'bar', // jsonp参数名
    jsonpCallback: 'foo', // 自定义回调函数称号
    data: {"firstname": "tom"}
});

看下要求及返回效果

《ajax jsonp跨域》

不难看出，返回的是一个有实参的函数挪用。

foo({"name":"tom","age":23})

而这个函数是已经在js里声明好的。

处置惩罚历程就是$.ajax动态建立script增加src，完事再删除一个历程。

别的不声明jsonpCallback函数，运用success也能拿到返回值。

$.ajax({
    type: 'get',
    url: 'demo.php',
    dataType: 'jsonp',
    jsonp: 'bar',
    jsonpCallback: 'foo',
    data: {"firstname": "tom"},
    success: function(res) {
        console.log(res);
    }
});

注重：由于jsonp是经由过程动态增加script标签，在src中增加查询参数callback，再应用js运行机制完成的，所以jsonp只合适GET要求。

附加一种后端的处置惩罚跨域的体式格局：

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept');

假如request的Accept和response的Content-Type不婚配的话也会报错。

    原文作者：zhangqh
    原文地址: https://segmentfault.com/a/1190000007623077
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞