使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup

核心提示： 克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据，使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup(2)，脚本加载时它开始执行，该方法是可行的，以调用该函数：sh

克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。幸运的是，通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

JSON 和 JSONP

JSON 是用于在浏览器和服务器之间交换信息的轻量级数据格式（与 XML 相比）。JOSON 依赖于 JavaScript 开发人员，因为它是 JavaScript 对象的字符串表示。例如，假设有一个含两个属性的 ticker 对象：symbol 和 price。这是在 JavaScript 中定义 ticker 对象的方式：

var　ticker　=　{symbol:　'IBM',　price:　91.42};

并且这是它的 JSON 表示方式：

{symbol:　'IBM',　price:　91.42}

清单 1 定义了一个 JavaScript 函数，调用该函数时会显示 IBM 的股价。（我们没有详细介绍如何将该函数添加到 Web 页面）。

清单 1. 定义 showPrice 函数

function　showPrice(data)　{　
　　alert("Symbol:　"　+　data.symbol　+　",　Price:　"　+　data.price);　
}　

可以将 JSON 数据作为参数传递，以调用该函数：

showPrice({symbol:　'IBM',　price:　91.42});　//　alerts:　Symbol:　IBM,　Price:　91.42　

现在准备将这两个步骤包含到 Web 页面，如清单 2 所示。

清单 2. 在 Web 页面中包含 showPrice 函数和参数

<script　type="text/javascript">　
function　showPrice(data)　{　
　　alert("Symbol:　"　+　data.symbol　+　",　Price:　"　+　data.price);　
}　
</script>　
<script　type="text/javascript">showPrice({symbol:　'IBM',　price:　91.42});</script>　

编缉推荐阅读以下文章

• 使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup