下面这个示例使用了WCF去创建一个服务端口从而能够被ASP.Net页面通过jQuery的AJAX方法访问，我们将在客户端使用Ajax技术来 与WCF服务进行通信。这里我们仅使用jQuery去连接Web Service,而不去使用ASP.Net AJAX库，至于为什么不使用AJAX库中，那是因为我们在项目中已经使用了jQuery，而它已经能处理全部的AJAX请求和所有功能，并且，如果我们 一旦使用ASP.NET AJAX库，我们也必须多包含一个超过80Kb的数据量（调试模式下会更大），但这也不是说ASP.NET AJAX库不实用，事实上，如果使用了相同的类库，我们能够少写很多的额外代码，但这个例子就是为了说明，在没有一个好的客户端代理的情况下，我们是如何 调用Web服务的。

WCF 服务:

我们先创建一个WebSite，然后添加一个AJAX-enabled WCF Service，从而创建WCF服务。（请确保你使用了正确的.Net Framework 版本，我用的是3.5） 

在我们添加完service后，它会自动进入该service的后置代码文件，Go ahead and browse around the file for a second.

首先我们要做的是找到"AspNetCompatibilityRequirements"并将其值置为 "Allowed":

[AspNetCompatibilityRequirements( RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed )]  

这个属性的设置可将我们的服务跑在ASP.NET compatibility模式，如果我们未将该值设为"Allowed"，那么就无法通过ASP.Net去访问到该服务，这个属性是当你添加 "AJAX-enabled WCF Service" 时自动生成的。更多祥细请参看MSDN。

现在再来看自动生成的后置代码文件，我们能发现已经存在了一个被标注了"OperationContract"特性的"DoWork()" 的方法，这个方法是自动生成的，我们将使用这个方法来完成下面的示例。我们再来为该方法添加一个"WebGet"的特性，并设"RequestFormat" 的值为 "Json." 我们再来为该方法加上另外的一个特性RequestFormat，WebGet 和Get动词一样，作用于一个UriTemplate（本文不对此作进一步讨论），RequestFormat 特性可以让我们接收JSON格式的请求。

我们的 "DoWork()" 方法如下:

[OperationContract] 
[WebGet( RequestFormat=WebMessageFormat.Json )] 
public void DoWork() 
{ 
    // Add your operation implementation here 
    return; 
}

对象的模型：

我们希望通过"DoWork()" 来传递一个叫“Person”的对象，那先来创建一个Person对象写入到当前类的头部，其包含字段和属性（Name, Age 和 the types of Shoes they own），这个类同时也作为所传递JSON的结构。

[Serializable] 
[DataContract( Namespace = "http://www.dennydotnet.com/", Name = "Person" )] 
public class Person 
{ 
    private string _name = string.Empty; 
    private int _age = 0;

[DataMember( IsRequired = true, Name = "Name" )] 
    public string Name 
    { 
        get { return _name; } 
        set { _name = value; } 
    }

[DataMember( IsRequired = true, Name = "Age" )] 
    public int Age 
    { 
        get { return _age; } 
        set { _age = value; } 
    }

[DataMember( IsRequired = true, Name = "Shoes" )] 
    public List<String> Shoes; 
}

我们已经为 "Person”类的名称和命名空间标注上了契约，我们仍需要为属性授于数据成员特性，为每个属性 设置"IsRequired"并具体指定其名称。你只需要具体指定名字，如果它和属性名不一样。举例来说吧，如果你有一个属性叫作“Level”，但你在 数据成员特性中赋值为“Rank”，现在我们要回去修改我们的“DoWork()”方法，去接收Person对象作为参数。具体参下面代码块。

[OperationContract] 
[WebGet( RequestFormat=WebMessageFormat.Json )] 
public void DoWork(Person p) 
{ 
    // Add your operation implementation here 
    return; 
}

对Web.Config文件进行配置: 
我们仅需对web.config文件做出很小的修改就能对服务进行访问了。首先加入一个 serviceBehavior 用来允许Http Get请求，再添加一些调试选项帮助。代码如下：

Below </endpointBehaviors>

<serviceBehaviors> 
    <behavior name="ServiceAspNetAjaxBehavior"> 
        <serviceMetadata httpGetEnabled="true" httpGetUrl="" /> 
        <serviceDebug httpHelpPageEnabled="true" includeExceptionDetailInFaults="true" /> 
    </behavior> 
</serviceBehaviors>

在<services>这里</services>之间，你的代码如下：

<service name="Service" behaviorConfiguration="ServiceAspNetAjaxBehavior"> 
    <endpoint address="" behaviorConfiguration="ServiceAspNetAjaxBehavior" 
binding="webHttpBinding" contract="Service" /> 
    <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" /> 
</service> 

A security note about the following line:

<serviceDebug httpHelpPageEnabled="true" includeExceptionDetailInFaults="true" /> 

Allowing exception details can expose internal application information including personally identifiable or otherwise sensitive information. Setting the option to true is only recommended as a way to temporarily debug your service!!

你的Web.config文件修改后如下图所示：

