ajax调用WCF服务

关于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服务中提供的参数方法名称一致

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

服务器端配置文件代码

<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>

服务器端代码

[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; }
        }
    }

实现代码

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class Service1 : IService1
    {
        [WebInvoke(Method = "POST",ResponseFormat = Webmessageformat.Json)]
        public string GetData(int value)
        {
            return string.Format("You entered: {0}",value);
        }

        #region IService1 成员

        [WebInvoke(Method = "POST",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",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",ResponseFormat = Webmessageformat.Json)]
        public List<City> GetListData(List<City> list)
        {
            return list;
        }

        #endregion
    }

客户端调用代码

<%@ 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",contentType: "application/json",data: '{"CityID":1,success: function(returnValue) {
               alert(returnValue.CityID + '  ' + returnValue.CityName + "--" + returnValue.Seq);
               },error: function() {
                   alert('error');
               }
           });
       }

//返回值为类集合的方法
       function fn3() {
           $.ajax({
               url: "http://localhost:12079/Service1.svc/GetList",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",data: '[{"CityID":1,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.csdn.net/detail/zx13525079024/4144097