jQuery ajax調用WCF服務實例

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

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

恩，在由瘦客戶端轉換成胖瀏覽器端的“潮流”下，必然要使用JavaScript調用后臺的各種服務。

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

一、更改WCF服務的配置

默認情況下，WCF服務是不允許使用HTTP請求來訪問的。我們需要將WCF服務的配置文件（注意如果有其他啟動WCF服務的項目應該修改該項目的app.config文件）修改，將serviceHostEnvironment節(jié)添加aspNetCompatibilityEnabled屬性并設為true：

復制代碼代碼如下:

<serviceHostingEnvironment aspNetCompatibilityEnabled="true">

  <serviceActivations>

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

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

  </serviceActivations>

</serviceHostingEnvironment>

而且，與之相關的服務binding屬性要配置成webHttpBinding，這樣js才能進行調用：

復制代碼代碼如下:

      <service name="TableManagerIntegrationTestService.TestResultService">

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

          <identity>

            <dns value="localhost" />

          </identity>

        </endpoint>

......

二、WCF服務的操作契約

S要調用的服務操作契約必須為WebGet或WebInvoke。標記為WebGet屬性的可以使用HTTP GET方法調用，而WebInvoke標記允許HTTP POST方法調用。

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

該服務的Service Contract定義如下：

復制代碼代碼如下:

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

}

GetData方法的標記定義了該方法允許HTTP POST方法調用，返回的數(shù)據(jù)是JSON格式。指定了數(shù)據(jù)的返回格式后，我們不需要編寫任何代碼，WCF會將一個可序列化的對象自動轉換成對應的格式。

在服務類中，還需要指定AspNetComatibilityRequirements標記，如下面的示例代碼所示：

復制代碼代碼如下:

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

}
}

三、瀏覽器請求WCF服務

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

我們在腳本中定義如下全局變量，以便調用ajax時訪問：

復制代碼代碼如下:

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

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

復制代碼代碼如下:

function CallService() {

    $.ajax({

        type: Type,

        url: Url,

        data: Data,

        contentType: ContentType,

        dataType: DataType,

        processData: ProcessData,

        success: function (msg) {

            ServiceSucceded(msg);

        },

        error: ServiceFailed

    });

}

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

復制代碼代碼如下:

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ù)請求成功后，會調用success參數(shù)指定的回調方法，在此我們就可以處理返回結果。

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