一个通过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.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法
关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...
- jquery跨域调用wcf
使用jquery跨域调用wcf服务的时候会报如下错误 $.ajax({ url: 'http://localhost:28207/Service1.svc/GetData', method: 'get ...
- jsonP跨域调用
-------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...
- jquery中的jsonp跨域调用
jquery jsonp跨域调用接口
- jquery中的jsonp跨域调用（接口）
jquery jsonp跨域调用接口
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- 使用jsonp跨域调用百度js实现搜索框智能提示（转）
http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...
- ASP.NET Web API 自定义MediaType实现jsonp跨域调用
代码来自<ASP.NET Web API 2 框架揭秘>一书. 直接上代码: /// <summary> /// 自定义jsonp MediaType /// </sum ...
随机推荐
- java提高篇(五)-----抽象类与接口
接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 抽象类与接口是java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力.他们两者之间对抽象概念 ...
- 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 我心中的核心组件（可插拔的AOP）~第二回 缓存拦截器
回到目录 AOP面向切面的编程,也称面向方面的编程,我更青睐于前面的叫法,将一个大系统切成多个独立的部分,而这个独立的部分又可以方便的插拔在其它领域的系统之中,这种编程的方式我们叫它面向切面,而这些独 ...
- DDD~领域服务的规约模式
回到目录 规 约(Specification)模式:第一次看到这东西是在microsoft NLayer项目中,它是微软对DDD的解说,就像petshop告诉了我们MVC如何使用一样,这个规约模式最重 ...
- WebApi系列~开放的CORS，跨域资源访问对所有人开放
回到目录 之前有客户问我,如何AJAX跨域post,这个问题挺有意思,在我们看来,我是不被允许的,因为它是不安全的,但随着web api的火热,这个东西也被人们一步步的接受了,确实,有时,我们的接口希 ...
- EF架构~CodeFirst生产环境的Migrations
回到目录 Migrations即迁移,它是EF的code first模式出现的产物,它意思是说,将代码的变化反映到数据库上,这种反映有两种环境,一是本地开发环境,别一种是服务器的生产环境,本地开发环境 ...
- [Spring框架]Spring IOC的原理及详解。
这里感谢 CSDN 的原博客:http://blog.csdn.net/m13666368773/article/details/7802126 看后 受益匪浅,这里再重温一遍Spring IOC ...
- javascript_core_01之数据类型与运算
1.数据类型转换: ①隐式转换:程序根据需要,自动转化数据类型: ②强制转换:主动调用函数执行转换: 2.字符串强制转换: ①x.toString():不能转换null和undefined: ②Str ...
- windows phone listbox的点击事件
前台 <ListBox x:Name="> <ListBox.ItemTemplate> <DataTemplate> <Grid Margin=& ...
- AIX下如何根据端口号查找相应的进程
1. $ netstat -Aan |grep 8080 f1000e0002321bb8 tcp 0 0 *.8080 *.* LISTEN 2. $ rmsock f1000e0002321bb8 ...