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

来源：互联网发布：cgwang插画网络编辑：程序博客网时间：2024/05/01 01:05

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

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

using System.Collections.Generic;using System.ServiceModel;using System.ServiceModel.Web;namespace Artech.WcfServices.Service.Interface{    [ServiceContract]    public interface IEmployees    {        [WebGet(UriTemplate = "all",ResponseFormat =WebMessageFormat.Json)]              IEnumerable<Employee> GetAll();    }    public class Employee    {        public string Id { get; set; }        public string Name { get; set; }        public string Department { get; set; }        public string Grade { get; set; }    }}

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

using System.Collections.Generic;using Artech.WcfServices.Service.Interface;namespace Artech.WcfServices.Service{    public class EmployeesService : IEmployees    {        public IEnumerable<Employee> GetAll()        {            return new List<Employee>            {                new Employee{ Id = "001", Name="张三", Department="开发部", Grade = "G6"},                    new Employee{ Id = "002", Name="李四", Department="人事部", Grade = "G7"},                 new Employee{ Id = "003", Name="王五", Department="销售部", Grade = "G8"}            };        }    }}

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

<configuration>  <system.serviceModel>    <standardEndpoints>      <webHttpEndpoint>        <standardEndpoint crossDomainScriptAccessEnabled="true"/>      </webHttpEndpoint>    </standardEndpoints>    <bindings>      <webHttpBinding>        <binding crossDomainScriptAccessEnabled="true" />      </webHttpBinding>    </bindings>    <services>            <service name="Artech.WcfServices.Service.EmployeesService">        <endpoint kind="webHttpEndpoint"                   address="http://127.0.0.1:3721/employees"                  contract="Artech.WcfServices.Service.Interface.IEmployees"/>      </service>    </services>  </system.serviceModel></configuration>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>员工列表</title>
    <style type="text/css">
        body
        {
            font-size: 12px;
            text-align: center;
        }
        #employees
        {
            border: 1px solid #000000;
            margin: 10px auto;
            background-color: #eee;
        }
        #employees tr
        {
            line-height: 23px;
        }
        #employees th
        {
            background-color: #ccc;
            color: #fff;
        }
        .oddRow
        {
            background-color: #fff;
        }
    </style>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "get",
                url: "http://127.0.0.1:3721/employees/all",
                dataType: "jsonp",
                success: function (employees) {
                    $.each(employees, function (index, value) {
                        var detailUrl = "detail.html?id=" + value.Id;
                        var html = "<tr><td>";
                        html += value.Id + "</td><td>";
                        html += "<a href='" + detailUrl + "'>" + value.Name + "</a></td><td>";
                        html += value.Grade + "</td><td>";
                        html += value.Department + "</td></tr>";
                        $("#employees").append(html);
                    });
                    $("#employees tr:odd").addClass("oddRow");
                }
            });

});

}

    </script>
</head>
<body>
    <table id="employees" width="600px">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>级别</th>
            <th>部门</th>
        </tr>
    </table>
      </p>
      <div>
          文章标题：<input type="text" id="title" />
          <br />
          文章内容：<textarea id="content"></textarea>
          <input type="hidden" id="id" value="1" /><br />
          <input type="button" value="提交" onclick="callServer();" />
      </div>

</body>
</html>

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