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

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訪問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)訪問的。我們需要將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í)訪問:

復(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屬性中。直接訪問這個(gè)屬性的各元素就能得到結(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是我自定義的兩個(gè)類,用于存儲(chǔ)要顯示的數(shù)據(jù)和繪制表格。代碼在這里就不寫了。

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

相關(guān)文章

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

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

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

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

    jQuery on()方法是官方推薦的綁定事件的一個(gè)方法。使用 on() 方法可以給將來(lái)動(dòng)態(tài)創(chuàng)建的動(dòng)態(tài)元素綁定指定的事件,通過本文給大家介紹jQuery on()綁定動(dòng)態(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ì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • jquery實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能效果【實(shí)例代碼】

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

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

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

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

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

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

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

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

    jQuery生成假加載動(dòng)畫效果

    在使用PDFObject.js時(shí),由于后臺(tái)需要轉(zhuǎn)換數(shù)據(jù),在前臺(tái)顯示的時(shí)候,有很長(zhǎng)一段時(shí)間顯示空白頁(yè)面,所以想到寫一個(gè)假的加載動(dòng)畫,下面看下實(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ù),還可以對(duì)數(shù)據(jù)進(jìn)行編輯,當(dāng)鼠標(biāo)點(diǎn)擊數(shù)據(jù)時(shí)相應(yīng)的數(shù)據(jù)格就變成可編輯的狀態(tài),廢話不多說(shuō),進(jìn)入今天的主題
    2012-09-09

最新評(píng)論