使用多种客户端消费WCF RestFul服务(四)——Jquery篇
Jquery篇
互联网开发中少不了各类前端开发框架，其中JQUERY就是最流行之一，本篇我们就采用JQUERY来消费WCF RestFul服务，其中用到JSON基础知识，如果有想了解的朋友，请访问：《使用Jquery解析Json基础知识》。
开发工具：Microsoft Visual Studio 2013(仅仅只是为了F5)
版本：jQuery JavaScript Library v1.4.2
另用到jquery-json 扩展库
下载地址在这里：http://code.google.com/p/jquery-json/
服务端仍然用第一篇的，不过有一些改动，本篇将另行提供下载。
一、GET方式
新建Index_Get.html静态页，添加JS引用：
<script type="text/javascript" src="JS/jquery-1.4.2.js"></script>
然后调用Jquery初始化方法：
$(document).ready(function () {
$.ajax({
type: "get",
url: "http://localhost:3720/UserService.svc/GetPerson",
contentType: "application/json; charset=utf-8",
success: function (json)
{
alert(json.Name)
},
error: function (error) {
alert("调用出错" + error.responseText);
}
});
解释：
type：表示提交请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 Delete 也可以使用，但仅部分浏览器支持；
url：请求服务资源名；
contentType：提交编码格式(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合；
success：请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态。
带参方式基本一样，只是资源名后面加了GET参数。
$.ajax({
type: "get",
url: "http://localhost:3720/UserService.svc/GetPersonById/2",
contentType: "application/json; charset=utf-8",
success: function (json) {
alert(json.Name)
},
error: function (error) {
alert("调用出错" + error.responseText);
}
});
调用效果如图：
二、POST方式
新建Index_Post.html静态页，添加JS引用：
<script type="text/javascript" src="JS/jquery-1.4.2.js"></script> <script type="text/javascript" src="JS/json2.js"></script>
然后调用Jquery初始化方法：
$.ajax({
type: "POST",
url: "http://localhost:3720/UserService.svc/GetPersonPost",
contentType: "application/json",
data: "",
dataType: "text",
processData: false,
success: function (json) { alert(json) },
error: function (error) {
alert("调用出错" + error.responseText);
}
});
解释：
type：表示提交请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 Delete 也可以使用，但仅部分浏览器支持；
url：请求服务资源名；
data：表示要POST发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将
自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'；
dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
contentType：提交编码格式(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合；
processData：(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success：请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态。
如果要POST参数回去，需要（建议）将参数构造成JSON格式，如：
{"id":"2","name":"deluyi","age":"33"}
然后在 Data中赋值，具体实现方式如下：
$.ajax({ type: "POST", url: "http://localhost:3720/UserService.svc/GetPersonPostById", contentType: "application/json", data: '{"id":"2","name":"deluyi","age":"33"}', dataType: "JSON", processData: true, success: function (json) { alert(json); }, error: function (error) { alert("调用出错" + error.responseText); } });
这种POST的数据到了服务端不会被自动解析为User类型（或者说我还没找到能够让他解析为User类型的方法），那么我们稍微修改下服务端的参数定义方式，如：
[OperationContract] [WebInvoke(UriTemplate = "GetPersonPostById", RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat =
WebMessageFormat.Json, Method = "POST")] public User GetUserPostById(string id, string name, string age) { return new User { Age = "15", ID = "004", Name = "laoliu" }; }
这样可以断点参数列表，得到客户端发送过来的参数，截图如：
结合上述代码，我们基本上完成了jquery对Restful 风格的WCF 服务的消费任务，那么在EXTJs中或者其他前端开发库中使用方式将会是大同小异的。
本篇代码下载：点击下载
