JSONP的出现是因为游览器的同源策略，所谓同源是指所请求的主机，域名，协议，端口与当前相同。同源策略限制了我们无法通过原生的XMLHttpRequest()对象获取到json数据。为了突破这个限制，开发者想出了一个解决方案，JSONP。
什么是JSONP
首先jsonp不是json数据，JSON是一种数据格式，而JSONP是一种数据调用方式，是解决JSON跨域获取的解决方案。因此JSONP（JSON with Padding）其实是一个非官方的协议。
JSONP原理
由于同源策略，XMLHttpRequest()对象无法跨域，但<script> 、<img>、<link>等标签是可以跨域的。所以可以利用<script>标签来向服务器发送请求，服务器端接收到请求后返回一段js代码，调用客户端写好的方法，并把JSON数据传入该方法中，客户端即可拿到数据。
原理：script请求php文件->php输出JavaScript文本->文本代码中包含JSON
数据->返回的代码文本插入到客户端中->客户端交互返回的JavaScript文本。
原理知道了，再看下代码是怎么实现的。
jQuery版：
$.ajax({
dataType:'jsonp',
jsonp:'jsonp_callback', //后端检测请求所包含的值是否是jsonp_callback
url:'http://www.baidu.com/getData.php',
success:function(){
//dosomthing
}
});
JavaScript版：
function json(jsonObj) {
//dosomthing
}
// 调用jsonHandle，传入地址、追加参数，服务器端返回js代码，
// 并调用客户端写好的json方法并把json数据传入进来。
function jsonHandle(url) {
var script = document.createElement("script");
script.setAttribute("src",url);
document.body.appendChild(script);
// 防止 script 标签冗余
if(oScript) {
document.body.removeChild(oScript);
}
}
JSONP总结
本文已经涉及到后端的代码，但是对后端的代码不是非常熟悉，故没有贴出来。但要想掌握好JSONP跨域的知识或者更好的理解，了解后端（比如php）的一些知识是非常有必要的。
最后注意一点！虽然jQuery把JSONP内置在了AJAX里，但是一定要清楚，jQuery的AJAX和JSONP是完全不一样的，一定不能混淆！
网友评论