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是完全不一样的,一定不能混淆!