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

核心提示： 加载页面后，应该看如图 1 所示的警告，使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup(3)，图 1. IBM ticker至此，本文已展示了如何将静态 JSON 数据作为参数调用 JavaScript 函数，动态插入的 Java

加载页面后，应该看如图 1 所示的警告。

图 1. IBM ticker

至此，本文已展示了如何将静态 JSON 数据作为参数调用 JavaScript 函数。不过，通过在函数调用中动态包装 JSON 数据可以用动态数据调用函数，这是一种动态 JavaScript 插入的技术。要查看其效果，将下面一行放入名为 ticker.js 的独立 JavaScript 文件中。

showPrice({symbol:　'IBM',　price:　91.42});

现在改变 Web 页面中的脚本，使其和清单 3 一样。

清单 3. 动态 JavaScript 插入代码

<script　type="text/javascript">　
//　This　is　our　function　to　be　called　with　JSON　data　
function　showPrice(data)　{　
　　alert("Symbol:　"　+　data.symbol　+　",　Price:　"　+　data.price);　
}　
var　url　=　“ticker.js”;　//　URL　of　the　external　script　
//　this　shows　dynamic　script　insertion　
var　script　=　document.createElement('script');　
script.setAttribute('src',　url);　
　
//　load　the　script　
document.getElementsByTagName('head')[0].appendChild(script);　
</script>　

在清单 3 所示的例子中，动态插入的 JavaScript 代码位于 ticker.js 文件中，它将真正的 JSON 数据作为参数调用 showPrice()函数。

编缉推荐阅读以下文章

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