欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2014年07月16日 10:14:07   投稿:junjie  
這篇文章主要介紹了jQuery ajax調(diào)用WCF服務(wù)實(shí)例,包含服務(wù)器端和客戶端的實(shí)現(xiàn)代碼,需要的朋友可以參考下

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

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

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

默認(rèn)情況下,WCF服務(wù)是不允許使用HTTP請求來訪問的。我們需要將WCF服務(wù)的配置文件(注意如果有其他啟動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)用。

我這里有一個簡單的例子,該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會將一個可序列化的對象自動轉(zhuǎn)換成對應(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;
            }
        }

    }
}

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

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

我們在腳本中定義如下全局變量,以便調(diào)用ajax時訪問:

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

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

我們編寫一個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ù)的一個示例,該方法從Year、Month和Date文本框中獲取用戶輸入的數(shù)據(jù),并調(diào)用WCF服務(wù)請求數(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ù)請求成功后,會調(diào)用success參數(shù)指定的回調(diào)方法,在此我們就可以處理返回結(jié)果。

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

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

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是我自定義的兩個類,用于存儲要顯示的數(shù)據(jù)和繪制表格。代碼在這里就不寫了。

現(xiàn)在,啟動WCF的服務(wù),然后跑我們編寫的頁面,結(jié)果就出來了:
界面很丑敬請見諒  ^_^。(稍微調(diào)下CSS就會好看很多了……)

相關(guān)文章

  • jQuery 選擇器(61種)整理總結(jié)

    jQuery 選擇器(61種)整理總結(jié)

    這篇文章主要介紹了jQuery 選擇器(61種)整理的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • jQuery on()綁定動態(tài)元素出現(xiàn)的問題小結(jié)

    jQuery on()綁定動態(tài)元素出現(xiàn)的問題小結(jié)

    jQuery on()方法是官方推薦的綁定事件的一個方法。使用 on() 方法可以給將來動態(tài)創(chuàng)建的動態(tài)元素綁定指定的事件,通過本文給大家介紹jQuery on()綁定動態(tài)元素出現(xiàn)的問題小結(jié),需要的朋友參考下
    2016-02-02
  • jquery實(shí)現(xiàn)下拉菜單的手風(fēng)琴效果

    jquery實(shí)現(xiàn)下拉菜單的手風(fēng)琴效果

    這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)下拉菜單的手風(fēng)琴效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • jquery實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能效果【實(shí)例代碼】

    jquery實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能效果【實(shí)例代碼】

    下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能效果【實(shí)例代碼】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考
    2016-05-05
  • 40款非常有用的 jQuery 插件推薦(系列一)

    40款非常有用的 jQuery 插件推薦(系列一)

    jQuery 是一個非常優(yōu)秀的 JavaScript 框架,在現(xiàn)在的 Web 開發(fā)項(xiàng)目中扮演著重要角色。jQuery 使用簡單靈活,同時還有許多成熟的插件可供選擇,它可以幫助你在項(xiàng)目中加入一些非常好的效果,讓網(wǎng)站有更好的可用性和用戶體驗(yàn)
    2011-12-12
  • js之ActiveX控件使用說明 new ActiveXObject()

    js之ActiveX控件使用說明 new ActiveXObject()

    ActiveX 控件廣泛用于Internet。它們可以通過提供視頻、動畫內(nèi)容等來增加瀏覽的樂趣。不過,這些程序可能出問題或者向您提供不需要的內(nèi)容
    2014-03-03
  • passwordStrength 基于jquery的密碼強(qiáng)度檢測代碼使用介紹

    passwordStrength 基于jquery的密碼強(qiáng)度檢測代碼使用介紹

    我們設(shè)定密碼強(qiáng)度等級為10,制作一張圖片表示每個等級狀態(tài),給密碼框綁定keyup事件,通過keyup事件獲取密碼值,然后使用正則進(jìn)行判斷密碼強(qiáng)度等級,然后變換相應(yīng)的圖片
    2011-10-10
  • jQuery生成假加載動畫效果

    jQuery生成假加載動畫效果

    在使用PDFObject.js時,由于后臺需要轉(zhuǎn)換數(shù)據(jù),在前臺顯示的時候,有很長一段時間顯示空白頁面,所以想到寫一個假的加載動畫,下面看下實(shí)現(xiàn)代碼
    2016-12-12
  • jQuery使用ajax方法解析返回的json數(shù)據(jù)功能示例

    jQuery使用ajax方法解析返回的json數(shù)據(jù)功能示例

    這篇文章主要介紹了jQuery使用ajax方法解析返回的json數(shù)據(jù)功能,結(jié)合實(shí)例形式分析了jQuery ajax操作流程及json數(shù)據(jù)處理技巧,需要的朋友可以參考下
    2017-01-01
  • 一樣的table?不一樣的table(可編輯狀態(tài)table)

    一樣的table?不一樣的table(可編輯狀態(tài)table)

    今天要分享的table不僅僅能顯示數(shù)據(jù),還可以對數(shù)據(jù)進(jìn)行編輯,當(dāng)鼠標(biāo)點(diǎn)擊數(shù)據(jù)時相應(yīng)的數(shù)據(jù)格就變成可編輯的狀態(tài),廢話不多說,進(jìn)入今天的主題
    2012-09-09

最新評論