歡迎您光臨深圳塔燈網絡科技有限公司！

余先生：13699882642

8年

專注物流供應鏈系統

網站百科

為您解碼網站建設的點點滴滴

首頁 > > 網站建設知識 > 建站知識 > 開發語言

企業建站知識推廣知識小程序微信營銷 APP開發前端設計 MindManager 開發語言自媒體

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

發表日期：2019-09 文章編輯：小燈瀏覽次數：2148

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: }

在如下所示的服務類型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: }

我們通過控制臺程序對服務進行寄宿。從下面的配置可以看到我們采用了標準終結點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>

在客戶端，我們在一個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>

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

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/19693.html

上一篇：<WCF REST系列文章匯總（共9篇）下一篇：通過擴展改善ASP.NET MVC的驗證機制[實現篇]>