上面的步骤是不是有点麻烦,除了自定义函数需要根据不同业务逻辑而变化,其他步骤全部都是一样,所以这些基本上可以提取出来重用。
好在jquery提供了这样的机制。点击页面上的第二个按钮,实现了同样的功能,但是用了3行代码(onClickCrossJSONP函数中的实现),其他的工作jquery帮我们做了。我们只需要在$.getJSON的url参数中添加一个回调参数,值用问号“?”代替,如下:
这样jquery框架会自动填充一个唯一的函数名称,也就是后面匿名回调函数的名称,http抓包显示如下:
$.getScript跨域
最后,捎带说明一下$.getScript函数,用法与getJSON类似,只不过它可以直接和js文件交互,而不是cgi,列子如上,需要在B站点根目录下添加alert.js文件,如下:
// 定义函数 function cross() { alert(\'cross domain execute\'); } // 调用函数 cross();点击A站点首页的第三个按钮,可以发现弹出了三次对话框,说明getScript加载js后,会执行它,然后回调函数的中也可以调用相关函数和对象。
总结
浏览器同源策略是基于安全的考虑强制执行
跨域方法:1)代理; 2)JSONP两种方式进行跨域操作(推荐)
jquery框架的$.getJSON可以简化JSONP的实现过程
JSONP需要CGI做出调整,返回的数据必须是js代码(函数调用),而不是json数据。
参考资料
令人头痛的Cross-Domain AJAX
Cross-domain communications with JSONP, Part 1: Combine JSONP and jQuery to quickly build powerful mashups
通过JSONP实现完美跨域