天天看点

jsoup详解 同源策略 script标签的跨域能力 利用script获取不同源的json 利用script获取异域的jsonp 利用jQuery获取jsonp 总结

json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。

一个端口是2698,一个2701,按照定义它们是不同源的。

jsoup详解 同源策略 script标签的跨域能力 利用script获取不同源的json 利用script获取异域的jsonp 利用jQuery获取jsonp 总结

在2698端口的网页上添加一个按钮,click事件随便发起两个向端口为2701域的请求。

根据同源策略,很明显会悲剧了。浏览器会阻止,根本不会发起这个请求。(not allowed by access-control-allow-origin)

ok,原来jsonp是要解决这个问题的。

回到我们的2698端口的网页,上面我们在click事件里有一个对2701端口域的jquery文件的请求,这次使用script标签来请求。

当然,200,ok了

jsoup详解 同源策略 script标签的跨域能力 利用script获取不同源的json 利用script获取异域的jsonp 利用jQuery获取jsonp 总结

同样是端口2698的网页发起对2701域的请求,放在script里设置scr属性的ok了,另一个方式就悲剧。利用script的跨域能力,这就是jsonp的基础。

既然它叫jsonp,很明显目的还是json,而且是跨域获取。根据上面的分析,很容易想到:利用js构造一个script标签,把json的url赋给script的scr属性,把这个script插入到dom里,让浏览器去获取。实践:

添加一个按钮事件来测试一下:

jsoup详解 同源策略 script标签的跨域能力 利用script获取不同源的json 利用script获取异域的jsonp 利用jQuery获取jsonp 总结

首先,第一个浏览器,http://localhost:2701/home/somejson这个url的确是存在一个json的,而且在 2698网页上用script标签来请求这个2701这个url也是200ok的,但是最下面报js语法错误了。原来用script标签加载完后,会立即 把响应当js去执行,很明显{"email":"[email protected]","remark":"我来自遥远的东方"}不是合法的js语句。

显然,把上面的json放到一个回调方法里是最简单的方法。例如,变成这样:

jsoup详解 同源策略 script标签的跨域能力 利用script获取不同源的json 利用script获取异域的jsonp 利用jQuery获取jsonp 总结

如果存在jsonpcallback这个方法,那么jsonpcallback({"email":"[email protected]","remark":"我来自遥远的东方"})就是合法的js语句。

由于服务器不知道客户端的回调是什么,不可能hard code成jsonpcallback,所以就带一个querystring让客户端告诉服务端,回调方法是什么,当然,querystring的key要遵从服务端的约定,上面的是”callback“。

添加回调函数:

把前面的方法稍微改改参数:

jsoup详解 同源策略 script标签的跨域能力 利用script获取不同源的json 利用script获取异域的jsonp 利用jQuery获取jsonp 总结

200ok,服务器返回jsonpcallback({"email":"[email protected]","remark":"我来自遥远的 东方"}),我们也写了jsonpcallback方法,当然会执行。ok顺利获得了json。没错,到这里就是jsonp的全部。

上面的方式中,又要插入script标签,又要定义一个回调,略显麻烦,利用jquery可以直接得到想要的json数据,同样是上面的jsonp:

得到的结果跟上面类似。

一句话就是利用script标签绕过同源策略,获得一个类似这样的数据,jsonpcallback是页面存在的回调方法,参数就是想得到的json。

jsonpcallback({"email":"[email protected]","remark":"我来自遥远的东方"})

继续阅读