当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery ajax调用WCF服务实例教程

jQuery ajax调用WCF服务实例教程

2019年04月16日  | 移动技术网IT编程  | 我要评论

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

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

一、更改wcf服务的配置

默认情况下，wcf服务是不允许使用http请求来访问的。我们需要将wcf服务的配置文件（注意如果有其他启动wcf服务的项目应该修改该项目的app.config文件）修改，将servicehostenvironment节添加netcompatibilityenabled属性并设为true：

复制代码 代码如下:


<servicehostingenvironment aspnetcompatibilityenabled="true">
  <serviceactivations>
    <add relativeaddress="tablemanager.s" 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 = "https://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就会好看很多了……）

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网