SONP是一种使用模式,人们常常把JSONP和JSON混淆

JSONP 教程

JSONP是一种使用模式,人们常常把JSONP和JSON混淆,他们虽然有关系,但是描述的不是一个事物,JSONP是JSON with Padding的简称。本篇会说明JSONP是一个什么?怎么是去使用。

通俗讲,JSONP 为解决跨域而诞生。是为了基于浏览器Web请求不通源之间的请求。

为了下面更好的讲解JSONP,先解释一下跨域。

具体讲,是解决不同源,被浏览器监管Javascript的安全限制。

  • https://www.sojson.com调用https://www.sojson.com/json/是不会跨域的。
  • https://www.sojson.com 调用http://www.itboy.net/json/是跨域的,因为不同域名。
  • https://www.sojson.com调用http://a.sojson.com/search1_baidu.com.html 是跨域的。因为是不同二级域名。
  • https://www.sojson.com:8080调用https://www.sojson.com:8081 是跨域的。因为是不同端口。
  • https://www.sojson.com调用http://www.sojson.com 是跨域的。因为是不同请求协议,http和https。
  • 188.188.188.20调用199.199.199.99 是跨域的。因为不同IP。
  • localhost调用127.0.0.1 也是跨域的。其实他也是不同域名。

JSONP for Java (一)

前端代码,Javascript:

<script>
//jsonp回调方法,一定要写在jsonp请求前面
function callback(txt){
alert(txt);
}
</script>
<script src ="/demo/testJsonp.shtml" type="text/javascript" ></script>

后端代码,Java:

/**
* jsonp 测试
* @return
*/
@RequestMapping(value="testJsonp",method=RequestMethod.GET)
@ResponseBody
public String testJsonp(){
return "callback('test jsonp');";
}

前端会alert弹出的内容“test jsonp”

JSONP for Java ,自定义callback函数(二)

前端代码,Javascript:

<script>
//jsonp回调方法,一定要写在jsonp请求前面
function testjson(txt){
alert(txt);
}
</script>
<script src ="/demo/testJsonp.shtml?callback=testjson" type="text/javascript" ></script>

后端代码,Java:

/**
* jsonp 测试
* @return
*/
@RequestMapping(value="testJsonp",method=RequestMethod.GET)
@ResponseBody
public String testJsonp(String callback){
return callback +"('test jsonp');";
}

JSONP for Java ,jQuery Ajax请求

前端代码,Javascript:

<script>
var testjsonp = function(data){
for(var i in data){
alert( i +":" + data[i]);
};
}
var demoJSONP = function () {
//nowIp() 为获取当前的IP,这个函数是我自己的。
$.getScript("https://open.onebox.so.com/dataApi?type=ip&src=onebox&tpl=0&num=1&query=ip&url=ip&ip="+nowIp()+"&callback=testjsonp");
}
</script>

 

本站所有资源来源于用户上传和网络,且仅作为演示数据并供学习和交流使用,版权归原作者所有,如有侵权请邮件联系站长!
Zadmei资源分享 » SONP是一种使用模式,人们常常把JSONP和JSON混淆