jsonp

1、介绍

jsonp是cors通信的一种解决方案。利用html元素跨域请求时，自动携带目标域cookie的特点进行。

jsonp_百度百科 (baidu.com)

JSONP 教程 | 菜鸟教程 (runoob.com)

2、三种使用

2.1 script标签

<script src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

• script标签可以不指向js文件，而是指向一个接口，携带参数。其响应内容为脚本代码，和引入外部js是一致的
• 一般，在前端写js函数，接口负责查询数据，然后以函数调用方式，将数据作为函数的参数

2.2 jquery的getJSON函数

<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});
</script>

• getJSON的第一个参数为jsonp接口地址
• 第二个参数为回调函数，其具有一个参数，是jsonp返回函数调用的参数

2.3 jquery的ajax

$.ajax({
dataType:'jsonp',
data:'id=10',
jsonp:'jsonp_callback',
url:'http://www.yiwuku.com/getdata',
success:function(){
//dostuff
},
});