一個通過JSONP跨域調用WCF REST服務的例子（以jQuery為例）

ajax 14年前發布 | 6K 次閱讀 Rspamd FF Multi Converter cron4j CodeBunk

JSONP（JSON with Padding）可以看成是JSON的一種“使用模式”，用以解決“跨域訪問”的問題，這篇簡單的文章給出一個簡單的例子用于模擬如何通過jQuery以JSONP的訪問調用一個WCF REST服務。[源代碼從這里下載]

在這個例子中，我們將定義一個用于返回所有員工信息的服務，下面是用于表示員工信息的Employee的類型和契約接口。契約接口IEmployees的GetAll操作用以返回所有員工列表，我們指定了Uri模板并將回復消息格式設置為JSON。

   1: using System.Collections.Generic;
   2: using System.ServiceModel;
   3: using System.ServiceModel.Web;
   4: namespace Artech.WcfServices.Service.Interface
   5: {
   6:     [ServiceContract]
   7:     public interface IEmployees
   8:     {
   9:         [WebGet(UriTemplate = "all",ResponseFormat =WebMessageFormat.Json)]      
  10:         IEnumerable<Employee> GetAll();
  11:     }
  12:     public class Employee
  13:     {
  14:         public string Id { get; set; }
  15:         public string Name { get; set; }
  16:         public string Department { get; set; }
  17:         public string Grade { get; set; }
  18:     }
  19: }
</div>

在如下所示的服務類型EmployeesService 中，我們直接讓服務操作GetAll返回一個包含3個Employee對象的列表。

   1: using System.Collections.Generic;
   2: using Artech.WcfServices.Service.Interface;
   3: namespace Artech.WcfServices.Service
   4: {
   5:     public class EmployeesService : IEmployees
   6:     {
   7:         public IEnumerable<Employee> GetAll()
   8:         {
   9:             return new List<Employee>
  10:             {
  11:                 new Employee{ Id = "001", Name="張三", Department="開發部", Grade = "G6"},    
  12:                 new Employee{ Id = "002", Name="李四", Department="人事部", Grade = "G7"}, 
  13:                 new Employee{ Id = "003", Name="王五", Department="銷售部", Grade = "G8"}
  14:             };
  15:         }
  16:     }
  17: }
</div>

我們通過控制臺程序對服務進行寄宿。從下面的配置可以看到我們采用了標準終結點WebHttpEndpoint。為了讓服務具有跨域支持的能力，我們必須將標準終結點的crossDomainScriptAccessEnabled屬性設置為True。WebHttpBinding也具有同名的屬性，如果直接使用WebHttpBinding也需要將該屬性設置為True。

   1: <configuration>
   2:   <system.serviceModel>
   3:     <standardEndpoints>
   4:       <webHttpEndpoint>
   5:         <standardEndpoint crossDomainScriptAccessEnabled="true"/>
   6:       </webHttpEndpoint>
   7:     </standardEndpoints>
   8:     <bindings>
   9:       <webHttpBinding>
  10:         <binding crossDomainScriptAccessEnabled="true" />
  11:       </webHttpBinding>
  12:     </bindings>
  13:     <services>      
  14:       <service name="Artech.WcfServices.Service.EmployeesService">
  15:         <endpoint kind="webHttpEndpoint" 
  16:                   address="http://127.0.0.1:3721/employees"
  17:                   contract="Artech.WcfServices.Service.Interface.IEmployees"/>
  18:       </service>
  19:     </services>
  20:   </system.serviceModel>
  21: </configuration>
</div>

在客戶端，我們在一個Web頁面中通過jQuery進行Ajax調用這個服務，并將得到的員工列表顯示在一個表格中。出CSS之外的頁面代碼如下所示，需要注意的是在進行Ajax調用的使用將dataType選項設置成“jsonp”，而不是“json”。

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2: <html xmlns="http://www.w3.org/1999/xhtml">
   3:   <head>
   4:     <title>員工列表</title>
   5:     <style type="text/css">
   6:        ...
   7:     </style>
   8:     <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
   9:     <script type="text/javascript">
  10:         $(function () {
  11:             $.ajax({
  12:                 type: "get",
  13:                 url: "http://127.0.0.1:3721/employees/all",
  14:                 dataType: "jsonp",
  15:                 success: function (employees) {
  16:                     $.each(employees, function (index, value) {
  17:                         var detailUrl = "detail.html?id=" + value.Id;
  18:                         var html = "<tr><td>";
  19:                         html += value.Id + "</td><td>";
  20:                         html += "<a href='" + detailUrl + "'>" + value.Name + "</a></td><td>";
  21:                         html += value.Grade + "</td><td>";
  22:                         html += value.Department + "</td></tr>";
  23:                         $("#employees").append(html);
  24:                     });
  25:                     $("#employees tr:odd").addClass("oddRow");
  26:                 }
  27:             });
  28:         });
  29:      </script>
  30:   </head>
  31:   <body>
  32:     <table id="employees" width="600px">
  33:         <tr>
  34:             <th>ID</th>
  35:             <th>姓名</th>
  36:             <th>級別</th>
  37:             <th>部門</th>
  38:         </tr>
  39:     </table>
  40: </body>
  41: </html>
</div>

當服務啟動后在瀏覽器中顯示上面這個Web頁面，會得到如下所示的員工列表。

一個通過JSONP跨域調用WCF REST服務的例子（以jQuery為例）

來自：http://www.cnblogs.com/artech/archive/2012/01/16/jsonp-wcf-rest.html

 本文由用戶 ajax 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
寫博客

博客分類