如何让WCF服务更好地支持Web Request和AJAX调用

最新推荐文章于 2024-09-05 16:41:42 发布
最新推荐文章于 2024-09-05 16:41:42 发布
阅读量138 收藏 1
点赞数
文章标签： json xhtml javascript ViewUI

WCF的确不错，它大大地简化和统一了服务的开发。但也有不少朋友问过我，说是在非.NET客户程序中，有何很好的方法直接调用服务吗？还有就是在AJAX的代码中（js）如何更好地调用WCF服务呢？

我首先比较推荐的是可以通过页面静态方法等方式来转接对WCF的服务。尤其是WCF是属于别的网站的一部分的时候。

但今天我要讲解一下，如果和WCF在一个网站内部，那么js脚本应该如何更好地调用WCF呢？或者说，为了支持js更好地访问，WCF服务在设计的时候应该注意什么呢？

1. 创建服务

image

2. 修改接口

为了做演示，我们将默认的那个Operation修改一下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel; using System.Text; using System.ServiceModel.Web; namespace WebApplication1 { // 注意: 如果更改此处的接口名称 "INorthwindService"，也必须更新 Web.config 中对 "INorthwindService" 的引用。 [ServiceContract] public interface INorthwindService { [OperationContract] [WebGet(UriTemplate="HelloWorld")] string HelloWorld(); } }

注意，我们这里加了一个WebGet的Attribute，这将允许WCF服务直接通过地址调用

3. 实现服务

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel; using System.Text; namespace WebApplication1 { // 注意: 如果更改此处的类名 "NorthwindService"，也必须更新 Web.config 中对 "NorthwindService" 的引用。 public class NorthwindService : INorthwindService { #region INorthwindService 成员 public string HelloWorld() { return "Hello,world"; } #endregion } }

这里的实现依然是我最喜欢的HelloWorld

4. 修改配置文件（web.config)，要支持直接通过WebGet的方法调用WCF服务，必须用一个特殊的binding，是webHttpBinding

 <system.serviceModel>
  <behaviors> <serviceBehaviors> <behavior name="WebApplication1.NorthwindServiceBehavior"> <serviceMetadata httpGetEnabled="true" /> <serviceDebug includeExceptionDetailInFaults="false" /> </behavior> </serviceBehaviors>  <endpointBehaviors> <behavior name="test"> <webHttp/> </behavior> </endpointBehaviors> </behaviors> <services> <service behaviorConfiguration="WebApplication1.NorthwindServiceBehavior" name="WebApplication1.NorthwindService"> <endpoint address="" binding="webHttpBinding" contract="WebApplication1.INorthwindService" behaviorConfiguration="test"> <identity> <dns value="localhost" /> </identity> </endpoint> <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" /> </service> </services> </system.serviceModel>

上面的粗斜体部分是要添加或者修改的

5. 浏览该服务

image

我们看到，通过这样的地址就可以实现调用了。默认情况下，它返回的数据格式是XML的

image

6. 修改合约，让它返回json数据

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel; using System.Text; using System.ServiceModel.Web; namespace WebApplication1 { // 注意: 如果更改此处的接口名称 "INorthwindService"，也必须更新 Web.config 中对 "INorthwindService" 的引用。 [ServiceContract] public interface INorthwindService { [OperationContract] [WebGet(UriTemplate="HelloWorld",ResponseFormat=WebMessageFormat.Json)] string HelloWorld(); } }

image

7. 在客户端脚本js中实现对WCF的调用

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function() { $("#helloWorld").click(function() { var url = "NorthwindService.svc/HelloWorld"; $.ajax({ url: url, dataType: "json", success: function(result) { alert(result); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <input type="button" value="HelloWorld" id="helloWorld" /> </form> </body> </html>

 

 

这样是不是就很容易了呢？

8. 实现复杂数据的处理

注意下面代码中的黑斜体部分

服务合约

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel; using System.Text; using System.ServiceModel.Web; namespace WebApplication1 { // 注意: 如果更改此处的接口名称 "INorthwindService"，也必须更新 Web.config 中对 "INorthwindService" 的引用。 [ServiceContract] public interface INorthwindService { [OperationContract] [WebGet(UriTemplate="HelloWorld",ResponseFormat=WebMessageFormat.Json)] string HelloWorld();  [OperationContract] [WebGet(UriTemplate = "GetEmployee?id={id}", ResponseFormat = WebMessageFormat.Json)] Employee GetEmployeeInfo(int id); }  public class Employee { public int ID { get; set; } public string Name { get; set; } } } 
服务实现
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel; using System.Text; namespace WebApplication1 { // 注意: 如果更改此处的类名 "NorthwindService"，也必须更新 Web.config 中对 "NorthwindService" 的引用。 public class NorthwindService : INorthwindService { #region INorthwindService 成员 public string HelloWorld() { return "Hello,world"; } #endregion #region INorthwindService 成员  public Employee GetEmployeeInfo(int id) { return new Employee { ID = id, Name = "chenxizhang" }; } #endregion } } 页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function() { $("#helloWorld").click(function() { var url = "NorthwindService.svc/HelloWorld"; $.ajax({ url: url, dataType: "json", success: function(result) { alert(result); } }); });  $("#getEmployee").click(function() { var url = "NorthwindService.svc/GetEmployee?id=1"; $.ajax({ url: url, dataType: "json", success: function(result) { alert(result.Name); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <input type="button" value="HelloWorld" id="helloWorld" /> <input type="button" value="Get Employee" id="getEmployee" /> </form> </body> </html> 
没错，就是这么清晰易懂的代码。
那么，如何实现POST，或者PUT以及DELETE这种请求呢？
9. 实现POST或者PUT，DELETE请求
服务合约
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel; using System.Text; using System.ServiceModel.Web; namespace WebApplication1 { // 注意: 如果更改此处的接口名称 "INorthwindService"，也必须更新 Web.config 中对 "INorthwindService" 的引用。 [ServiceContract] public interface INorthwindService { [OperationContract] [WebGet(UriTemplate="HelloWorld",ResponseFormat=WebMessageFormat.Json)] string HelloWorld(); [OperationContract] [WebGet(UriTemplate = "GetEmployee?id={id}", ResponseFormat = WebMessageFormat.Json)] Employee GetEmployeeInfo(int id);  [OperationContract] [WebInvoke(UriTemplate = "SubmitEmployee?id={id}&Name={name}", ResponseFormat = WebMessageFormat.Json)] ActionResult SubmitEmployee(int id, string name); } public class Employee { public int ID { get; set; } public string Name { get; set; } }  public class ActionResult{ public int Code { get; set; } public string Message { get; set; } } } 
 
实现服务
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel; using System.Text; namespace WebApplication1 { // 注意: 如果更改此处的类名 "NorthwindService"，也必须更新 Web.config 中对 "NorthwindService" 的引用。 public class NorthwindService : INorthwindService { #region INorthwindService 成员 public string HelloWorld() { return "Hello,world"; } #endregion #region INorthwindService 成员 public Employee GetEmployeeInfo(int id) { return new Employee { ID = id, Name = "chenxizhang" }; } #endregion #region INorthwindService 成员  public ActionResult SubmitEmployee(int id, string name) { //这里可以将该员工提交到数据库，并且根据结果返回相应的ActionResult //作为演示，直接返回 return new ActionResult { Code = 200, Message = string.Format("你提交了一个员工，编号为:{0},姓名为:{1}", id, name) }; } #endregion } } 
 
页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function() { $("#helloWorld").click(function() { var url = "NorthwindService.svc/HelloWorld"; $.ajax({ url: url, dataType: "json", success: function(result) { alert(result); } }); }); $("#getEmployee").click(function() { var url = "NorthwindService.svc/GetEmployee?id=1"; $.ajax({ url: url, dataType: "json", success: function(result) { alert(result.Name); } }); });  $("#submitEmployee").click(function() { var url = "NorthwindService.svc/SubmitEmployee?id=1&Name=chenxizhang"; $.ajax({ type: "POST", url: url, dataType: "json", success: function(result) { alert(result.Code + "," + result.Message); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <input type="button" value="HelloWorld" id="helloWorld" /> <input type="button" value="Get Employee" id="getEmployee" />  <input type="button" value="Submit Employee" id="submitEmployee" />  </form> </body> </html> 
 
weixin_34290096
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WCF服务可PostMan调用
wkz2568的博客
05-06 2190
创建一个可以用postman调用的WCF服务 创建一个Wcf服务，如果是高版本的VS可以直接选择创建WCF服务（支持Ajax）。我这里是使用的VS2010 创建成功后删除所继承的接口并给服务加上特性 [ServiceContract(Namespace = "")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 这里是用来测试所以是创建的两个方法分别
如何通过发布SOAP和JSON来使用JS调用Web服务
04-08
在实际应用中，理解并熟练运用JavaScript调用Web服务的技术是至关重要的。这包括正确构建SOAP请求XML、处理JSON响应、错误处理以及跨域请求的管理。例如，使用`fetch`时需要处理可能出现的Promise链中的错误，而使用...
使用HttpWebRequest调用wcf一段代码
weixin_30624825的博客
07-24 222
public class HttpClass { internal static HttpWebRequest _httpWebRequest; public static void Request() { _httpWebRequest = null; _httpWebReq...
使用js+ajax调用WCF服务
05-09
使用js+ajax调用WCF服务，博客地址：http://blog.csdn.net/zaijianluoye110/article/details/25364945
Ajax与WCF交互-WCF之美
王以山的专栏
07-12 1211
Ajax与WCF交互-WCF之美上面一篇博文>中谈及xml web service与wcf新老架构对于ajax安全性的问题,得出了结论,但没有具体验证,本文正是为了验证上文中关于新架构MEX结点与业务终结点分离更有利于服务安全的结论,并稍带着讲述如何在vs2008中用ajax与wcf进行交互. 第一步: 在vs2008中创建一个网站. 在vs2008中,创建网站时候如果选择.Ne
wcf 支持ajax,支持ajax 跨域调用的WCF配置
weixin_35524300的博客
08-06 464
1.首先我们需要让我们的操作类支持ajax，把下面的添加到实现类上[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]添加之后是这样的：[AspNetCompatibilityRequirements(RequirementsMode = AspNetCom...
ajax调用wcf rest服务器,PostMan 调用WCF Rest服务
weixin_31589747的博客
08-05 294
问题描述：现在有已有的WCF服务，但是ajax是不能请求到这个服务的；需要把WCF转成WCF REST 的风格。以下是从WCF转 WCF REST的步骤1.首先在接口定义的地方加上 请求WebInvoke http的请求动作如下：[OperationContract][WebInvoke(Method = "POST", UriTemplate = "Login", ResponseFormat ...
ajax以GET和POST方式调用WCF
01-29
**Ajax调用WCF服务详解** 在Web开发中，Asynchronous JavaScript and XML（Ajax）技术被广泛用于实现页面的无刷新...在开发过程中，结合Visual Studio、Fiddler等工具，可以帮助更好地理解和调试WCF服务的调用过程。
ajax跨域调用wcf实例
05-20
它可以支持多种协议，包括HTTP，使服务可以被AJAX调用。在WCF中实现跨域调用，我们需要配置服务以允许来自不同源的请求。 以下是实现AJAX跨域调用WCF服务的具体步骤和相关知识点： 1. **开启WCF服务的跨域支持**：...
jquery调用wcf并展示出数据的方法
12-03
【jQuery调用WCF服务并显示数据的详细步骤】 在.NET开发中，WCF（Windows Communication Foundation）是一种用于构建服务的框架，它允许跨进程、跨网络甚至跨平台的通信。jQuery是一个轻量级的JavaScript库，常用于...
jmeter响应断言、json断言、断言持续时间、大小断言操作
回家吃月饼的学习交流地
08-31 379
jmeter常用断言
uniapp去除顶部标题栏
heliang399的博客
09-04 232
其实很简单，只需两个步骤即可彻底除掉，首先找到项目文件夹下的pages.json路由文件点开，在这个文件里可以看到你创建的所有页面，然后在你想要去除头部标题栏的页面中添加"navigationStyle": "custom"即可去除😁
JavaScript前端面试题——深拷贝及浅拷贝
最新发布
lbcbjtlhmjq的博客
09-05 464
深拷贝和浅拷贝是复制数据结构的两种不同方式。浅拷贝是指创建一个新对象，但仅复制原对象的属性引用，而不是其属性值。即，如果原对象的属性值是对象或数组，浅拷贝后的新对象会引用相同的内存地址，因此修改内层对象会影响到原对象。（简单数据类型拷贝值，引用数据类型拷贝地址）深拷贝是创建一个新的对象，并复制原始对象的所有属性，包括嵌套的对象和数组。这意味着在原始对象或新对象上的更改不会相互影响。
解析淘宝商品详情API返回值中的特殊属性
apixixi的博客
09-02 902
在解析淘宝商品详情API（如淘宝开放平台提供的API）的返回值时，我们通常会遇到一些特殊的属性，这些属性可能包含复杂的数据结构，如列表、字典、嵌套对象等。由于淘宝API的具体细节可能会随时间变化，这里提供一个通用的方法指导和示例代码，用于解析这类含有特殊属性的JSON数据。
Protocol Buffers
qq_40052678的博客
09-01 481
将下载的文件解压缩后放在C盘下的Program File下，并设置bin中protoc.exe的环境变量。protocol buffers目的。
基础闯关5
zhougynui的博客
09-02 742
XTuner 是一个高效、灵活、全能的轻量化大模型微调工具库。高效支持大语言模型 LLM、多模态图文模型 VLM 的预训练及轻量级微调。XTuner 支持在 8GB 显存下微调 7B 模型，同时也支持多节点跨设备微调更大尺度模型（70B+）。自动分发高性能算子（如 FlashAttention、Triton kernels 等）以加速训练吞吐。兼容DeepSpeed，轻松应用各种 ZeRO 训练优化策略。灵活支持多种大语言模型，包括但不限于InternLMLlama 2ChatGLMQwen。
jsmn输出
且行且珍惜
09-01 267
json jsmn
使用jQuery Ajax调用WCF服务的详细教程
jQuery Ajax调用WCF服务详细教程 本文将详细介绍如何使用jQuery的Ajax调用WCF服务，并对WCF服务的搭建过程进行了详细的介绍。 WCF服务的搭建过程 在开始之前，需要首先创建WCF服务应用程序项目WCF。然后，创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值