作为入门级菜鸟,之前一直以为jsonp只是json多个p的别名,惭愧惭愧。
jsonp只是json的一种使用模式,是json with Padding的简称,用来实现跨域访问后台数据。
为了安全浏览器都采用了同源策略,所谓同源是指,域名,协议,端口相同。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
大体分为以下情况:
在https://www.jianshu.com调用https://www.jianshu.com/json/——不会跨域
在https://www.jianshu.com 调用http://www.caoliu.com/json/——域名不同,跨域
在https://www.jianshu.com调用https://joke.jianshu.com/search_joke.com.html ——不同二级域名,跨域
在https://www.jianshu.com:8888调用https://www.jianshu.com:8080——端口不同,跨域
在https://www.jianshu.com调用http://www.jianshu.com ——请求协议不同,跨域的
在http://40.128.2.3调用http://40.128.2.3——IP不同,跨域
在http://localhost调用http://127.0.0.1 ——属于域名不同,跨域
直接用JavaScript写的话,需要先定义好请求返回数据的回调处理函数,然后在js中加入script标签,像这样
<script>
//js中声明 jsonp回调方法,一定要写在jsonp请求前面
function callback(txt){
alert(txt);
}
</script>
<script src ="/demo/testJsonp.shtml" type="text/javascript" ></script>
后端代码中,返回调用
/**
* jsonp 测试
* @return
*/
@RequestMapping(value="testJsonp",method=RequestMethod.GET)
@ResponseBody
public String testJsonp(){
return "callback('test jsonp');";
}
返回调用了js中的回调函数,页面alert “test jsonp”.
或者在请求中添加回调参数,
<script>
//js中,jsonp回调函数
function testjson(txt){
alert(txt);
}
</script>
<script src ="/demo/testJsonp.shtml?callback=testjson" type="text/javascript" ></script>
后端代码中调用参数中提供的函数进行回调:
/**
* jsonp 测试
* @return
*/
@RequestMapping(value="testJsonp",method=RequestMethod.GET)
@ResponseBody
public String testJsonp(String callback){
return callback +"('test jsonp');";
}
这样我们可以利用动作触发向页面dom中添加<script>标签的方式完成跨站请求,当然,可以使用jQuery的代码实例:
<script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
alert(data);
});
</script>
上面代码还是需要分开写,还是比较麻烦,jquery还提供了jsonp方式跨域请求:
服务端代码不变,js代码如下:最简单的方式,只需配置一个dataType:'jsonp',就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式,可以看发起的请求路径,自动带了一个callback=xxx,xxx是jquery随机生成的一个回调函数名称。
这里的success就跟上面的showData一样,如果有success函数则默认success()作为回调函数。
<script>
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: "http://localhost:9090/student",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
success: function (data) {
var result = JSON.stringify(data); //json对象转成字符串
$("#text").val(result);
}
});
});
});
</script>
jQuery实现jsonp调用细节可以参考https://www.cnblogs.com/chiangchou/p/jsonp.html,用不到的同学可以不深究。
最后:jQuery ajax方式以jsonp类型发起跨域请求,其原理跟<script>脚本请求一样,因此使用jsonp时也只能使用GET方式发起跨域请求。需要使用其他方式进行跨站请求的小伙伴可以换一种方式了。另外,跨域请求需要服务端配合,设置callback,才能完成跨域请求。
本文参考文章:
https://www.sojson.com/json/json_jsonp.html
http://www.runoob.com/json/json-jsonp.html
https://www.cnblogs.com/chiangchou/p/jsonp.html