Jquery ajax调用WCF服务

例子效果如下:原界面

 

  

点击按钮GetList get后,通过指定的Url获取数据添加到table

 

新建一个控制台项目,添加IContract.cs,DBService.cs(为了简单,契约和服务都建在一个项目里面)

一、服务的发布

   1、定义 契约接口

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Data;

namespace IContract //注意:如果命名空间为WCFHost,则在采用配置文件寄宿服务的时候会不认配置文件,不知道为什么
{
    [ServiceContract]
    public interface IContract
    {
        [OperationContract]  //通过post方法调用
        [WebInvoke( RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
        double Add(double x, double y);

        [OperationContract]  //通过get方法调用
        [WebGet( RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
        string Hello(string mes);

        [OperationContract]  //通过get方法调用
        [WebGet(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
        IList<User> getlist();

    }

    public class User
    {
        public string Name{get;set;}
        public int Age { get; set; }
    }
}

  2、服务的实现

using IContract;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Reflection;
using System.ServiceModel.Activation;
using System.Text;

namespace DBService  //注意:如果命名空间为WCFHost,则在采用配置文件寄宿服务的时候会不认配置文件,不知道为什么
{
//注意此处一定要设置,为了支持ajax调用 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class DBService:IContract.IContract { public double Add(double x, double y) { return x+y; } public string Hello(string mes) { return "holle word:" + mes; } public IList<User> getlist() { DataTable dt = new DataTable(); dt.Columns.Add("Name"); dt.Columns.Add("Age",typeof(System.Int32)); dt.Rows.Add("joe", "20"); dt.Rows.Add("ethan", "25"); dt.Rows.Add("jane", "36"); IList<User> lst = dt.ToList<User>(); return lst; } } public static class Extension { public static IList<T> ToList<T>(this DataTable dt) { var lst = new List<T>(); var plist = new List<System.Reflection.PropertyInfo>(typeof(T).GetProperties()); foreach (DataRow item in dt.Rows) { T t = System.Activator.CreateInstance<T>(); for (int i = 0; i < dt.Columns.Count; i++) { PropertyInfo info = plist.Find(p => p.Name == dt.Columns[i].ColumnName); if (info != null) { if (!Convert.IsDBNull(item[i])) { info.SetValue(t, item[i], null); } } } lst.Add(t); } return lst; ///throw new NotImplementedException(); } } }

  3、 启动服务

         3.1、方式一:以代码方式发布服务(不使用配置文件),寄宿到控制台程序。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.ServiceModel.Description;

namespace WCFHost
{
    class Program
    {
        static void Main(string[] args)
        {
            open();
        }


        static void host_Opened(object sender, EventArgs e)
        {
            Console.WriteLine("DBService opened successful");
        }


        //代码方式开启服务,此时要删除配置文件
        static void open()
        {
            //Uri uri = new Uri("http://127.0.0.1:8883/DBServer"); //和下面一句等价
            Uri uri = new Uri("http://localhost:8883/DBServer");

            using (ServiceHost host = new ServiceHost(typeof(DBService.DBService), uri))
            {
                //定义元数据发布方式,此处  通过在服务所在的URL后加“?wsdl”的方式公布WSDL,可直接通过HTTP访问得到。
                System.ServiceModel.Description.ServiceMetadataBehavior behavior = new System.ServiceModel.Description.ServiceMetadataBehavior();
                //此处没有定义mex终结点,必须设置HttpGetEnabled为true,否则客户端无法访问服务
                behavior.HttpGetEnabled = true;
                host.Description.Behaviors.Add(behavior);
               
                //添加终结点
                ServiceEndpoint endpoint = host.AddServiceEndpoint(typeof(IContract.IContract), new WebHttpBinding(), string.Empty);
               
                //设置wcf支持ajax调用,仅适用于WebHttpBinding

                         //System.ServiceModel.Description.WebScriptEnablingBehavior' is only intended for use with WebHttpBinding or similar bindings.

                endpoint.Behaviors.Add(new WebScriptEnablingBehavior());

                host.Opened += host_Opened;
                host.Open();
                Console.ReadLine();

            }
        }


    }
}

  

3.2、方式二:使用配置文件进行配置,启动服务,寄宿到控制台程序。

   新建一个配置文件App.config

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.serviceModel>
    <!--可不配置-->
    <!--同服务里面的设置[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]-->
    <!--<serviceHostingEnvironment aspNetCompatibilityEnabled="true"></serviceHostingEnvironment>-->
    <behaviors>
      <serviceBehaviors>
        <behavior name="metadataBehavior">
          <serviceMetadata httpGetEnabled="true" />  <!--以wsdl方式发布,因为没有mex终结点,此处必须设置为true,-->
        </behavior>
      </serviceBehaviors>
    <endpointBehaviors>
      <behavior name="endpointbehavior">
        <enableWebScript/>
      </behavior>
    </endpointBehaviors>
    </behaviors>
    <services>
      <!--注意此处name必须与第三步服务的命名空间一致-->
      <service behaviorConfiguration="metadataBehavior" name="DBService.DBService">
        <endpoint address="" binding="webHttpBinding"  contract="IContract.IContract" 
                  behaviorConfiguration="endpointbehavior"/>
        <host>
          <baseAddresses>
            <add baseAddress="http://127.0.0.1:8883/DBServer"/>
          </baseAddresses>
        </host>
      </service>
    </services>
  </system.serviceModel>
</configuration>

  代码开启服务,寄宿到控制台程序。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.ServiceModel.Description;

namespace WCFHost
{
    class Program
    {
        static void Main(string[] args)
        {
            StartService();
        }

        private static void StartService()
        {
            try
            {
                ServiceHost host1 = new ServiceHost(typeof(DBService.DBService));
                host1.Opened += host_Opened;
                host1.Open();
                Console.ReadLine();
            }
            catch (Exception e)
            {
                throw e;
            }
        }

        static void host_Opened(object sender, EventArgs e)
        {
            Console.WriteLine("DBService opened successful");
        }

    }
}

  

二、验证服务是否发布成功

   1、F5运行控制台程序,界面显示:DBService opened successful说明服务成功开启。

   2、在浏览器中输入http://localhost:8883/DBServer,出现如下界面,服务寄宿成功。

3、服务中定义的get方法可以直接通过浏览器验证

   3.1、验证不带参数的方法: service地址+方法名称

          在浏览器输入http://localhost:8883/DBServer/getlist  回车,会出现下面类似的提示

打开后文件内容为:

{"d":[{"__type":"User:#IContract","Age":20,"Name":"joe"},{"__type":"User:#IContract","Age":25,"Name":"ethan"},{"__type":"User:#IContract","Age":36,"Name":"jane"}]}

是 IList<User>的json格式数据。

3.2 带参数的方法,service地址+方法名称 + ? 参数1名称=值 & 参数2名称=值

      在浏览器输入http://127.0.0.1:8883/DBServer/hello?mes=nihao

      或者:http://127.0.0.1:8883/DBServer/hello?mes=”nihao“  

      会弹出是否打开or保存json文件,打开后内容为:{"d":"holle word:nihao"}

     如果Add也标记为get,那么可以用此地址调用:http://127.0.0.1:8883/DBServer/Add?x=1&y=2

三、jquery调用

1、ajax调用WCF的代码(新建一个empty web项目,添加一个webform,添加文件夹js,添加jquery-1.8.3.min.js文件)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebAjax.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        //1、Hello
        function Hello() {
            var mes = "ninhao";
            $.ajax({
                type: "get",
                //type: "POST",
                url: "http://localhost:8883/DBServer/hello?mes=" + mes,
                //url: "http://localhost:8883/DBServer/hello",  //post方式时的地址
                dataType: "json",
                //data: '{"mes":"nihao"}',  //post方式是传递的输入参数
                contentType: 'text/json',
                success: function (data) {
                    alert("successful to get data:" + data.d);
                },
                error: function (data) {
                    alert(data.statusText);
                },
            });
        }

        //2、Add
        function Add() {
            $.ajax({
                type: "POST",
                url: "http://localhost:8883/DBServer/Add",
                dataType: "json",
                contentType: 'text/json',
                data: '{"x":1,"y":2}',
                success: function (data) {
                    alert("successful:" + data.d);
                },
                error: function (data) {
                    alert(data.statusText);
                },
            });
        }

        //3、获取用户list,添加到table后面
        function getlist() {
            $.ajax({
                type: "get",
                url: "http://localhost:8883/DBServer/getlist",
                dataType: "json",
                contentType: 'text/json',
                success: function (data) {
                    var html = "";
                    $.each(data.d, function (index, item) {
                        var name = item.Name;
                        var age = item.Age;
                        html += "<tr><td>" + name + "</td><td>" + age + "</td></tr>";
                    });
                    //三种形式等价
                    //$("#mytable").after(html);
                    //$("#mytable tr").eq(0).after(html);
                    $("table tr:eq(0)").after(html);

                },
                error: function (data) {
                    alert(data.statusText);
                },
            });
        }

    </script>
</head>
<body>
    <%--<form id="form1" runat="server">--%>   <%--特别注意此处要注释掉,不然getlist看不到效果,table添加新行后立马就消失了--%>
    <div>
        <button onclick="Hello()">Hello get</button>
        <button onclick="Add()">Add post</button>
        <button onclick="getlist()">GetList get</button>
    </div>
    <table id="mytable">
        <tr>
            <td>Name</td>
            <td>Age</td>
        </tr>
        <tr>
            <td>Name</td>
            <td>Age</td>
        </tr>
    </table>
    <%--</form>--%>
</body>
</html>

四 jQuery调用WCF的要点:

  1. 契约方法加属性[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]

  2.服务类加属性 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

  3.  binding="webHttpBinding"

  4. <enableWebScript/>  或者

     //设置wcf支持ajax调用
     endpoint.Behaviors.Add(new WebScriptEnablingBehavior());

  5.  contentType: 'text/json'

五、使用System.ServiceModel.WebHttpBinding协议注意点

1、采用System.ServiceModel.WebHttpBinding协议,客户端不需要配置终结点,只需要指定一个Url即可使用ajax方法调用服务。

2、而且采用在客户端添加服务的办法是行不通的,添加服务后不会自动生成终结点配置,用客户端代理调用服务一直提示服务内部错误。

3.  host.Open();报错The communication object, System.ServiceModel.ServiceHost, cannot be used for communication because it is in the Faulted state.

    必须以管理员身份打开解决方案。

六  源代码

七、参考:

jquery ajax调用WCF,采用System.ServiceModel.WSHttpBinding协议

webHttpBinding、basicHttpBinding和wsHttpBinding区别

jQuery调用WCF需要注意的一些问题

学习 WCF (6)--学习调用WCF服务的各种方法

 

posted on 2016-01-28 19:48  AmyAlisa  阅读(2465)  评论(1编辑  收藏  举报