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

核心提示： 首先，假设您的服务在所请求的 URL 中接受了一个名为 callback 的参数，使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup(5)，（参数名不重要，但是客户和服务器必须都同意该名称），清单 6 显示了用 PHP 实现的 JSO

首先，假设您的服务在所请求的 URL 中接受了一个名为 callback 的参数。（参数名不重要，但是客户和服务器必须都同意该名称）。另外假设向服务发送的请求是这样的：

http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=showPrice

在这种情况下，symbol 是表示请求 ticker symbol 的请求参数，而 callback 是 Web 应用程序的回调函数的名称。使用清单 5 所示的代码可以通过 jQuery 的 JSONP 支持调用该服务。

清单 5. 调用回调服务

jQuery.getJSON("http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?",　
function(data)　{　
　　alert("Symbol:　"　+　data.symbol　+　",　Price:　"　+　data.price);　
});　

注意，我们使用 ? 作为回调函数名，而非真实的函数名。因为 jQuery 会用生成的函数名替换 ?。所以您不用定义类似于 showPrice() 的函数。

清单 6 显示了用 PHP 实现的 JSONP 服务的一段代码。

清单 6. 用 PHP 实现的 JSONP 服务的代码片段

$jsonData　=　getDataAsJson($_GET['symbol']);　
echo　$_GET['callback']　.　'('　.　$jsonData　.　');';　
//　prints:　jsonp1232617941775({"symbol"　:　"IBM",　"price"　:　"91.42"});　

清单 7 显示了具有同样功能的 Java™ Servlet 方法。

清单 7. 用 Java servlet 实现的 JSONP 服务

@Override　
protected　void　doGet(HttpServletRequest　req,　HttpServletResponse　resp)　
　throws　ServletException,　IOException　{　
　String　jsonData　=　getDataAsJson(req.getParameter("symbol"));　
　String　output　=　req.getParameter("callback")　+　"("　+　jsonData　+　");";　
　
　resp.setContentType("text/javascript");　
　　　　　　
　PrintWriter　out　=　resp.getWriter();　
　out.println(output);　
　//　prints:　jsonp1232617941775({"symbol"　:　"IBM",　"price"　:　"91.42"});　
}　

编缉推荐阅读以下文章

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