回到前端页面: 
现在我们的服务已经被创建和配置了，再来关注前端页面部分吧（确保页面已引用jQuery.js文件），首先来创建一个简单的Json对象用于向service传递，我们在Person类结构的基础上创建该JSON对象。

var mydata = { "Name":"Denny", "Age":23, "Shoes":["Nike","Osiris","Etnies"] }; 

如果你对JSON还不是很熟悉，我们可以把它看作一个对象，这个小工具帮助你来查看 (JsonViewer): 

我们需要使用WCF和jQuery进行Ajax通信，下面的代码创建了一个AJAX呼叫，在头部设置了GET方式，和内容类型为 application/json，将url的路径置为WCF 服务的 svc 文件，并在其后加上/和所要执行方法的名称，在这里我们要调用的是DoWork()方法，data是用来传递参数，为了让jQuery不去自动处理我们的 数据，将processData设为false，我们还加入了对success和error的处理，以更多的了解AJAX执行完之后的处理过程。

function sendAJAX(data) { 
    $.ajax({ 
        type: "GET", 
        contentType: "application/json", 
        url: "Service.svc/DoWork", 
        data: data, 
        processData: false, 
        success: function(msg){ 
                alert( "Data Saved!" ); 
        }, 
        error:function(XMLHttpRequest, textStatus, errorThrown){ 
                alert( "Error Occured!" ); 
        } 
    }); 
}

然而很不幸运，这里有一个小的问题，我们必须发送真正的JSON字符串，作为参数传递。但还没有简单的方法让JSON对象转换为字符串，如果你试了data.toString()，得到的会是一个 "[object Object]"值。这不是我们想要的。 
所以在这里我们要修改方法使得它能将JSON转换成字符串。

Note* The JSON de/serialization handles Date/Time in a specific way. The json2string function below does not take this into account. I'm sure there are some implementations out there which will work with ASP.NET AJAX but this one does not. For more information on this you can go here.

Update [4/11/08]: The javascript below has a few issues so it's been suggested that you should use the JSON.org version to "stringify" your object. You can download the script from here.

Update [4/25/08]: Rick Strahl has modified the JSON.org script so that it will properly create the dates to work with ASP.NET AJAX (read his post)

function json2string(strObject) { 
var c, i, l, s = '', v, p;

switch (typeof strObject) { 
case 'object': 
if (strObject) { 
if (strObject.length && typeof strObject.length == 'number') { 
for (i = 0; i < strObject.length; ++i) { 
     v = json2string(strObject[i]); 
if (s) { 
      s += ','; 
     } 
     s += v; 
    } 
return '[' + s + ']'; 
   } else if (typeof strObject.toString != 'undefined') { 
for (i in strObject) { 
     v = strObject[i]; 
if (typeof v != 'undefined' && typeof v != 'function') { 
      v = json2string(v); 
if (s) { 
       s += ','; 
      } 
      s += json2string(i) + ':' + v; 
     } 
    } 
return '{' + s + '}'; 
   } 
  } 
return 'null'; 
case 'number': 
return isFinite(strObject) ? String(strObject) : 'null'; 
case 'string': 
  l = strObject.length; 
  s = '"'; 
for (i = 0; i < l; i += 1) { 
   c = strObject.charAt(i); 
if (c >= ' ') { 
if (c == '//' || c == '"') { 
     s += '//'; 
    } 
    s += c; 
   } else { 
switch (c) { 
case '/b': 
      s += '//b'; 
break; 
case '/f': 
      s += '//f'; 
break; 
case '/n': 
      s += '//n'; 
break; 
case '/r': 
      s += '//r'; 
break; 
case '/t': 
      s += '//t'; 
break; 
default: 
      c = c.charCodeAt(); 
      s += '//u00' + Math.floor(c / 16).toString(16) + 
       (c % 16).toString(16); 
    } 
   } 
  } 
return s + '"'; 
case 'boolean': 
return String(strObject); 
default: 
return 'null'; 
} 
}

现在我们有一个方法可以将JSON对象转成我们所需要的字符串，现在我们回过头去修改我们之前定义的 "mydata" 变量，我们应当按下面去应用所写的json2string方法。

var mydata = { "Name":"Denny", "Age":23, "Shoes":["Nike","Osiris","Etnies"] }; 
var jsonStr = "p=" + json2string(mydata); 

注意在下面我准备了"p=" 字符在我们的JSON字符串中，“p”对应于"DoWork()" 方法中的参数，当我们将参数改名为"Dude" ( 例如DoWork(Person Dude) )时，我们也必须将此处替换为"Dude="

现在我们准备好了查询字符串，我们参看到我们如何调用服务： 
http://www.dennydotnet.com/Service.svc/DoWork/?p={ "Name":"Denny", "Age":23, "Shoes":["Nike","Osiris","Etnies"] }

你将接收到一个已经为URL编码处理过的值，如下： 
http://www.dennydotnet.com/Service.svc/DoWork/?p=%7b+%22Name%22%3a%22Denny%22%2c+%22Age%22%3a23%2c+%22Shoes%22%3a%5b%22Nike%22%2c%22Osiris%22%2c%22Etnies%22%5d+%7d%3b

