jQuery ajax調(diào)用WCF服務(wù)實(shí)例
恩,在由瘦客戶端轉(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:
<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)用:
<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定義如下:
[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)記,如下面的示例代碼所示:
[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í)訪問:
var Type, Url, Data, ContentType, DataType, ProcessData;
我們編寫一個(gè)CallService方法,該方法直接調(diào)用$.ajax方法,并使用上面定義的參數(shù):
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ù):
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é)果了:
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ì)好看很多了……)
- C# 一個(gè)WCF簡(jiǎn)單實(shí)例
- 關(guān)于.NET/C#/WCF/WPF 打造IP網(wǎng)絡(luò)智能視頻監(jiān)控系統(tǒng)的介紹
- C# WCF簡(jiǎn)單入門圖文教程(VS2010版)
- C# yield在WCF中的錯(cuò)誤用法(一)
- C# yield在WCF中的錯(cuò)誤使用(二)
- jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程
- jquery調(diào)用wcf并展示出數(shù)據(jù)的方法
- WinForm窗體調(diào)用WCF服務(wù)窗體卡死問題
- jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法(附帶demo下載)
- 總結(jié)C#動(dòng)態(tài)調(diào)用WCF接口的兩種方法
相關(guān)文章
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-02jquery實(shí)現(xiàn)下拉菜單的手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)下拉菜單的手風(fēng)琴效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07jquery實(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-05js之ActiveX控件使用說(shuō)明 new ActiveXObject()
ActiveX 控件廣泛用于Internet。它們可以通過提供視頻、動(dòng)畫內(nèi)容等來(lái)增加瀏覽的樂趣。不過,這些程序可能出問題或者向您提供不需要的內(nèi)容2014-03-03passwordStrength 基于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-10jQuery使用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不僅僅能顯示數(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