简介越来越多的网站需要相互协作。例如，在线房屋租赁网站需要谷歌地图的支持，以显示特定租赁房屋的位置。为了满足这样的需求，已经出现了各种各样的 mashup。mashup 是一种将不同供应商的数据或组件集成起来，使之更加有用或更用户化的 Web 应用程序。Mashup（或协作功能）被认为是 Web 2.0 的重要组成部分。
出人意料的是，将异步的 JavaScript、XML (Ajax) 和 mashup 结合起来并不容易。由于浏览器施加的安全限制，让页面上的不同小部件彼此之间相互通信比较麻烦。通常，您可以通过在服务器端设置一个代理来解决此问题，该方法是不可扩展的。本文中，将了解客户端上针对跨域通信和数据传输的其他一些解决方案。
安全限制同源策略 (SOP) 可防止从一个来源加载的脚本获取或操纵来自另一来源的文档的属性或方法。术语来源 是域名、应用程序协议和运行脚本文档的端口的结合。可能存在关于 SOP 概念的一些误解；SOP 指只能从站点 A、不能从站点 B 获取信息。您需要知道在 SOP 限制下可以做什么，不可以做什么。
SOP 限制例如，来自源点 A 的 Web 页面可以：
- 从源点 B 获取脚本、CSS 样式表或图像
- 包含一个指向源点 B 中页面的 iframe/frame。
- 使用 HTML 元素的 src 属性（比如iframe 或img）将信息发送到源点 B 。
来自源点 A 的 Web 页面不可以：
- 对源点 B 进行 Ajax 调用
- 读取或操纵 iframe/frame 中指向页面 B 的内容
为什么会这样做呢？主要是为了保护用户的重要信息。假设如下：如果某个用户与供应商交互，并且不希望提交到站点的任何信息被泄露到其他站点。这种约束限制了不同站点之间的协作，但可以保护用户免受潜在的恶意攻击。
解决这个问题有很多方法。例如，JSONP 利用了 Web 页面可以从任何源码中下载脚本的能力。但 JSONP 有两个主要的限制：它与 Ajax 调用一样没有错误处理机制，并且脚本标记请求要使用 Get method，其中对长度有所限制。（有关 JSONP 的更多信息，请参阅 部分）。
以下各小节探讨了针对跨域通信和数据传输的客户端解决方案。每个解决方案都有其优点和缺点；应用程序场景在很大程度上会影响您的选择。
跨子域的解决方案如果源点 A 和 B 共享相同的超级域，那么更改 document.domain 属性可以使两个文档轻松进行互访。在 HTML 规范中，document.domain 是只读属性；目前的大多数浏览器允许将它设置成超级域（而不是顶级域）。例如，一个 URL 为 www.myapp.com/index.html 的文档可以将其域名设置为 myapp.com，而另一个来自 sample.myapp.com/index2.html 的文档也可以将域名设置为 myapp.com。图 1 显示了document.domain 的作用方式。
图 1. document.domain 利用跨子域的解决方案，不同子域的源点可以在相同超级域下进行通信，这不是 SOP 限制。但是，严格地说，跨子域的解决方案最适合 intranet 应用程序。 |
