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为例)的更多相关文章

  1. 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

  2. jquery跨域调用wcf

    使用jquery跨域调用wcf服务的时候会报如下错误 $.ajax({ url: 'http://localhost:28207/Service1.svc/GetData', method: 'get ...

  3. jsonP跨域调用

    -------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...

  4. jquery中的jsonp跨域调用

                                                    jquery jsonp跨域调用接口

  5. jquery中的jsonp跨域调用(接口)

                                                                           jquery jsonp跨域调用接口

  6. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  7. 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  8. 使用jsonp跨域调用百度js实现搜索框智能提示(转)

    http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...

  9. ASP.NET Web API 自定义MediaType实现jsonp跨域调用

    代码来自<ASP.NET Web API 2 框架揭秘>一书. 直接上代码: /// <summary> /// 自定义jsonp MediaType /// </sum ...

随机推荐

  1. 学习Scala第一篇-从hello World开始

    最近开始系统性的学习scala.其实之前使用过scala的,比如我在用Gatling这款性能测试工具的时候就接触到了scala了.Gatling本身就是用Scala写的,而且Gatling的性能测试配 ...

  2. 贫下中农版jQuery

    之前写过一篇JavaScript命名空间的文章,写完后一对比对jQuery的简单使用很是惊羡,看了看人家源码,用的原理很类似啊,改进一下之前的版本,做个简易版的jQuery 之前的代码 (functi ...

  3. fir.im weekly - 「 持续集成 」实践教程合集

    我们常看到许多团队和开发者分享他们的持续集成实践经验,本期 fir.im Weekly 收集了 iOS,Android,PHP ,NodeJS 等项目搭建持续集成的实践,以及一些国内外公司的内部持续集 ...

  4. javascript_core_06之正则、Math、Date

    1.RegExp:Regular Expression,创建封装正则表达式: ①正则直接量:var reg=/reg/ig:②var reg=new RegExp(“reg”,“ig”): 2.Reg ...

  5. vm中centos7配置静态ip访问外网

    我使用的是桥接方式,具体步骤如下   1.设置虚拟机网络: 编辑>虚拟网络编辑器   2.设置vm中操作系统的网络设置   3.进入centos7中后修改网络配置:     另附我的宿主机网络配 ...

  6. JsBridge实现Javascript和Java的互相调用

    前端网页Javascript和Native互相调用在手机应用中越来越常见,JsBridge是最常用的解决方案. 在Android开发中,能实现Javascript与Native代码通信的,有4种途径: ...

  7. JS之模板技术(aui / artTemplate)

    artTemplate是个好东西啊,一个开源的js前端模板引擎,使用简单,渲染效率特别的高. 我经常使用这个技术来在前端动态生成新闻列表,排行榜,历史记录等需要在前端列表显示的信息. 下面是artTe ...

  8. javase基础复习攻略《二》

    今天就开始的真正走进JAVASE的世界,本篇介绍的是:JAVASE基础语法,大家如果有C语言的基础,对于本节内容一定感觉非常轻松,编程语言之间的都是相通的,只不过C语言属于面向过程编程,而JAVA语言 ...

  9. Cocos2d-x 3.2 学习笔记(一)环境搭建

    目前项目无事,时间比较充裕,因此来学习下cocos2dx,当然本人也是新手一个, 写此笔记做备忘和脚步. 最近3.2版本更新出來了!官方说这是自2.x分支以来修复了超过450个bug,3.2版本是目前 ...

  10. IOS开发-KVC

    1. 什么是kvc kvc--key-value coding,健值编码 可以通过key直接访问对象属性的value的方法 2.使用场景 kvc主要是为了让代码变的更简介明了 用的比较多的是在后台数据 ...