快捷導(dǎo)航

jQuery ajax調(diào)用WCF服務(wù)實(shí)例

更新時(shí)間：2014年07月16日 10:14:07 投稿：junjie

這篇文章主要介紹了jQuery ajax調(diào)用WCF服務(wù)實(shí)例,包含服務(wù)器端和客戶端的實(shí)現(xiàn)代碼,需要的朋友可以參考下

恩，在由瘦客戶端轉(zhuǎn)換成胖瀏覽器端的“潮流”下，必然要使用JavaScript調(diào)用后臺(tái)的各種服務(wù)。

屌絲所維護(hù)的產(chǎn)品通信都是使用的WCF服務(wù)，因此必然要學(xué)習(xí)這樣的內(nèi)容。借用jQuery強(qiáng)大的庫(kù)，使用JavaScript訪問(wèn)WCF服務(wù)非常簡(jiǎn)便。同事研究了一個(gè)breeze庫(kù)，那么屌絲就來(lái)試驗(yàn)一下ajax。這里把實(shí)現(xiàn)簡(jiǎn)單地記錄以便馬克一下，以后忘了就看這篇日志來(lái)作弊。

一、更改WCF服務(wù)的配置

默認(rèn)情況下，WCF服務(wù)是不允許使用HTTP請(qǐng)求來(lái)訪問(wèn)的。我們需要將WCF服務(wù)的配置文件（注意如果有其他啟動(dòng)WCF服務(wù)的項(xiàng)目應(yīng)該修改該項(xiàng)目的app.config文件）修改，將serviceHostEnvironment節(jié)添加aspNetCompatibilityEnabled屬性并設(shè)為true：

復(fù)制代碼代碼如下:

<serviceHostingEnvironment aspNetCompatibilityEnabled="true">

  <serviceActivations>

    <add relativeAddress="TableManager.svc" service="TableManagerIntegrationTestService.TestResultService" 

         factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"/>

  </serviceActivations>

</serviceHostingEnvironment>

而且，與之相關(guān)的服務(wù)binding屬性要配置成webHttpBinding，這樣js才能進(jìn)行調(diào)用：

復(fù)制代碼代碼如下:

      <service name="TableManagerIntegrationTestService.TestResultService">

        <endpoint address="" binding="webHttpBinding" contract="TableManagerIntegrationTestService.ITestResultService" behaviorConfiguration="EndpBehavior">

          <identity>

            <dns value="localhost" />

          </identity>

        </endpoint>

......

二、WCF服務(wù)的操作契約

S要調(diào)用的服務(wù)操作契約必須為WebGet或WebInvoke。標(biāo)記為WebGet屬性的可以使用HTTP GET方法調(diào)用，而WebInvoke標(biāo)記允許HTTP POST方法調(diào)用。

我這里有一個(gè)簡(jiǎn)單的例子，該WCF服務(wù)接收年月日作為參數(shù)，返回該天的日志記錄。

該服務(wù)的Service Contract定義如下：

復(fù)制代碼代碼如下:

[ServiceContract]
public interface ITestResultService
{
    [OperationContract]
    [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
    List<TestResultData> GetData(int year, int month, int date);

}

GetData方法的標(biāo)記定義了該方法允許HTTP POST方法調(diào)用，返回的數(shù)據(jù)是JSON格式。指定了數(shù)據(jù)的返回格式后，我們不需要編寫任何代碼，WCF會(huì)將一個(gè)可序列化的對(duì)象自動(dòng)轉(zhuǎn)換成對(duì)應(yīng)的格式。

在服務(wù)類中，還需要指定AspNetComatibilityRequirements標(biāo)記，如下面的示例代碼所示：

復(fù)制代碼代碼如下:

    [AspNetCompatibilityRequirements(RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed)]
    public class TestResultService : ITestResultService
    {

        public List<TestResultData> GetData(int year, int month, int date)
        {
            try
            {
                DateTime start_time = new DateTime(year, month, date, 0, 0, 0);
                DateTime end_time = new DateTime(year, month, date, 23, 59, 59);

DataSet ds = LogDataAccess.SelectDailyBuildLog(start_time, end_time);

var test_result_list = new List<TestResultData>();

                foreach (DataRow result in ds.Tables[0].Rows)
                {
                    TestResultData result_data = new TestResultData
                    {
                        DeployDate = Convert.ToDateTime(result["StatTime"]).ToString(),
                        ServerName = result["ComponentName"].ToString(),
                        Build = result["Build"].ToString(),
                        Result = result["Result"].ToString(),
                        ServerInformation = result["Versions"].ToString()
                    };

test_result_list.Add(result_data);
}

                return test_result_list;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

}
}

三、瀏覽器請(qǐng)求WCF服務(wù)

基本上，$.ajax方法需要8個(gè)參數(shù)：type指定操作方法（如POST）、url指定WCF服務(wù)的地址、data是傳給WCF的數(shù)據(jù)（也就是參數(shù)）、contentType指定data的格式（如json）和文字編碼、dataType指定返回?cái)?shù)據(jù)的格式、processData指示是否自動(dòng)將數(shù)據(jù)處理成application/x-www-form-urlencoded格式、success和error屬性指示操作成功或失敗后的回調(diào)方法。

我們?cè)谀_本中定義如下全局變量，以便調(diào)用ajax時(shí)訪問(wèn)：

復(fù)制代碼代碼如下:

var Type, Url, Data, ContentType, DataType, ProcessData;

我們編寫一個(gè)CallService方法，該方法直接調(diào)用$.ajax方法，并使用上面定義的參數(shù)：

復(fù)制代碼代碼如下:

function CallService() {

    $.ajax({

        type: Type,

        url: Url,

        data: Data,

        contentType: ContentType,

        dataType: DataType,

        processData: ProcessData,

        success: function (msg) {

            ServiceSucceded(msg);

        },

        error: ServiceFailed

    });

}

以下是調(diào)用服務(wù)的一個(gè)示例，該方法從Year、Month和Date文本框中獲取用戶輸入的數(shù)據(jù)，并調(diào)用WCF服務(wù)請(qǐng)求數(shù)據(jù)：

復(fù)制代碼代碼如下:

function WcfJson() {
    Type = "POST";
    Url = "http://localhost:8734/TableManagerIntegrationTestService/TestResultService/GetData";
    Data = '{"year":' + $("#Year").val() + ', "month":' + $("#Month").val() + ', "date":' + $("#Date").val() + '}';
    ContentType = "application/json; charset=utf-8";
    DataType = "json"; varProcessData = true;

CallService();
}

在數(shù)據(jù)請(qǐng)求成功后，會(huì)調(diào)用success參數(shù)指定的回調(diào)方法，在此我們就可以處理返回結(jié)果。

返回結(jié)果是一個(gè)json格式的數(shù)據(jù)，如我們的例子中返回的是一個(gè)結(jié)果列表。如果不確定它的結(jié)構(gòu)，可以在這里加個(gè)斷點(diǎn)看看：
可以看到結(jié)果就在result對(duì)象的GetDataResult屬性中。直接訪問(wèn)這個(gè)屬性的各元素就能得到結(jié)果了：