ajax调用WCF服务

来自：http://blog.youkuaiyun.com/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" onclick="fn1();" /></div>
        <input id="Button2" type="button" value="调用2" onclick="fn2();" />
        <br />
    <input id="Button3" type="button" value="调用3" onclick="fn3();" /></form>
    <br />
    <input id="Button4" type="button" value="调用4"  onclick="fn4();"/>
    
</body>
</html>

demo下载地址：

http://download.youkuaiyun.com/detail/zx13525079024/4144097