jQuery ajax调用WCF服务实例
恩，在由瘦客户端转换成胖浏览器端的“潮流”下，必然要使用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就会好看很多了……）
相关文章
这篇文章主要介绍了jQuery 选择器（61种）整理的相关资料,需要的朋友可以参考下2016-09-09
jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件，通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结，需要的朋友参考下2016-02-02
这篇文章主要为大家详细介绍了jquery实现下拉菜单的手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
下面小编就为大家带来一篇jquery实现表格中点击相应行变色功能效果【实例代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
jQuery 是一个非常优秀的 JavaScript 框架，在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果，让网站有更好的可用性和用户体验2011-12-12
js之ActiveX控件使用说明 new ActiveXObject()
ActiveX 控件广泛用于Internet。它们可以通过提供视频、动画内容等来增加浏览的乐趣。不过，这些程序可能出问题或者向您提供不需要的内容2014-03-03
passwordStrength 基于jquery的密码强度检测代码使用介绍
我们设定密码强度等级为10，制作一张图片表示每个等级状态，给密码框绑定keyup事件，通过keyup事件获取密码值，然后使用正则进行判断密码强度等级，然后变换相应的图片2011-10-10
在使用PDFObject.js时，由于后台需要转换数据，在前台显示的时候，有很长一段时间显示空白页面，所以想到写一个假的加载动画，下面看下实现代码2016-12-12
这篇文章主要介绍了jQuery使用ajax方法解析返回的json数据功能,结合实例形式分析了jQuery ajax操作流程及json数据处理技巧,需要的朋友可以参考下2017-01-01
一样的table？不一样的table(可编辑状态table)
今天要分享的table不仅仅能显示数据，还可以对数据进行编辑，当鼠标点击数据时相应的数据格就变成可编辑的状态，废话不多说，进入今天的主题2012-09-09
最新评论