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 相关文章推荐
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
js时间控件只显示年月
2017/01/08 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
使用python3构建文件传输的方法
2019/02/13 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
影视艺术学院毕业生自荐信
2013/11/13 职场文书
小学生元旦感言
2014/02/26 职场文书
房屋转让协议书
2014/04/11 职场文书
学校火灾防控方案
2014/06/09 职场文书
机械专业求职信范文
2014/07/15 职场文书
单位租房协议书样本
2014/10/30 职场文书
小升初自荐信范文
2015/03/05 职场文书
财务统计员岗位职责
2015/04/14 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS