博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
阅读量:5938 次
发布时间:2019-06-19

本文共 3516 字,大约阅读时间需要 11 分钟。

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
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
GetAll()
8:         {
9:             return new List
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: 
2:   
3:     
4:       
5:         
6:       
7:     
8:     
9:       
10:         
11:       
12:     
13:     
14:       
15:         
16:                   address="http://127.0.0.1:3721/employees"
17:                   contract="Artech.WcfServices.Service.Interface.IEmployees"/>
18:       
19:     
20:   
21: 

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

1: 
2: 
3:   
4:     员工列表
5:     
6:        ...
7:     
8:     
9:     
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 = "";
19:                         html += value.Id + "";
20:                         html += "" + value.Name + "";
21:                         html += value.Grade + "";
22:                         html += value.Department + "";
23:                         $("#employees").append(html);
24:                     });
25:                     $("#employees tr:odd").addClass("oddRow");
26:                 }
27:             });
28:         });
29:      
30:   
31:   
32:     
33:         
34:             ID
35:             姓名
36:             级别
37:             部门
38:         
39:     
40: 
41: 

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

作者:蒋金楠
微信公众账号:大内老A
微博:
如果你想及时得到个人撰写文章以及著作的消息推送,或者想看看个人推荐的技术资料,可以扫描左边二维码(或者长按识别二维码)关注个人公众号(原来公众帐号
蒋金楠的自媒体将会停用)。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
你可能感兴趣的文章