jquery Ajax 跨域请求（ jsonp）

“Same-Origin Policy”（同源策略）

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。

这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。

 

什么是跨域？

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

具体策略限制情况可看下表：

URL	说明	允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://127.0.0.100/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许
http://www.a.com/a.js http://www.b.com/b.js	不同域名	不允许

jsonp的优点和缺点：

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

 

在jQuery中如何通过JSONP来跨域获取数据

 第一种方法是在ajax函数中设置dataType为'jsonp'： 

1. $.ajax({
2.         dataType: 'jsonp',
3.         url: 'http://www.a.com/user?id=123',
4.         success: function(data){
5.                 //处理data数据
6.         }
7. });

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可： 

1. $.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
2.         //处理data数据
3. });

第三种方法是可以简单地使用getScript方法：

1. //此时也可以在函数外定义foo方法
2. function foo(data){
3.         //处理data数据
4. }
5. $.getScript('http://www.a.com/user?id=123&callback=foo');

 

转载于:https://www.cnblogs.com/cmogu/p/4495111.html