JSONP

JSONP 示例演示如何在 WCF REST 服务中使用填充(JSONP)来支持 JSON。 JSONP 是一种约定,用于通过在当前文档中生成脚本标记来调用跨域脚本。 结果在指定的回调函数中返回。 JSONP 基于这样的想法:例如 <script src="http://..." > 这样的标记可以从任何域中评估脚本,被这些标记检索到的脚本是在其他函数可能已被预定义的环境中运行的。

演示

使用 JSONP 的跨域脚本。

讨论

示例包括一个网页,该网页在浏览器中呈现后会动态添加脚本块。 此脚本块调用一个具有单个操作的 WCF REST 服务 GetCustomer。 WCF REST 服务返回客户的名称和地址,并将其包装在一个回调函数名中。 WCF REST 服务响应时,将使用客户数据调用网页上的回调函数,回调函数在网页上显示数据。 脚本标记的注入和执行回调函数由 ASP.NET AJAX ScriptManager 控件自动处理。 使用模式与所有 ASP.NET AJAX 代理相同,添加一行以启用 JSONP,如以下代码所示:

var proxy = new JsonpAjaxService.CustomerService();
proxy.set_enableJsonp(true);
proxy.GetCustomer(onSuccess, onFail, null);

网页可以调用 WCF REST 服务,因为服务使用了 WebScriptEndpoint,将 crossDomainScriptAccessEnabled 设置为 true。 这两种配置都是在 Web.config 文件中的< system.serviceModel 元素>下完成的。

<system.serviceModel>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
  <standardEndpoints>
    <webScriptEndpoint>
      <standardEndpoint name="" crossDomainScriptAccessEnabled="true"/>
    </webScriptEndpoint>
  </standardEndpoints>
</system.serviceModel>

ScriptManager 管理与服务的交互,并隐藏手动实现 JSONP 访问的复杂性。 当 crossDomainScriptAccessEnabled 设置为 true 并且操作的响应格式为 JSON 时,WCF 基础结构会检查请求 URI 中的回调查询字符串参数,并使用回调查询字符串参数的值包装 JSON 响应。 在示例中,网页使用以下 URI 调用 WCF REST 服务。

http://localhost:33695/CustomerService/GetCustomer?callback=Sys._json0

由于回调查询字符串参数的值为 JsonPCallback,WCF 服务返回以下示例所示的 JSONP 响应。

Sys._json0({"__type":"Customer:#Microsoft.Samples.Jsonp","Address":"1 Example Way","Name":"Bob"});

此 JSONP 响应包含格式化为 JSON 的客户数据,该数据用网页请求的回调函数名称包装。 ScriptManager 将使用脚本标记执行此回调以完成跨域请求,然后将结果传递给 onSuccess 处理程序,该处理程序会传递给 ASP.NET AJAX 代理的 GetCustomer 操作。

此示例由两个 ASP.NET Web 应用程序组成:一个应用程序只包含一个 WCF 服务,另一个包含调用服务的 .aspx 网页。 运行解决方案时,Visual Studio 将在不同的端口上托管两个网站,从而创建服务和客户端位于不同域的环境。

运行示例

  1. 打开 JSONP 示例的解决方案。

  2. F5 在浏览器中启动 http://localhost:26648/JSONPClientPage.aspx

  3. 请注意,页面加载后,“名称”和“地址”的文本输入由值填充。 这些值是在浏览器完成呈现页面后从对 WCF 服务的调用提供的。