将 WCF 数据服务、JSONP 和 jQuery 结合使用

Gil Fink

5.00/5 (1投票)

2011 年 4 月 25 日

CPOL

2分钟阅读

23434

一个简单的例子，使用 jQuery 向 WCF 数据服务发起 JSONP 调用。

引言

在 Mike Flasko 在 MIX11 上的会话中，他展示了如何使用 JSONPSupportBehavior 属性创建一个支持 JSONP 的 WCF 数据服务，该属性可以从 MSDN 代码库 (下载) 获取 (并且应该包含在 Microsoft.Data.Services.Extensions 命名空间中)。在本文中，我将展示一个简单的例子，该例子使用该属性和 jQuery 来对 WCF 数据服务进行跨域 JSONP 调用。

设置环境

首先，我创建了两个不同的 ASP.NET Web 应用程序。第一个应用程序包含调用页面，第二个应用程序包含 WCF 数据服务。然后，我在第二个 Web 应用程序中创建了一个 Entity Framework 模型，并从该模型创建了 WCF 数据服务。我还添加了存在于链接中的 JSONPSupportBehavior.cs 类。该类包含 JSONPSupportBehavior 的实现，它实现了 WCF IDispatchMessageInspector 接口。此外，它还包含 JSONPSupportBehaviorAttribute，我在代码中使用它。代码很简单，如下所示

[JSONPSupportBehavior] 
public class SchoolDataService : DataService<SchoolEntities>
{
  // This method is called only once to initialize service-wide policies.
  public static void InitializeService(DataServiceConfiguration config)
  {      
    config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);      
    config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
  }
}

发起 JSONP 调用

在第二个 Web 应用程序中，我创建了一个 Web 表单，该表单将包含 JSONP 调用示例。这是发起调用的代码

<!DOCTYPE html>
<html>
<head runat="server">
    <title>JSONP Call</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" 
                type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <output id="result">
    </output>
    </form>
    <script type="text/javascript">
        $.getJSON('https://:23330/SchoolDataService.svc/' + 
                  'Courses?$format=json&$callback=?', 
        function (response) { 
            $.each(response.d, function (index, value) {
                var div = document.createElement('div');
                div.innerHTML = value.Title;
                $('#result').append(div);
            })
        });        
    </script>
</body>
</html>

让我们探索 Web 表单代码：首先，我使用 Microsoft CDN 来检索 jQuery 库。然后，我创建一个 HTML5 输出元素，以便将调用的输出附加到该元素。在主脚本中，我使用 jQuery 的 getJSON 函数，该函数正在调用 WCF 数据服务。请注意，为了从 WCF 数据服务获取 JSON 响应，您需要使用 $format=json 查询字符串参数。在检索到数据后，我迭代并为检索到的每个课程标题创建一个 div 元素。这是在 getJSON 函数调用中连接的成功函数中完成的。这是运行代码的输出

摘要

在本文中，我提供了一个使用 jQuery 向 WCF 数据服务发起 JSONP 调用的简单示例。这种解决方案可以帮助您从客户端消费存在于其他域中的 WCF 数据服务。在后续文章中，我将展示使用新的 datajs 库的相同示例。