38-讨论

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

16.9.3　讨论

当构建网站或者应用程序时安全是一个关键问题，在Ajax出现之后更是如此。Web浏览器对于请求强制实施同源策略，这意味着请求被限制为与页面URL相同的域或者当前域的子域。例如， http://www.example.com上的一个页面允许发出对 http://www.example.com和 http://x.www.example.com的Ajax请求，但是不能对 http://example.com或 http://y.example.com发出请求。随着语义Web的发展以及Flickr等网站开始为其他用户和服务提供API以便使用，Web浏览器实施的安全策略成为了一个障碍。从不使用同源策略的领域之一是带有 src 属性的脚本元素。http://www.example.com上的网页可以包含一个来自 http://static.example2.com的脚本，但是动态包含脚本和管理程序流程成为一个问题。因此，JSONP发展为克服同源限制的一个标准。

警告

重要的是，这里概述的一些方法是不安全的，可能导致潜在的安全问题。一定要确保数据源是可信任的。而且，当在页面中包含脚本元素时，整个脚本将有权访问整个HTML DOM和它所包含的私有或者敏感数据。恶意脚本有可能将这些数据发送给不受信任的一方，要采取将脚本放入沙箱等预防措施。扩展的安全性超出了本秘诀的范围，但是我们希望确保你意识到这个问题。

JSONP通过带有 src 属性的 <script> 标记使用请求数据，开发人员可以实现一个回调函数包装数据，管理程序流程。首先看一条简单的JSON消息。

{"title":"Hello World!","body":"It's great to be alive!"}

下面是回调中包装的相同消息：

myCallback({"title":"Hello World!","body":"It's great to be alive!"})

当请求的资源加载到浏览器中时，将调用 myCallback 函数，以JSON对象作为第一个参数。开发者可以实现如下 myCallback 函数来处理数据：

function myCallback(json) {
　　 alert( json.title );
}

现在回顾一下Flickr解决方案。首先定义Flickr Web服务的URL，然后声明一个 params 对象作为get变量。 jsoncallbcak 参数是一个由Flickr服务定义的特殊参数，允许传入一个函数名。因为已经将该参数设置为 ? ，所以jQuery将自动生成一个函数名称并将其与回调方法绑定。

注意

jQuery通过URL中的 =? 检测JSONP（跨域请求）。不能将这个参数传递给 params 数组。

var url = 'http://www.flickr.com/services/feeds/photos_public.gne?
jsoncallback=?';
var params = { format: 'json' };

接下来，调用jQuery的 $.getJSON() 方法，传入 url 、 params 和回调函数，该函数将接受一个JSON对象。在回调方法中，检查和确保项的数组存在，然后使用jQuery的 $.each() 遍历前三个项，创建一个链接，将图片附加到链接上，再将链接附加到ID为 photos 的一个元素。最后，回调函数将在第三次循环（ i=2 ）时返回 false ，中断循环。

$.getJSON(url, params, function(json) {
　　 if ( json.items ) {
　　　　　$.each( json.items, function(i, n) {
　　　　　　　　 var item = json.items[i];
　　　　　　　 $('<a href="' + item.link + '"></a>')
　　　　　　　　　　.append('<img src="' + item.media.m + '" />')
　　　　　　　　　　.appendTo('#photos');
　　　　　　　 return i < 2;
　　　　　});
　　 }
});

通过组合JSON数据格式和JSONP的跨域能力，Web开发人员可以创建新的应用程序，以创新的方式聚合和转换数据，发展语义Web。

38-讨论

16.9.3 讨论

16.9.3　讨论