Jquery+JSON消费REST WCF4.0 服务（带源码）

　　作为一种以HTTP协议为基础的WCF 服务，只要客户端能模拟进行HTTP请求，都能成为服务的消费者。之前写过《对Jquery+JSON+WebService的一点认识》，觉得在REST是基于HTTP协议的，AJAX的操作也应该一样。但是事实上还是有些差别的。由于网上资源聊聊无几，因此记录下自己的个人体会。希望对你有些帮助！
　　本篇主要讲述的类容为在ASP.NET中，如何通过AJAX来消费REST服务。
　　使用JQUERY框架模拟AJAX请求时，操作类型主要有GET、POST两种。本节也以这两种常用的方式来进行介绍。（type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。摘自：Jquery 1.4 API手册）。

• 本篇主要涉及的操作如下：

• 1、GET请求
• 2、POST请求，简单数据类型
• 3、POST请求，复杂数据类型

　　Jq+JSON消费REST WCF4.0 服务时，对返回给客户端数据格式，以及客户端传递给服务端数据格式是通过ResponseFormat、RequestFormat 两个枚举类型的指定的。如下代码所示。

服务端实现代码：

public class AjaxService

{

　　　　[WebGet(UriTemplate = "/{id}"

　　　　,ResponseFormat =WebMessageFormat.Json

　　　　, RequestFormat = WebMessageFormat.Json)]

　　　　public Person GetPerson(string id)

　　　　{

　　　　return new Person

　　　　{

　　　　　　Id = int.Parse(id), 

　　　　　　Age = 27, 

　　　　　　Name = "zhansan", 

　　　　　　Phone = "01082667896"

　　　　};

　　}



　　[WebInvoke(UriTemplate = "/Post"

　　, BodyStyle = WebMessageBodyStyle.WrappedRequest

　　, ResponseFormat = WebMessageFormat.Json

　　, RequestFormat = WebMessageFormat.Json)]

　　public string UpdatePerson(Person person)

　　{

　　　　return person.Id + person.Name + person.Age + person.Phone;

　　}



　　[WebInvoke(UriTemplate = "/Rest/Post"

　　, BodyStyle = WebMessageBodyStyle.WrappedRequest

　　, ResponseFormat = WebMessageFormat.Json

　　, RequestFormat = WebMessageFormat.Json)]

　　public string Update(string message)

　　{

　　　　return string.Concat("hello", message);

　　}

}

　　

客户端实现代码
1、GET请求。

$.ajax({

type: "get",

url: "AjaxService/36",

contentType: "application/json; charset=utf-8",

success: function (json) { alert(json.Name) },

error: function (error) {

alert("调用出错" + error.responseText);

}

});

　　效果如下图：

2、POST请求，简单数据类型。

var jsonMsg = { 'message': 'zhangsan' };

var message = JSON2.stringify(jsonMsg)

$.ajax({

　　　　type: "POST",

　　　　url: "AjaxService/Rest/Post",

　　　　contentType: "application/json",

　　　　data: message,

　　　　dataType: "text",

　　　　processData: false,

　　　　success: function (json) { alert(json) },

　　　　error: function (error) {

　　　　alert("调用出错" + error.responseText);

　　}

});

　　运行结果如下图：

3、POST请求，复杂数据类型
　　POST复杂数据类型与简单类型原理是一样的。在Web页面建构JSON数据对象，然后将其转换为JSON的字符串格式。
代码如下：

var jsonData = { 'person': { 'Id': '36', 'Name': 'zhangsan', 'Age': '27', 'Phone': '01082667896'} };

var message = JSON2.stringify(jsonData)

$.ajax({

　　　　type: "POST",

　　　　url: "AjaxService/Post",

　　　　contentType: "application/json; charset=utf-8",

　　　　data: message,

　　　　dataType: "json",

　　　　success: function (json) { alert(json) },

　　　　error: function (error) {

　　　　alert("调用出错" + error.responseText);

　　}

});

运行结果如下图：

　　如同在WebService中一样：客户端上传的JSON字符串格式的数据，会在服务端复杂数据类型中的相应字段中。
这样就通过JQ+JSON完成了与REST WCF的交互。但是有一点需要注意的是：在使用POST操作时，在客户端与服务端交互过程中，需要指定WebMessageBodyStyle、在GET操作时，不论格式，可以不必指定。用途是：指定是否包装参数和返回值。也就是在客户端与服务端的交互过程中，上传给服务端的参数以及服务端回传给客户端的返回值需要做怎样的包装操作。这一点非常重要，否则调用在消费服务是会有异常。
WebMessageBodyStyle的定义如下：

public enum WebMessageBodyStyle

{

　　Bare,

　　Wrapped,

　　WrappedRequest,

　　WrappedResponse

}

　　MSDN给出的说明如下：

• Bare 不包装请求和响应。
• Wrapped 包装请求和响应。
• WrappedRequest 包装请求，但不包装响应。
• WrappedResponse 包装响应，但不包装请求。

　　与WebService调用异同总结：

• 　　1、调用方式一样。
• 　　2、客户端发送给服务端数据格式略有差别。在WebService中可以通过形如：data: "{'name':'zhangsan'}",向服务端发送请求，但是这种字符串格式中RESTful中是不被支持的。
• 　　3、WebService调用结果通过.d获取，即json.d。而在RESTful Service中，直接获取,即json。
• 　　4、WebService不用指定客户端请求、服务端相应的格式。而在RESTful Service中需要指定

这个过程也不复杂，有此类开发经验的人很容易。但是对初次接触REST开发的人来说还是需要费一番周折的。

参考：

http://www.west-wind.com/weblog/posts/2008/Apr/21/jQuery-AJAX-calls-to-a-WCF-REST-Service

Jquery1.4 API手册

MSDN