ajax调用WCF服务

最新推荐文章于 2021-08-06 01:19:45 发布
最新推荐文章于 2021-08-06 01:19:45 发布
阅读量975 收藏
点赞数
分类专栏： ajax WCF
ajax 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
WCF
6 篇文章 0 订阅
订阅专栏

来自：http://blog.csdn.net/zx13525079024/article/details/7358223

关于AJAX调用WCF服务分为跨域和不跨域两种方式，今天咱们先介绍下不跨域下的调用方法。DEMO是在VS2008写的.

经过测试与研究，发现AJAX调用WCF服务必须满足以下条件

1.wcf的通讯方式必须使用webHttpBinding

2.必须设置<endpointBehaviors>节点的值

3.服务的实现必须添加

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 标记

4.方法前面必须添加如下标记

[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]

5.ajax方法中传递的参数名称必须和wcf服务中提供的参数方法名称一致

以下是本人写的代码，标记颜色的是需要注意的地方

服务器端配置文件代码

[html] view plain copy print ?
  1. <system.serviceModel>
  2. <services>
  3. <service name="WcfServiceDemoOne.Service1" behaviorConfiguration="WcfServiceDemoOne.Service1Behavior">
  4. <!-- Service Endpoints -->
  5. <endpoint address="" binding="webHttpBinding" contract="WcfServiceDemoOne.IService1" behaviorConfiguration="HttpBehavior"></endpoint>
  7. <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
  8. <host>
  9. <baseAddresses>
  10. <add baseAddress="http://localhost:12079/Service1.svc"/>
  11. </baseAddresses>
  12. </host>
  13. </service>
  14. </services>
  15. <behaviors>
  16. <serviceBehaviors>
  17. <behavior name="WcfServiceDemoOne.Service1Behavior">
  18. <!-- 为避免泄漏元数据信息，请在部署前将以下值设置为 false 并删除上面的元数据终结点-->
  19. <serviceMetadata httpGetEnabled="true"/>
  20. <!-- 要接收故障异常详细信息以进行调试，请将以下值设置为 true。在部署前设置为 false 以避免泄漏异常信息-->
  21. <serviceDebug includeExceptionDetailInFaults="false"/>
  22. </behavior>
  23. </serviceBehaviors>
  25. <endpointBehaviors>
  26. <behavior name="HttpBehavior">
  27. <webHttp/>
  28. </behavior>
  29. </endpointBehaviors>
  30. </behaviors>
  31. </system.serviceModel> 
<system.serviceModel>
		<services>
			<service name="WcfServiceDemoOne.Service1" behaviorConfiguration="WcfServiceDemoOne.Service1Behavior">
				<!-- Service Endpoints -->
        <endpoint address="" binding="webHttpBinding" contract="WcfServiceDemoOne.IService1"  behaviorConfiguration="HttpBehavior"></endpoint>

				<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
				<host>
					<baseAddresses>
						<add baseAddress="http://localhost:12079/Service1.svc"/>
					</baseAddresses>
				</host>
			</service>
		</services>
		<behaviors>
			<serviceBehaviors>
				<behavior name="WcfServiceDemoOne.Service1Behavior">
					<!-- 为避免泄漏元数据信息，请在部署前将以下值设置为 false 并删除上面的元数据终结点-->
					<serviceMetadata httpGetEnabled="true"/>
					<!-- 要接收故障异常详细信息以进行调试，请将以下值设置为 true。在部署前设置为 false 以避免泄漏异常信息-->
					<serviceDebug includeExceptionDetailInFaults="false"/>
				</behavior>
			</serviceBehaviors>

      <endpointBehaviors>
        <behavior name="HttpBehavior">
          <webHttp/>
        </behavior>
      </endpointBehaviors>
		</behaviors>
	</system.serviceModel>



服务器端代码

