一个通过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 ...
随机推荐
- Linux网路编程系列-网络I/O模型
应用程序从网络中拿数据,要经历两个阶段:1.等待数据准备好-分组到达,被拷贝到内核缓冲区,组装数据报:2.数据从内核缓冲区拷贝至用户态应用程序的缓冲区.Unix下五个I/O模型: 阻塞I/O: 进程调 ...
- 第2讲 Redis常用命令与高级应用
目录 一.redis数据类型 5. sorted sets类型和操作 二.Redis常用命令 1.键值相关命令 2.服务器相关命令 三. redis高级应用 1. 给redis服务器设置密码 2.持久 ...
- telnet命令——连接服务器
Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.它为用户提供了在本地计算机上完成远程主机工作的能力.在终端使用者的电脑上使用telnet程序,用它连接 ...
- fir.im Weekly - 如何愉悦地进行持续集成
持续集成是一项"一次配置长期受益"的投入,让开发.测试.生产环境的统一变得更加自动高效. 本期 fir.im Weekly 收录了关于 Android.iOS 持续集成的最新实践分 ...
- 谷毅(WingKu)横空出世
天空划出一道彩虹,谷毅(WingKu)横空出世,这里的产品全由本人开发制作,如有雷同不胜荣幸,欢迎前往下载使用,如果有啥建议或者使用当中遇到什么问题,也可在此留言评论~OK,开张啦~!以后每个产品会以 ...
- Java面试（2）-- Java算数表达式
class Demo02{ public static void main(String[] args){ //算数运算符 +,-,*,/,%,++,-- //例1 int a = 1; int b ...
- C#打开新页面
最常用的页面跳转(原窗口被替代):Response.Redirect("XXX.aspx"); 利用url地址打开本地网页或互联网:Respose.Write("< ...
- APP 版本更新 流程（已上架APP，提交新版本）
背景: 今天发布app的新版本, 可是无奈换了电脑, 没有了以前上架时候的发布证书和描述文件. 但是没关系, 依然可以上传成功,哈哈哈~ 虽然走了很多弯路 - -|| 如果是向 App Store 提 ...
- Redis基础介绍及安装示例
1.基本概念 Redis是由Salvatore Sanfilippo(意大利)开发的一个开源的高性能键值存储数据库,于2009年发布第一个版本并与同一年开源,官方站点:http://www.redis ...
- heroku部署java web项目
一.开发 在本地eclipse创建maven web项目(此时可以当成正常的javaweb项目开发即可.注意添加servlet依赖,此时不用添加jetty依赖) 二.部署前准备 1.首先在pom.xm ...