Page 173 - AngularJS权威教程

16.2 JSONP 153

1

第16章 2

XHR实践
3

4

5
16.1 跨域和同源策略

浏览器在全局层面禁止了页面加载或执行与自身来源不同的域的任何脚本。 6

同源策略允许页面从同一个站点加载和执行特定的脚本。浏览器通过对比每一个资源的协议、
主机名和端口号来判断资源是否与页面同源。站外其他来源的脚本同页面的交互则被严格限制。 7
跨域资源共享（Cross Origin Resource Sharing，CORS）是一个解决跨域问题的好方法，从而
可以使用XHR从不同的源加载数据和资源。 8

幸好，除CORS以外还有几个方法可以用来从外部的数据源将数据加载到应用中。我们将详
细介绍其中的两种，第三种只会简要介绍（因为它需要服务器端的额外支持）： 9

 JSONP
 CORS 10
 服务器代理
11

16.2 JSONP
12
JSONP是一种可以绕过浏览器的安全限制，从不同的域请求数据的方法。使用JSONP需要服
务器端提供必要的支持。
13
JSONP的原理是通过<script>标签发起一个GET请求来取代XHR请求。JSONP生成一个
<script>标签并插到DOM中，然后浏览器会接管并向src属性所指向的地址发送请求。
14
当服务器返回请求时，响应结果会被包装成一个JavaScript函数，并由该请求所对应的回调函
数调用。
15
AngularJS在$http服务中提供了一个JSONP辅助函数。通过$http服务的jsonp方法可以发送
请求，如下所示：
16
$http
.jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) {
// 数据 17
});
当请求被发送时，AngularJS会在DOM中生成一个如下所示的<script>标签：
18