博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery+JSON消费REST WCF4.0 服务(带源码)
阅读量:5745 次
发布时间:2019-06-18

本文共 3306 字,大约阅读时间需要 11 分钟。

  作为一种以HTTP协议为基础的WCF 服务,只要客户端能模拟进行HTTP请求,都能成为服务的消费者。之前写过《》,觉得在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开发的人来说还是需要费一番周折的。

参考:

Jquery1.4 API手册

MSDN

转载地址:http://sbxzx.baihongyu.com/

你可能感兴趣的文章
mysql性能优化学习笔记-参数介绍及优化建议
查看>>
【Web动画】SVG 实现复杂线条动画
查看>>
使用Wireshark捕捉USB通信数据
查看>>
《树莓派渗透测试实战》——1.1 购买树莓派
查看>>
Apache Storm 官方文档 —— FAQ
查看>>
iOS 高性能异构滚动视图构建方案 —— LazyScrollView
查看>>
Java 重载、重写、构造函数详解
查看>>
【Best Practice】基于阿里云数加·StreamCompute快速构建网站日志实时分析大屏
查看>>
【云栖大会】探索商业升级之路
查看>>
HybridDB实例新购指南
查看>>
C语言及程序设计提高例程-35 使用指针操作二维数组
查看>>
华大基因BGI Online的云计算实践
查看>>
深入理解自定义Annotation,实现ButterKnif小原理
查看>>
排序高级之交换排序_冒泡排序
查看>>
Cocos2d-x3.2 Ease加速度
查看>>
[EntLib]关于SR.Strings的使用办法[加了下载地址]
查看>>
中小型网站架构分析及优化
查看>>
写shell的事情
查看>>
负载均衡之Haproxy配置详解(及httpd配置)
查看>>
linux虚拟机拷贝之后联网出错
查看>>