一、什么是JSONP？
JSON with padding 是一种数据交换的技巧，用于解决主流浏览器的跨域数据访问的问题！
二、生产的背景
由于同源策略，一般来说位于A服务器的网页是无法与其他服务器上的资源沟通的 而html中的`<script>`是一个特例，JSONP就是利用`<script>`这个标签实例动态地 从其他服务器获取资源（一般来说是一些文本内容）。
三、使用
客户端HTML代码嵌入一段
<script>引用，src指向服务器程序的URL，并在URL在给定一个参数，它的值就是上面1定义的function名服务器端代码（如PHP）接收到请求，解析参数取得客户端中定义的回调函数名，并将取得的回调函数名当作函数名称与数据合并输出一段 JS调用函数的代码
四、Talk is cheap,Show me the code!
服务器端程序代码 jsonp.PHP （在B机器）
<?PHP $func = $_GET['callback']; //这里获取客户JS定义的回调函数名称 $data = 'This is the jsonp data on crossdomain request'; echo "$func('{$data}')"; //这是一段JS代码
客户端HTML代码：jsonptest.html（在A机器上）
<!DOCTYPE html>
<html>
<head>
<title>Json test</title>
</head>
<body>
<h1 id="padding-content"></h1>
<a href="javascript:;" class="button">json data</a>
</body>
<script type="text/javascript">
function callbackfunc(data){
$("#padding-content").text("callback:"+data);
}
</script>
<script type="text/javascript" src="http://www.B.com/jsonp.PHP?callback=callbackfunc"></script>
</html>
打开浏览器A服务器上的jsonptest.html 可能看到结果
callback:This is the jsonp data on crossdomain request
Ajax跨域请求：
还是用刚才的服务器端程序，我们修改一下客户HTML中的JS代码，发起一个请求
<!DOCTYPE html>
<html>
<head>
<title>Json test</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<h1 id="padding-content"></h1>
<a href="javascript:;" class="button">json data</a>
</body>
<script type="text/javascript">
$(".button").click(function(){
$.ajax({
url:"http://www.B.com/jsonp.PHP",dataType:"jsonp",type:"get",jsonpCallback:"testJsonpCallBackFunc",error:function(err,errstr){
$("#padding-content").text(errstr);
},success:function(resp){
$("#padding-content").text(resp);
}
});
});
</script>
</html>
点击页面的json data，成功在页面打印以下内容，表示跨域调用成功
callback:This is the jsonp data on crossdomain request
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
