一个通过JSONP跨域调用WCF REST服务的例子（以jQuery为例）

发布时间：2020-12-16 09:09:49 所属栏目：asp.Net 来源：网络整理

导读：JSONP（JSON with Padding）可以看成是JSON的一种“使用模式”，用以解决“跨域访问”的问题，这篇简单的文章给出一个简单的例子用于模拟如何通过jQuery以JSONP的访问调用一个WCF REST服务。[源代码从这里下载] 在这个例子中，我们将定义一个用于返回所有员

JSONP（JSON with Padding）可以看成是JSON的一种“使用模式”，用以解决“跨域访问”的问题，这篇简单的文章给出一个简单的例子用于模拟如何通过jQuery以JSONP的访问调用一个WCF REST服务。[源代码从这里下载]

在这个例子中，我们将定义一个用于返回所有员工信息的服务，下面是用于表示员工信息的Employee的类型和契约接口。契约接口IEmployees的GetAll操作用以返回所有员工列表，我们指定了Uri模板并将回复消息格式设置为JSON。

   1: using System.Collections.Generic;

   3: using System.ServiceModel.Web;

   5: {

   7:     public interface IEmployees

   9:         [WebGet(UriTemplate = "all",ResponseFormat =WebMessageFormat.Json)]

  11:     }

  13:     {

  15:         string Name { get; set; }

  17:         string Grade { get; set; }

  19: }

在如下所示的服务类型EmployeesService 中，我们直接让服务操作GetAll返回一个包含3个Employee对象的列表。

namespace Artech.WcfServices.Service

   5:     class EmployeesService : IEmployees

   7:         public IEnumerable<Employee> GetAll()

   9:             return new List<Employee>

  11:                 new Employee{ Id = "001",Name="张三",Department="开发部",Grade = "G6"},

  13:                 "003",1)">"王五",1)">"销售部",1)">"G8"}

  15:         }

  17: }

我们通过控制台程序对服务进行寄宿。从下面的配置可以看到我们采用了标准终结点WebHttpEndpoint。为了让服务具有跨域支持的能力，我们必须将标准终结点的crossDomainScriptAccessEnabled属性设置为True。WebHttpBinding也具有同名的属性，如果直接使用WebHttpBinding也需要将该属性设置为True。

2: system.serviceModel>

   6:       </   8:     bindings   9:       webHttpBinding  10:         binding ="true" />

  14:       service name="Artech.WcfServices.Service.EmployeesService"endpoint kind="webHttpEndpoint"

  17:                   contract="Artech.WcfServices.Service.Interface.IEmployees"  18:       service  19:       20:     21: >

在客户端，我们在一个Web页面中通过jQuery进行Ajax调用这个服务，并将得到的员工列表显示在一个表格中。出CSS之外的页面代码如下所示，需要注意的是在进行Ajax调用的使用将dataType选项设置成“jsonp”，而不是“json”。

2: <html xmlns="http://www.w3.org/1999/xhtml">

   4:     <title>员工列表</title>

   6:        ...

   8:     <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>

  10:         $(function () {

  12:                 type: "get",1)" id="lnum13">  13:                 url: "http://127.0.0.1:3721/employees/all",1)" id="lnum14">  14:                 dataType: "jsonp",1)" id="lnum15">  15:                 success: function (employees) {

  17:                         var detailUrl = "detail.html?id=" + value.Id;

  19:                         html += value.Id + "</td><td>";

 + detailUrl + "'>" + value.Name + "</a></td><td>";

  23:                         $("#employees").append(html);

  25:                     $("#employees tr:odd").addClass("oddRow");

  27:             });

  29:      </script>

  31:   <body>

  33:         <tr>

  35:             <th>姓名</th>

  37:             <th>部门</th>

  39:     </table>

  41: </html>

当服务启动后在浏览器中显示上面这个Web页面，会得到如下所示的员工列表。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!