jQuery以JSONP的访问调用一个WCF REST服务

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.Interface5: {6:     [ServiceContract]7:     public interface IEmployees8:     {9:         [WebGet(UriTemplate = "all",ResponseFormat =WebMessageFormat.Json)]      10:         IEnumerable<Employee> GetAll();11:     }12:     public class Employee13:     {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.Service4: {5:     public class EmployeesService : IEmployees6:     {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调用这个服务，并将得到的员工列表显示在一个表格中。

注意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>

转载于:https://www.cnblogs.com/besuccess/articles/3489514.html

jQuery以JSONP的访问调用一个WCF REST服务相关推荐

使用SoapUI调用安全WCF SOAP服务–第1部分，该服务
在这个由三部分组成的传奇中,我将演示如何使用SoapUI API工具来调用安全的SOAP服务. 首先,我将专注于创建服务,在接下来的文章中它将充当被测系统. 使用基本身份验证传输安全性机制维护对该服务 ...
Jquery ajax 访问调用带参数的服务方法！
页面脚本中的写法: $.ajax({url: "http://localhost:3510/WebSite/WebService/ExceptionRecoder.asmx/SetExcep ...
【转载】一个通过JSONP跨域调用WCF REST服务的例子（以jQuery为例）
一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例) JSONP(JSON with Padding)可以看成是JSON的一种"使用模式",用以解决" ...
ajax远程调用,jquery中的ajax方法怎样通过JSONP进行远程调用
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用首先介绍下$.ajax的参数 type:请求方式 GET/ ...
WCF 第一章基础完成一个WCF服务客户端
当需要和服务通信时WCF为客户端提供了丰富的API.通过Service.ServiceModel实现的API处理将.NET类型转换成XML然后从客户端向服务端发送消息.你可以直接用API编程,或者你可 ...
WCF 第一章基础为一个ASMX服务实现一个WCF客户端
WCF客户端可以调用任何基于标准的服务而不用考虑目标宿主环境.在.NET Framework 1.1 上创建的ASMX网络服务是完全兼容的.由WS-I 1.1基本概况定义的标准确保它们可以被WCF调用 ...
普元EOS中，子系统和portal不在同一个域中，使用jquery的jsonp来解决portal跨域访问
转至元数据起始 [背景] 子系统和portal不在同一个域中且项目中要求不能使用nginx.apache等反向代理软件,故使用jsonp从代码角度解决ajax跨域问题 [实现思路] 通过jquery的 ...
java怎么调用另一个类的方法_在一个类中访问另一个类的方法
在一个类中访问另一个类的方法由于Java应用程序是由若干个类构成的,因此经常需要在一个类中访问另一个类中的成员和方法,请问应该如何在一个类中访问另一个类的方法?下面是由百分网小编为大家整理的在一个类 ...
说说JSON和JSONP，也许你会豁然开朗，含jQuery使用jsonp用例
[原创]说说JSON和JSONP,也许你会豁然开朗,含jQuery用例前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了 ...

jQuery以JSONP的访问调用一个WCF REST服务

jQuery以JSONP的访问调用一个WCF REST服务相关推荐

最新文章

热门文章