您的位置：首页 > Web前端 > JQuery

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

2012-01-16 21:17 1056 查看

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

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

[code]      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; }

         }

     }

[/code]

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

[code]
     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"}

                 };

             }

         }

     }

[/code]

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

[code]
     <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>

[/code]

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

[code]
     <!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">

            ...

         </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>

     </body>

     </html>

[/code]

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航