jQuery ajax调用WCF服务实例

恩，在由瘦客户端转换成胖浏览器端的"潮流"下，必然要使用Java脚本语言调用后台的各种服务。

屌丝所维护的产品通信都是使用的WCF服务，因此必然要学习这样的内容。借用jQuery强大的库，使用Java脚本语言访问WCF服务非常简便。同事研究了一个微风库，那么屌丝就来试验一下阿贾克斯。这里把实现简单地记录以便马克一下，以后忘了就看这篇日志来作弊。

一、更改WCF服务的配置

默认情况下，WCF服务是不允许使用超文本传送协议请求来访问的。我们需要将WCF服务的配置文件（注意如果有其他启动WCF服务的项目应该修改该项目的app.config文件)修改，将服务主机环境节添加aspNetCompatibilityEnabled属性并设为真：复制代码代码如下：服务托管环境aspNetCompatibilityEnabled=' true '服务激活添加相对地址=' tablemanager。SVC ' service=' TableManagerintegrationTestServiCe .测试结果服务"工厂="系统服务模式。激活。webscriptservicehostfactory//服务激活/服务主机环境

而且，与之相关的服务有约束力的属性要配置成webHttpBinding，这样射流研究…才能进行调用：复制代码代码如下：服务名称=' TableManagerintegrationTestServiCe .TestResultService "终结点地址="绑定="WebHttpBinding "约定=" TableManagerintegrationTestServiCe " .ITestResultService '行为配置=' endpbbehavior '标识十进位计数制值=' localhost '/标识/端点.

二、WCF服务的操作契约

S要调用的服务操作契约必须为WebGet或网络调用。标记为WebGet属性的可以使用HTTP GET方法调用，而WebInvoke标记允许HTTP POST方法调用。

我这里有一个简单的例子，该WCF服务接收年月日作为参数，返回该天的日志记录。

该服务的劳务合同定义如下：复制代码代码如下：[服务合同]公共接口ITestResultService {[操作约定][WebInvoke(方法=' POST '，BodyStyle=WebMessageBodyStyle .包装，响应格式=Webmessageformat .JSON)])list estresultdata GetData(int year，int month，int date)；

}

获取数据方法的标记定义了该方法允许HTTP POST方法调用，返回的数据是JSON格式。指定了数据的返回格式后，我们不需要编写任何代码，WCF会将一个可序列化的对象自动转换成对应的格式。

在服务类中，还需要指定AspNetComatibilityRequirements标记，如下面的示例代码所示：复制代码代码如下：[aspnet compatibility requirements(需求模式=aspnet compatibility requirements模式.允许)]公共类TestResultServiCe : ItestResultServiCe { 0

public listesresultdata GetData(int year，int month，int date){ try { DateTime start _ time=new DateTime(年，月，日，0,0,0);日期时间结束时间=新的DateTime(年、月、日、23、59、59);

数据集ds=LogDataAccess .SelectDailyBuildLog(start_time，end _ time)；

var test _ result _ list=new listesresultdata()；

foreach(ds中的数据行结果。表[0]。行){测试结果数据结果数据=新测试结果数据{部署数据=转换今日时间(结果[' statime ']).ToString()，服务器名=结果['组件名'].ToString()，构建=结果['构建'].ToString()，结果=结果[“结果”].ToString()，服务器信息=结果['版本'].ToString()}；

测试结果列表添加(result _ data)；}

返回test _ result _ list } catch(Exception ex){ throw ex；} }

}}

三、浏览器请求WCF服务

基本上，$.创建交互式、快速动态网页应用的网页开发技术方法需要8个参数：类型指定操作方法（如帖子)、网址指定WCF服务的地址、数据是传给WCF的数据（也就是参数)、内容类型指定数据的格式（如json)和文字编码、数据类型指定返回数据的格式、过程数据指示是否自动将数据处理成应用程序/x-www-form-urlencoded格式、成功和错误属性指示操作成功或失败后的回调方法。

我们在脚本中定义了以下全局变量，以便在调用ajax时可以访问：复制代码如下：VarType、URL、Data、Content Type、Data Type、Process Data

我们编写了一个CallService方法，它直接调用$。ajax方法并使用上面定义的参数：复制代码如下：函数callservice () {$。Ajax ({type: type，url3360 URL，data: data，contentType: ContentType，dataType: DataType，processData: ProcessData，success 3360 function(msg){ servicesuccessed(msg)；}，error : service failed })；}

以下是调用服务的示例，该服务从年、月和日期文本框中获取用户输入的数据，并调用WCF服务来请求数据：

复制代码如下：函数wcfjson(){ type=' post '；URL=' http://localhost :8734/tablemanagintegrationtestservice/TestResultService/GetData '；数据='{'year':' $('#Year ')。val()'，' month':' $('#Month ')。val()'，' date':' $('#Date ')。val()“}”；content TYPe=' application/JSON；charset=utf-8 '；DataType=“JSON”；varProcessData=true

callServiCe()；}

数据请求成功后，将调用success参数指定的回调方法，我们可以在这里处理返回的结果。

返回的结果是json格式的数据，例如，在我们的示例中返回了一个结果列表。如果你不确定它的结构，你可以在这里添加一个断点来查看：

您可以看到结果在结果对象的GetDataResult属性中。您可以通过直接访问该属性的元素来获得结果：

复制代码如下：函数服务成功(结果){ if(datatype==' JSON '){ main view . clear item()；

for(var I=0；我的结果。GetDataResult.lengthi ) { var resultObject=result。GetDataResult[I]；

resultcollection . add(resultObject。服务器名，结果对象。部署日期，结果对象。构建，结果对象。结果，结果对象。服务器信息)；}

mainview . render(document . getelementbyid(' LogContainer '))；}}

结果集合和主视图是两个自定义的类，用于存储要显示的数据和绘制表格。这里不写代码。

现在，启动WCF服务，然后运行我们编写的页面，结果将会出来：

界面难看，请见谅。(CSS稍微调整一下会好看很多.)