jQuery ajax調用WCF服務執行個體_jquery

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

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

一、更改WCF服務的配置

預設情況下，WCF服務是不允許使用HTTP請求來訪問的。我們需要將WCF服務的設定檔（注意如果有其他啟動WCF服務的項目應該修改該項目的app.config檔案）修改，將serviceHostEnvironment節添加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服務接收年月日作為參數，返回該天的日誌記錄。

該服務的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方法調用，返回的資料是JSON格式。指定了資料的返回格式後，我們不需要編寫任何代碼，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個參數：type指定操作方法（如POST）、url指定WCF服務的地址、data是傳給WCF的資料（也就是參數）、contentType指定data的格式（如json）和文字編碼、dataType指定返回資料的格式、processData指示是否自動將資料處理成application/x-www-form-urlencoded格式、success和error屬性指示操作成功或失敗後的回調方法。

我們在指令碼中定義如下全域變數，以便調用ajax時訪問：

複製代碼 代碼如下:

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

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

複製代碼 代碼如下:

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文字框中擷取使用者輸入的資料，並調用WCF服務要求資料：

複製代碼 代碼如下:

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();
}

在資料請求成功後，會調用success參數指定的回調方法，在此我們就可以處理返回結果。

返回結果是一個json格式的資料，如我們的例子中返回的是一個結果清單。如果不確定它的結構，可以在這裡加個斷點看看：
可以看到結果就在result對象的GetDataResult屬性中。直接存取這個屬性的各元素就能得到結果了：

複製代碼 代碼如下:

function ServiceSucceded(result) {
    if (DataType == "json") {
        mainView.clearItem();

        for (var i = 0; i < result.GetDataResult.length; i++) {
            var resultObject = result.GetDataResult[i];

            resultCollection.add(resultObject.ServerName, resultObject.DeployDate, resultObject.Build, resultObject.Result, resultObject.ServerInformation);
        }

        mainView.render(document.getElementById("logContainer"));
    }
}

resultCollection和mainView是我自訂的兩個類，用於儲存要顯示的資料和繪製表格。代碼在這裡就不寫了。

現在，啟動WCF的服務，然後跑我們編寫的頁面，結果就出來了：
介面很醜敬請見諒  ^_^。（稍微調下CSS就會好看很多了……）