關於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", 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
    }

  客戶端呼叫程式碼

<%@ 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下載地址：