紧接着我们去调用"SendAjax()" javascript 方法，现在能够调试我们的服务并验证数据是否被传递到服务。如下图

现在你仅需要在DoWork()方法里实现自己的逻辑。注意无论你如何怎么去做 在WCF的服务端，它已经为你做好了。 
现在你仅需实现一些异常管理以确定你不会得到一些非法数据，或者添加一些验证，那就留给你自己吧...

分类: ASP.NET
本文转自左正博客园博客，原文链接：http://www.cnblogs.com/soundcode/p/4110132.html，如需转载请自行联系原作者

jQuery调用WCF服务传递JSON对象相关推荐

  1. 实现在GET请求下调用WCF服务时传递对象（复合类型）参数

    WCF实现RESETFUL架构很容易,说白了,就是使WCF能够响应HTTP请求并返回所需的资源,如果有人不知道如何实现WCF支持HTTP请求的,可参见我之前的文章<实现jquery.ajax及原 ...

  2. Json 时间 转换为 Javascript 时间 Date Jquery 调用WCF

    "/Date(1232035200000)/" 怎么转换成 javascript 的 Date 对象 做法:new Date(+/\d+/.exec(value)[1]); val ...

  3. Jquery调用WCF经验分享

    博客园申请开通有一段时间了,一直没写博客,真对不起博客园,郁闷费话少说,今天有时间,来总结一下最近项目中用的一些知识知,主要是Jquery调用WCF服务.本文讨论一下Jquery异步调用WCF服务的过 ...

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

    废话不多说,直接讲解实现步骤 一.首先我们需定义支持WEB HTTP方法调用的WCF服务契约及实现服务契约类(重点关注各attribute),代码如下: //IAddService.cs namesp ...

  5. 学习 WCF (6)--学习调用WCF服务的各种方法

    根据不同的情况,我们可以用不同的方法调用WCF服务,本文简单总结了一下调用WCF的一些方法(代理类,Ajax...),分享给大家.开发工具调用WCF 这中方法很方便也很简单,很多工作VS就帮我们完成了 ...

  6. jQuery调用WCF需要注意的一些问题

    昨天,博客园首页增加了Digg功能.在该功能中我们开始尝试使用jQuery直接调用WCF.之前我们采用的方案是jQuery调用Web Service,然后WebService再调用服务层.这样调用主要 ...

  7. Silverlight同步(Synchro“.NET研究”nous)调用WCF服务

    Silverlight的RIA应用中访问远端的WebService或WCF服务,都是通过异步线程模式调用的.在某些情况下我们的调用是需要同步进行,虽然Silverlight没有内置同步线程模式调用远端 ...

  8. WCF技术剖析之二十九：换种不同的方式调用WCF服务[提供源代码下载]

    原文:WCF技术剖析之二十九:换种不同的方式调用WCF服务[提供源代码下载] 我们有两种典型的WCF调用方式:通过SvcUtil.exe(或者添加Web引用)导入发布的服务元数据生成服务代理相关的代码 ...

  9. 用jquery的each方法遍历json对象

    用jquery的each方法遍历JSON对象的方法如下: 声明一个JSON对象: var jsonStu=[{"name":"张三","score&q ...

最新文章

  1. 全面理解目标检测中的anchor
  2. [转]微服务（Microservice）那点事
  3. How to write an operating system
  4. mysql查询以文件形式导出_mysql以文件形式导入导出整个数据库
  5. pymysql安装_第八章 nova组件安装2
  6. 【软件质量】软件可维护性
  7. 12001.linux应用程序之i2c编程
  8. linux中如何设置用户自己的工作环境,Linux系统下设置用户登录环境
  9. 【ASP.NET Web API教程】3.4 HttpClient消息处理器
  10. 牛客网暑期ACM多校训练营（第二场）: H. travel（树形线头DP）
  11. zmap扫描mysql_zmap快速扫描
  12. 关于计算机中的编码问题: ASC2/ Unicode/ Utf-8
  13. 微弱信号检测_第二版-高晋占
  14. Python基础《十七：XML解析》
  15. 最精彩的英语学习经验总结：俺的英语之路
  16. csSEnet注意力网络
  17. Recorder︱一些图像识别初创公司产品及API搜集ing...
  18. 微信H5支付（V3）
  19. 非抽样小波变换 matlab,基于Matlab和Python的非采样离散小波变换
  20. Vijos 捕风捉影

热门文章

  1. POJ 1047 Round and Round We Go
  2. Ogre 1.7 构建编译
  3. 请教开发WinForm时输入法问题
  4. Graphpad Prism计算IC50
  5. Quartus II12.0安装教程
  6. C语言 | 基于MPU605(六轴传感器)的I2C实现LCD1602显示（代码类）
  7. 计算机视觉与深度学习 | 几种常见的卡尔曼滤波算法理论
  8. VC++/MFC中调用CHM帮助文档的方法--ShellExecute
  9. 幽灵交易策略_源码 | 幽灵交易者策略
  10. rust实战入门到进阶（3）