jsonp跨域原理
原理:因为通过script标签引入的js是不受同源策略的限制的(比如baidu.com的页面加载了google.com的js)。所以我们可以通过script标签引入一个js或者一个其他后缀形式(如PHP,JSP等)的文件,此文件返回一个js函数的调用,如返回JSONP_getUsers(["paco","john","lili"]),也就是说此文件返回的结果调用了JSONP_getUsers函数,并且把["paco","john","lili"]传进去,这个["paco","john","lili"]是一个用户列表。那么如果此时我们的页面中有一个JSONP_getUsers函数,那么JSONP_getUsers就被调用到,并且传入了用户列表。此时就实现了在本域获取了其他域数据的功能,也就是跨域。
- //本域为baidu.com
- <script>
- function JSONP_getUsers(users){
- console.dir(users);
- }
- </script>
- //加载google.com的getUsers.php
- <script src="http://www.google.com/getUsers.php"></script>
- 需要google.com提供支持,getUsers.php代码如下:
-
- <?php>
- echo 'JSONP_getUsers(["paco","john","lili"])';//返回一个js函数的调用
- ?>
-
为什么script标签引入的文件不受同源策略的限制?因为script标签引入的文件内容是不能够被客户端的js获取到的,不会影响到被引用文件的安全,所以没必要使script标签引入的文件遵循浏览器的同源策略。而通过ajax加载的文件内容是能够被客户端js获取到的,所以ajax必须遵循同源策略,否则被引入文件的内容会泄漏或者存在其他风险。
JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求(虽然采用post+动态生成iframe是可以达到post跨域的目的,但这样做是一个比较极端的方式,不建议采用)。一般get请求能完成所有功能。比如如果需要给其他域服务器传送参数可以在请求后挂参数(注意不要挂隐私数据),即
- <script src="http://www.google.com/getUsers.php?flag=do&time=1"></script>。
一般能够用JSONP实现跨域就用JSONP实现,这也是前端用的最多的跨域方法。