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

一个通过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页面，会得到如下所示的员工列表。

【转载】一个通过JSONP跨域调用WCF REST服务的例子（以jQuery为例）相关推荐

jquery跨域调用wcf
使用jquery跨域调用wcf服务的时候会报如下错误 1 $.ajax({ 2 url: 'http://localhost:28207/Service1.svc/GetData', 3 method ...
使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScrip ...
WCF 4.0 REST Service JSON跨域调用
最近在项目中用到了 WCF4.0 REST.在跨域调用时走了不少弯路,查了不少技术强人的文章,其实它真的就这么容易.好了不废话了直接贴代码. 调用的服务类: 1 [ServiceContra ...
linux c调用wcf服务,Silverlight+WCF实现跨域调用
在这篇文章中,WCF扮演服务器,向外提供LoginVaild服务:Silverlight扮演客户端,调用WCF提供的LoginVaild服务.思路有了,下面进行代码实现. 数据库脚本实现新建T_Us ...
Jquery跨域调用(JSONP)遇到error问题的解决
2019独角兽企业重金招聘Python工程师标准>>> 之前Jquery的跨域调用一直没有解决,不知道为什么老是执行error里的语句,今天花了点时间研究了一下,终于把问题解决了. ...
java jquery jsonp 跨域_Jquery跨域调用(JSONP)遇到error问题的解决
之前Jquery的跨域调用一直没有解决,不知道为什么老是执行error里的语句,今天花了点时间研究了一下,终于把问题解决了. 关键的地方是返回的字符串,返回的字符串必须包含jsonp的回调函数名称,而 ...
JSONP跨域jQuery处理整理（附天气数据实例）
写在前面跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...
jsonp跨域ajax跨域get方法
原理: 就是利用<script >标签没有跨域限制的,从而达到与第三方网站通讯的目的.当需要通讯时,本站脚本创建一个<script>标签,src地址指向第三方网站的的一个网址. ...
jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...

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

【转载】一个通过JSONP跨域调用WCF REST服务的例子（以jQuery为例）相关推荐

最新文章

热门文章