原文链接：https://blog.csdn.net/Activity_Time/article/details/96440806
1. 概述
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
ajax本身是不可以跨域的，
通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。
其实设置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。
2. 客户端实现原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
// 回调函数
function callbackFunction(result)
{
document.getElementById('divCustomers').innerHTML = result;
}
</script>
<!-- 访问菜鸟教程的jsonp示例 -->
<script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>
3. JQuery实现
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?",function(json){
alert(json);
//要求远程请求页面的数据格式为： ?(json_data)
//例如：
//?("test") alert(json[0]._name);
//JQuery会随机生成一个函数名 例如：jQuery110206760198562063544_1563445396212
});
也可以使用ajax函数
$.ajax('https://www.runoob.com/try/ajax/jsonp.php', {
method: 'post',
contentType: 'application/javascript;charset=utf-8',
dataType: 'jsonp', // jsonp方式
jsonp: 'jsoncallback', // 回调函数名-参数名
success: function (result) {
// 回调函数
console.log(result);
}
});
$("#jkl").html(parseInt($("#jkl").html()) + 1);
}
4. 服务端原理
protected void service(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {
String msg = "测试信息";
// jsonp跨域协议
resp.addHeader("content-type", "application/javascript");
String func = request.getParameter("jsoncallback");
PrintWriter pw = resp.getWriter();
pw.print(func + "('" + msg + "');");
pw.flush();
}
参考文章：
菜鸟教程：https://www.runoob.com/jquery/jquery-tutorial.html
jsonp原理详解：https://blog.csdn.net/hansexploration/article/details/80314948
jquery中ajax处理跨域的三大方式：https://www.jb51.net/article/77470.htm