[csharp] view plain copy print ?
  1. [ServiceContract]
  2. public interface IService1
  3. {
  5. [OperationContract]
  6. string GetData(int value);
  8. [OperationContract]
  9. City GetDataUsingDataContract(City composite);
  11. [OperationContract]
  12. List<City> GetList();
  14. [OperationContract]
  15. List<City> GetListData(List<City> list);
  16. }
  19. // 使用下面示例中说明的数据约定将复合类型添加到服务操作。
  20. [DataContract]
  21. public class City
  22. {
  23. int seq = 0;
  24. string cityID;
  25. string ctiyName;
  27. [DataMember]
  28. public string CityID
  29. {
  30. get
  31. {
  32. return cityID;
  33. }
  34. set
  35. {
  36. cityID=value;
  37. }
  38. }
  40. [DataMember]
  41. public string CityName
  42. {
  43. get { return ctiyName; }
  44. set { ctiyName = value; }
  45. }
  47. [DataMember]
  48. public int Seq
  49. {
  50. get
  51. { return seq; }
  52. set
  53. { seq = value; }
  54. }
  55. } 
[ServiceContract]
    public interface IService1
    {

        [OperationContract]
        string GetData(int value);

        [OperationContract]
        City GetDataUsingDataContract(City composite);

         [OperationContract]
        List<City> GetList();

         [OperationContract]
        List<City> GetListData(List<City> list);
    }


    // 使用下面示例中说明的数据约定将复合类型添加到服务操作。
    [DataContract]
    public class City
    {
        int seq = 0;
        string cityID;
        string ctiyName;
        
         [DataMember]
        public string CityID
        {
           get
           {
               return cityID;
           }
            set
            {
              cityID=value;
            }
        }

        [DataMember]
        public string  CityName
        {
            get { return ctiyName; }
            set { ctiyName = value; }
        }

        [DataMember]
        public int Seq
        {
            get
            { return seq; }
            set
            { seq = value; }
        }
    }


实现代码

