一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
JSONP(JSON with Padding)可以看成是JSON的一种“使用模式”,用以解决“跨域访问”的问题,这篇简单的文章给出一个简单的例子用于模拟如何通过jQuery以JSONP的访问调用一个WCF REST服务。[源代码从
这里下载]
在这个例子中,我们将定义一个用于返回所有员工信息的服务,下面是用于表示员工信息的Employee的类型和契约接口。契约接口IEmployees的GetAll操作用以返回所有员工列表,我们指定了Uri模板并将回复消息格式设置为JSON。 using System.Collections.Generic; using System.ServiceModel; using System.ServiceModel.Web; namespace Artech.WcfServices.Service.Interface { [ServiceContract] public interface IEmployees { [WebGet(UriTemplate = "all",ResponseFormat =WebMessageFormat.Json)] IEnumerable<Employee> GetAll(); } public class Employee { public string Id { get; set; } public string Name { get; set; } public string Department { get; set; } public string Grade { get; set; } } } 在如下所示的服务类型EmployeesService 中,我们直接让服务操作GetAll返回一个包含3个Employee对象的列表。 using System.Collections.Generic; using Artech.WcfServices.Service.Interface; namespace Artech.WcfServices.Service { public class EmployeesService : IEmployees { public IEnumerable<Employee> GetAll() { return new List<Employee> { new Employee{ Id = "001",Name="张三",Department="开发部",Grade = "G6"},new Employee{ Id = "002",Name="李四",Department="人事部",Grade = "G7"},new Employee{ Id = "003",Name="王五",Department="销售部",Grade = "G8"} }; } } } 我们通过控制台程序对服务进行寄宿。从下面的配置可以看到我们采用了标准终结点WebHttpEndpoint。为了让服务具有跨域支持的能力,我们必须将标准终结点的crossDomainScriptAccessEnabled属性设置为True。WebHttpBinding也具有同名的属性,如果直接使用WebHttpBinding也需要将该属性设置为True。 <configuration> <system.serviceModel> <standardEndpoints> <webHttpEndpoint> <standardEndpoint crossDomainScriptAccessEnabled="true"/> </webHttpEndpoint> </standardEndpoints> <bindings> <webHttpBinding> <binding crossDomainScriptAccessEnabled="true" /> </webHttpBinding> </bindings> <services> <service name="Artech.WcfServices.Service.EmployeesService"> <endpoint kind="webHttpEndpoint" address="http://127.0.0.1:3721/employees" contract="Artech.WcfServices.Service.Interface.IEmployees"/> </service> </services> </system.serviceModel> </configuration> 在客户端,我们在一个Web页面中通过jQuery进行Ajax调用这个服务,并将得到的员工列表显示在一个表格中。出CSS之外的页面代码如下所示,需要注意的是在进行Ajax调用的使用将dataType选项设置成“jsonp”,而不是“json”。
}); function callServer() { }
</body>
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |