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

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页面,会得到如下所示的员工列表。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT技术精选文摘

ZooKeeper 分布式锁实现

17920
来自专栏犀利豆的技术空间

徒手撸框架--实现 RPC 远程调用

微服务已经是每个互联网开发者必须掌握的一项技术。而 RPC 框架,是构成微服务最重要的组成部分之一。趁最近有时间。又看了看 dubbo 的源码。dubbo 为了...

16620
来自专栏蓝天

使用可重入函数进行更安全的信号处理

在早期的编程中,不可重入性对程序员并不构成威胁;函数不会有并发访问,也没有中断。在很多较老的 C 语言实现中,函数被认为是在单线程进程的环境中运行。

9420
来自专栏大内老A

WCF技术剖析之二十五: 元数据(Metadata)架构体系全景展现[元数据描述篇]

在[WS标准篇]中我花了很大的篇幅介绍了WS-MEX以及与它相关的WS规范:WS-Policy、WS-Transfer和WSDL,因为WCF元数据结构体系完全是...

18480
来自专栏郭霖

Android Volley完全解析(三),定制自己的Request

经过前面两篇文章的学习,我们已经掌握了Volley各种Request的使用方法,包括StringRequest、JsonRequest、ImageRequest...

23860
来自专栏JavaEdge

用弱引用堵住内存泄漏全局 Map 造成的内存泄漏找出内存泄漏HPROF 输出,显示 Map.Entry 对象的分配点弱引用WeakReference.get() 的一种可能实现用 WeakHashMa

36450
来自专栏向上的小草

mybati缓存机制之一级缓存

  在月黑风高的某天夜晚,boss chen语重心长的发条了消息给小草说:“小草啊,是时候写写博客来记录平常自己积累的东西了......”。小草一听,平常没有写...

28800
来自专栏CDA数据分析师

工具 | 很全的 Python 面试题

Python语言特性 1 Python的函数参数传递 看两个例子: ? 所有的变量都可以理解是内存中一个对象的“引用”,或者,也可以看似c中void*的感觉。 ...

1.4K90
来自专栏编程

身为程序猿,怎能不懂RegExp?

正则表达式是程序猿的好朋友。这体现在两个方面:一、在我们敲的代码里面,可以用正则表达式非常轻巧、灵便、快捷的完成字符串的操作,比如匹配、搜索、提取子串等。二、我...

21950
来自专栏机器学习从入门到成神

java.lang.StackOverflowError异常解决

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

1.8K20

扫码关注云+社区

领取腾讯云代金券