[csharp] view plain copy print ?
  1. [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  2. public class Service1 : IService1
  3. {
  4. [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
  5. public string GetData(int value)
  6. {
  7. return string.Format("You entered: {0}", value);
  8. }
  10. #region IService1 成员
  12. [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
  13. public City GetDataUsingDataContract(City composite)
  14. {
  15. City c = new City();
  16. c.CityID = composite.CityID;
  17. c.CityName = composite.CityName;
  18. c.Seq = composite.Seq;
  19. return c;
  20. }
  22. [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
  23. public List<City> GetList()
  24. {
  25. List<City> list = new List<City>();
  26. City cc = new City();
  27. cc.CityID = "1";
  28. cc.CityName="北京";
  29. cc.Seq = 3;
  30. list.Add(cc);
  32. City cc1 = new City();
  33. cc1.CityID = "2";
  34. cc1.CityName = "上海";
  35. cc1.Seq = 4;
  36. list.Add(cc1);
  37. return list;
  38. }
  40. [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
  41. public List<City> GetListData(List<City> list)
  42. {
  43. return list;
  44. }
  46. #endregion
  47. } 
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class Service1 : IService1
    {
        [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
        public string GetData(int value)
        {
            return string.Format("You entered: {0}", value);
        }

        #region IService1 成员

        [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
        public City GetDataUsingDataContract(City composite)
        {
            City c = new City();
            c.CityID = composite.CityID;
            c.CityName = composite.CityName;
            c.Seq = composite.Seq;
            return c;
        }

        [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
        public List<City> GetList()
        {
            List<City> list = new List<City>();
            City cc = new City();
            cc.CityID = "1";
            cc.CityName="北京";
            cc.Seq = 3;
            list.Add(cc);

            City cc1 = new City();
            cc1.CityID = "2";
            cc1.CityName = "上海";
            cc1.Seq = 4;
            list.Add(cc1);
            return list;
        }

        [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
        public List<City> GetListData(List<City> list)
        {
            return list;
        }

        #endregion
    }


客户端调用代码

[html] view plain copy print ?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WcfServiceDemoOne.WebForm1" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head runat="server">
  7. <title></title>
  8. <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  9. <script type="text/javascript">
  10. //参数为整数的方法
  11. function fn1()
  12. {
  13. $.ajax({
  14. url: "http://localhost:12079/Service1.svc/GetData",
  15. type: "POST",
  16. contentType: "text/json",
  17. data: '{"value":2}',
  18. dataType: "json",
  19. success: function(returnValue) {
  20. alert(returnValue);
  21. },
  22. error: function() {
  23. alert('error');
  24. }
  25. });
  27. }
  29. //参数为实体类的方法
  30. function fn2() {
  31. $.ajax({
  32. url: "http://localhost:12079/Service1.svc/GetDataUsingDataContract",
  33. type: "POST",
  34. contentType: "application/json",
  35. data: '{"CityID":1,"CityName":"北京","Seq":"3"}',
  36. dataType: "json",
  37. success: function(returnValue) {
  38. alert(returnValue.CityID + ' ' + returnValue.CityName + "--" + returnValue.Seq);
  39. },
  40. error: function() {
  41. alert('error');
  42. }
  43. });
  44. }
  46. //返回值为类集合的方法
  47. function fn3() {
  48. $.ajax({
  49. url: "http://localhost:12079/Service1.svc/GetList",
  50. type: "POST",
  51. contentType: "application/json",
  52. dataType: "json",
  53. success: function(returnValue) {
  54. for (var i = 0; i < returnValue.length; i++) {
  55. alert(returnValue[i].CityID + ' ' + returnValue[i].CityName+'---'+returnValue[i].Seq);
  56. }
  57. },
  58. error: function() {
  59. alert('error');
  60. }
  61. });
  63. }
  65. function fn4() {
  66. $.ajax({
  67. url: "http://localhost:12079/Service1.svc/GetListData",
  68. type: "POST",
  69. contentType: "application/json",
  70. data: '[{"CityID":1,"CityName":"北京","Seq":"3"},{"CityID":3,"CityName":"上海","Seq":"3"}]',
  71. dataType: "json",
  72. success: function(returnValue) {
  73. for (var i = 0; i < returnValue.length; i++) {
  74. alert(returnValue[i].CityID + ' ' + returnValue[i].CityName + '---' + returnValue[i].Seq);
  75. }
  76. },
  77. error: function() {
  78. alert('error');
  79. }
  80. });
  81. }
  82. </script>
  83. </head>
  84. <body>
  85. <form id="form1" runat="server">
  86. <div>
  88. <input id="Button1" type="button" value="调用1" onclick="fn1();" /></div>
  89. <input id="Button2" type="button" value="调用2" onclick="fn2();" />
  90. <br />
  91. <input id="Button3" type="button" value="调用3" onclick="fn3();" /></form>
  92. <br />
  93. <input id="Button4" type="button" value="调用4" onclick="fn4();"/>
  95. </body>
  96. </html> 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WcfServiceDemoOne.WebForm1" %>

<!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.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //参数为整数的方法
       function fn1()
       {
           $.ajax({
           url: "http://localhost:12079/Service1.svc/GetData",
               type: "POST",
               contentType: "text/json",
               data: '{"value":2}',
               dataType: "json",
               success: function(returnValue) {
                   alert(returnValue);
               },
               error: function() {
                   alert('error');
               }
           });

       }

//参数为实体类的方法
       function fn2() {
           $.ajax({
           url: "http://localhost:12079/Service1.svc/GetDataUsingDataContract",
               type: "POST",
               contentType: "application/json",
               data: '{"CityID":1,"CityName":"北京","Seq":"3"}',
               dataType: "json",
               success: function(returnValue) {
               alert(returnValue.CityID + '  ' + returnValue.CityName + "--" + returnValue.Seq);
               },
               error: function() {
                   alert('error');
               }
           });
       }

//返回值为类集合的方法
       function fn3() {
           $.ajax({
               url: "http://localhost:12079/Service1.svc/GetList",
               type: "POST",
               contentType: "application/json",
               dataType: "json",
               success: function(returnValue) {
               for (var i = 0; i < returnValue.length; i++) {
                   alert(returnValue[i].CityID + '  ' + returnValue[i].CityName+'---'+returnValue[i].Seq);
                   }
               },
               error: function() {
                   alert('error');
               }
           });

       }

       function fn4() {
           $.ajax({
           url: "http://localhost:12079/Service1.svc/GetListData",
               type: "POST",
               contentType: "application/json",
               data: '[{"CityID":1,"CityName":"北京","Seq":"3"},{"CityID":3,"CityName":"上海","Seq":"3"}]',
               dataType: "json",
               success: function(returnValue) {
               for (var i = 0; i < returnValue.length; i++) {
                   alert(returnValue[i].CityID + '  ' + returnValue[i].CityName + '---' + returnValue[i].Seq);
               }
               },
               error: function() {
                   alert('error');
               }
           });
       }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <input id="Button1" type="button" value="调用1" οnclick="fn1();" /></div>
        <input id="Button2" type="button" value="调用2" οnclick="fn2();" />
        <br />
    <input id="Button3" type="button" value="调用3" οnclick="fn3();" /></form>
    <br />
    <input id="Button4" type="button" value="调用4"  οnclick="fn4();"/>
    
</body>
</html>


demo下载地址：

http://download.csdn.net/detail/zx13525079024/4144097


ArvinStudy
关注
专栏目录
使用js+ajax调用WCF服务
05-09
使用js+ajax调用WCF服务，博客地址：http://blog.csdn.net/zaijianluoye110/article/details/25364945
Ajax跨域调用WCF的实现
huangli321456的专栏
05-20 6706
最近需要实现通过ajax去和wcf服务端进行交互，之前也接触过wcf，但是并不是很熟悉，相信这个问题难道了不少人，而网上说的大都比较笼统，就我来说，看了也是知道个大概，想要根据上面说的去实现还要费一番功夫去总结，对于一下所说的我不敢说一定是正确的，但我确实是实现了。废话不多说，下面是我总结出来的具体方法： 首先新建一个wcf服务应用程序的项目 此时目录下会有一个Service1.s
用jQuery的Ajax调用WCF服务编程心得
mole的专栏
03-28 1432
这两天在写基于WCF服务的后台框架，过程中遇到了一些挫折，经过努力全部解决了，在此分享给大家，使用的工具是Visual Studio 2013。 该后台需要支持通过json来传递和接收数据。 首先，说说搭建过程。 第一步：创建WCF服务应用程序项目WCF。 第二步，创建服务使用的数据类 using System; using System.ComponentMod
【原创经验分享】JQuery（Ajax）调用WCF服务
weixin_33871366的博客
05-16 115
        最近在学习这个WCF，由于刚开始学 不久，发现网上的一些WCF教程都比较简单，感觉功能跟WebService没什么特别大的区别，但是看网上的介绍，就说WCF比WebService牛逼多少多少，反正我刚开始入门，就没觉得多大区别啦，这次写的东西跟WebService一样，我们写了一个WCF，那当然就是要用的，要用的话，当然不能只能在.NET平台下用了，必须跨平台呀，所以，Ajax能调...
jQuery ajax调用WCF服务实例
01-19
恩，在由瘦客户端转换成胖浏览器端的“潮流”下，必然要使用JavaScript调用后台的各种...我们需要将WCF服务的配置文件（注意如果有其他启动WCF服务的项目应该修改该项目的app.config文件）修改，将serviceHostEnvironm
jQuery实现ajax调用WCF服务的方法(附带demo下载)
10-23
首先，ajax调用WCF服务有跨域和不跨域两种方式。不跨域的ajax调用更为常见，因为它不需要额外配置跨域资源共享（CORS）。在不跨域的调用中，WCF服务必须使用webHttpBinding，因为它支持RESTful Web服务，这使得它与...
WCF与AJAX编程开发实践(1):AJAX基础概念和纯AJAX示例
微软特邀讲师 老徐FrankXuLei 的专栏
10-17 1499
Posted on 2009-10-17 00:44 Frank Xu Lei 阅读(1124) 评论(11)  编辑 收藏 网摘 所属分类: SOA and EAI, WCF与AJAX编程开发实践 <!--<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:dc="
ajax请求wcf,Ajax调用.net WCF
weixin_42474164的博客
08-05 200
实验多次，其实比较简单，只是走了不少弯路，现在总结一下，环境： VS2015创建.net WCF非常容易，我是使用IIS做服务支撑，直接在web application项目中添加新的WCF，2.添加一个service接口(这个可以不用，我习惯了)，接口中定义需要发布的几个方法。interface ISystemUserSvr{[OperationContract][WebGet]List Retr...
ajax以GET和POST方式调用WCF
01-29
ajax以GET和POST方式调用WCF，带参数和不带参数的方式都有
ajax访问wcf服务
09-06
通过jquery中的ajax访问WCF服务，可以前台向后台传递数据，后台向前台传递数据。
WCF与AJAX的交互
03-22
关于WCF与AJAX的技术。如何用WCF实现AJAX。
AJAX跟寄宿于WinForm的WCF通讯
04-22
大部分WCF都是寄宿于IIS，寄宿于WinForm的资料很少。 有相同需求的可以参考下。
ajax内调用WCF服务
weixin_30535843的博客
09-21 120
WCF可以当作WebService一样被调用，在html内通过ajax调用WCF服务的方法如下： 1、新建一个WCF服务的网站项目； 2、在项目内增加一个新项：启用了ajax的WCF服务； 3、在对应的XXService.svc.cs文件内增加方法。例： [OperationContract] [WebGet] public void DoWork() { ...
ajax调用wcf通用,支持AJAX的WCF与AJAX调用
weixin_35740588的博客
08-06 154
我怀疑我们是否可以通过PARAMS这里使用Ajax调用数据，以支持AJAX的WCF服务是我的脚本代码支持AJAX的WCF与AJAX调用$(document).ready(function() {$("#SendSms").click(function() {var data = 'Muthu';var text = JSON.stringify({ data: data });debugger;/...
JQuery调用WCF服务
weixin_33790053的博客
04-28 213
一：创建一个wcf服务项目 [ServiceContract] public interface IService1 { [OperationContract] [WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageForma...
WCF 之 AJax前台调用WCF服务
等一个故事
09-29 5806
调用WCF服务，我们一般都是中客户端的配置文件中配置好WCF服务的终结点，然后中后台代码中实例化WCF服务，然后调用其中的方法，今天给大家介绍一种，不需要配置终结点，直接中前台通过AJax方法调用WCF服务的方法。 首先我们先创建一个控制台WCF服务 契约接口： using System.ServiceModel; using System.ServiceModel.
ajax请求wcf,jQuery ajax调用WCF服务实例
weixin_39980360的博客
08-05 236
恩，在由瘦客户端转换成胖浏览器端的“潮流”下，必然要使用JavaScript调用后台的各种服务。屌丝所维护的产品通信都是使用的WCF服务，因此必然要学习这样的内容。借用jQuery强大的库，使用JavaScript访问WCF服务非常简便。同事研究了一个breeze库，那么屌丝就来试验一下ajax。这里把实现简单地记录以便马克一下，以后忘了就看这篇日志来作弊。一、更改WCF服务的配置默认情况下，WC...
使用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、付费专栏及课程。

余额充值