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 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 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
PHP分页显示制作详细讲解
2006/12/05 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
PHP中的use关键字概述
2014/07/23 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
js编写选项卡效果
2017/05/23 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现队列的方法
2015/05/26 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
Python按钮的响应事件详解
2019/03/04 Python
Django model select的多种用法详解
2019/07/16 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
财务出纳岗位职责
2014/02/03 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书