JSONP是JSON with padding(填充式JSON)的简写,是应用JSON的一种方法,看起来和JSON差不多,只不过是被包含在函数调用中的JSON,就像下面这样:
callback({name: 'lwl'})
JSONP由两部分组成:回调函数和数据,回调函数是响应到来时应该在页面中调用的函数,而数据是传入回调函数中的JSON数据(服务器填充的)。
(1)、JSONP结构
JSONP是很常用的一种跨域请求方案,常见的JSONP请求格式如下:
http://www.othersite.com/demo5.ashx?callback=showResult
响应结果看上去就像是包含在函数调用中的JSON结构:
showResult({"weather": "晴","wind": "微风"})
(2)、为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?
这是因为同源策略。同源策略,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略。JSONP不受“同源策略”限制的,原因和图片ping是一样的,<script>标签也可以跨越,因此我们可以通过利用JSONP来动态创建<script>,并将其src指向一个跨域的URL,就可以完成和跨域得服务器之间的通信了。
(3)、发起请求:
JSONP原理上是利用了动态<script>标签实现的,通过创建script对象,并且将其src属性设置为跨域请求的url地址。当请求完成后,JSONP响应加载到页面中便立即执行。
<script>
function showResult(json){
var obj= document.getElementById("result");
obj.innerHTML="天气:"+json.weather+";风力:"+json.wind;
}
var script=document.createElement("script");
script.src="http://www.othersite.com/demo5.ashx?callback=showResult";
document.body.insertBefore(script,document.body.firstChild);
</script>
(4)、特点:
JSONP可以实现浏览器和服务器双向通信,并且能够访问响应中的文本;
JSONP是从其他域中加载代码并执行的,需要注意其安全性;
JSONP请求结果成败不易确定。
(5)、实例
<script type="text/javascript">
function call(data){
alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/?callback=call'></script>
这里,我们把脚本的src设置为http://freegeoip.net/json/?callback=call,http://freegeoip.net这是一个获取用户ip地址的api,然后将callback作为一个参数拼接在URL后,返回的json数据就会作为callback的参数,在这里callback我们定义为call函数,即返回的json数据就会作为call的参数传进去,这个call函数仅仅弹出用户的城市city。
使用动态创建<script>标签实现:
<script type="text/javascript">
function call(data){
alert(data.city);
}
var script=document.createElement("script");
script.src="http://freegeoip.net/json/?callback=call";
document.body.insertBefore(script,document.body.firstChild);
</script>
使用JQuery中的getJSON()方法实现:
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$.getJSON("http://freegeoip.net/json/", function(data) {
alert(data.city);
});
</script>