使用多种客户端消费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 = "", ID = "", Name = "laoliu" };
        }

这样可以断点参数列表，得到客户端发送过来的参数，截图如：

结合上述代码，我们基本上完成了jquery对Restful 风格的WCF 服务的消费任务，那么在EXTJs中或者其他前端开发库中使用方式将会是大同小异的。

本篇代码下载：点击下载