jQuery ajax调用WCF服务实例


Posted in Javascript onJuly 16, 2014

恩,在由瘦客户端转换成胖浏览器端的“潮流”下,必然要使用JavaScript调用后台的各种服务。

?潘克??さ牟?吠ㄐ哦际鞘褂玫?CF服务,因此必然要学习这样的内容。借用jQuery强大的库,使用JavaScript访问WCF服务非常简便。同事研究了一个breeze库,那么?潘烤屠词匝橐幌?jax。这里把实现简单地记录以便马克一下,以后忘了就看这篇日志来作弊。

一、更改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格式的数据,如我们的例子中返回的是一个结果列表。如果不确定它的结构,可以在这里加个断点看看:
jQuery ajax调用WCF服务实例可以看到结果就在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的服务,然后跑我们编写的页面,结果就出来了:
jQuery ajax调用WCF服务实例界面很丑敬请见谅  ^_^。(稍微调下CSS就会好看很多了……)

Javascript 相关文章推荐
javascript 用原型继承来实现对象系统
Mar 22 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 #Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 #Javascript
js用typeof方法判断undefined类型
Jul 15 #Javascript
js的image onload事件使用遇到的问题
Jul 15 #Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 #Javascript
js拼接html注意问题示例探讨
Jul 14 #Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 #Javascript
You might like
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
js实现轮播图特效
2020/05/28 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python箱型图处理离群点的例子
2019/12/09 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
生产副总岗位职责
2013/11/28 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
小学生新年寄语
2014/04/03 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
通知的格式范文
2015/04/27 职场文书
企业员工辞职信范文
2015/05/12 职场文书
小学教师见习总结
2015/06/23 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
我去timi了,一起去timi是什么意思?
2022/04/13 杂记