zoukankan      html  css  js  c++  java

  • 如何让WCF服务更好地支持Web Request和AJAX调用

    WCF的确不错，它大大地简化和统一了服务的开发。但也有不少朋友问过我，说是在非.NET客户程序中，有何很好的方法直接调用服务吗？还有就是在AJAX的代码中（js）如何更好地调用WCF服务呢？

    我首先比较推荐的是可以通过页面静态方法等方式来转接对WCF的服务。尤其是WCF是属于别的网站的一部分的时候。

    但今天我要讲解一下，如果和WCF在一个网站内部，那么js脚本应该如何更好地调用WCF呢？或者说，为了支持js更好地访问，WCF服务在设计的时候应该注意什么呢？

    1. 创建服务

    image

    2. 修改接口

    为了做演示，我们将默认的那个Operation修改一下

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;
namespace WebApplication1
{
    // 注意: 如果更改此处的接口名称 "INorthwindService"，也必须更新 Web.config 中对 "INorthwindService" 的引用。
    [ServiceContract]
    public interface INorthwindService
    {
        [OperationContract]
        [WebGet(UriTemplate="HelloWorld")]
        string HelloWorld();
    }
}

    注意，我们这里加了一个WebGet的Attribute，这将允许WCF服务直接通过地址调用

    3. 实现服务

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

namespace WebApplication1
{
    // 注意: 如果更改此处的类名 "NorthwindService"，也必须更新 Web.config 中对 "NorthwindService" 的引用。
    public class NorthwindService : INorthwindService
    {

        #region INorthwindService 成员

        public string HelloWorld()
        {
            return "Hello,world";
        }

        #endregion
    }
}

    这里的实现依然是我最喜欢的HelloWorld

    4. 修改配置文件（web.config)，要支持直接通过WebGet的方法调用WCF服务，必须用一个特殊的binding，是webHttpBinding

     <system.serviceModel>
  <behaviors>
   <serviceBehaviors>
    <behavior name="WebApplication1.NorthwindServiceBehavior">
     <serviceMetadata httpGetEnabled="true" />
     <serviceDebug includeExceptionDetailInFaults="false" />
    </behavior>
   </serviceBehaviors>
    <endpointBehaviors>
      <behavior name="test">
        <webHttp/>
      </behavior>
    </endpointBehaviors>
  </behaviors>
  <services>
   <service behaviorConfiguration="WebApplication1.NorthwindServiceBehavior"
    name="WebApplication1.NorthwindService">
    <endpoint address="" binding="webHttpBinding" contract="WebApplication1.INorthwindService" behaviorConfiguration="test">
     <identity>
      <dns value="localhost" />
     </identity>
    </endpoint>
    <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
   </service>
  </services>
 </system.serviceModel>

    上面的粗斜体部分是要添加或者修改的

    5. 浏览该服务

    image

    我们看到，通过这样的地址就可以实现调用了。默认情况下，它返回的数据格式是XML的

    image

    6. 修改合约，让它返回json数据

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;
namespace WebApplication1
{
    // 注意: 如果更改此处的接口名称 "INorthwindService"，也必须更新 Web.config 中对 "INorthwindService" 的引用。
    [ServiceContract]
    public interface INorthwindService
    {
        [OperationContract]
        [WebGet(UriTemplate="HelloWorld",ResponseFormat=WebMessageFormat.Json)]
        string HelloWorld();
    }
}

    image

    7. 在客户端脚本js中实现对WCF的调用

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
        $(function() {
            $("#helloWorld").click(function() {
                var url = "NorthwindService.svc/HelloWorld";
                $.ajax({
                    url: url,
                    dataType: "json",
                    success: function(result) {
                        alert(result);
                    }
                });
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <input type="button" value="HelloWorld" id="helloWorld" />
    </form>
</body>
</html>

    这样是不是就很容易了呢？

    8. 实现复杂数据的处理

    注意下面代码中的黑斜体部分

    服务合约

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;
namespace WebApplication1
{
    // 注意: 如果更改此处的接口名称 "INorthwindService"，也必须更新 Web.config 中对 "INorthwindService" 的引用。
    [ServiceContract]
    public interface INorthwindService
    {
        [OperationContract]
        [WebGet(UriTemplate="HelloWorld",ResponseFormat=WebMessageFormat.Json)]
        string HelloWorld();

        [OperationContract]
        [WebGet(UriTemplate = "GetEmployee?id={id}", ResponseFormat = WebMessageFormat.Json)]
        Employee GetEmployeeInfo(int id);
    }


    public class Employee {
        public int ID { get; set; }
        public string Name { get; set; }
    }
}

    服务实现
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

namespace WebApplication1
{
    // 注意: 如果更改此处的类名 "NorthwindService"，也必须更新 Web.config 中对 "NorthwindService" 的引用。
    public class NorthwindService : INorthwindService
    {

        #region INorthwindService 成员

        public string HelloWorld()
        {
            return "Hello,world";
        }

        #endregion

        #region INorthwindService 成员


        public Employee GetEmployeeInfo(int id)
        {
            return new Employee
            {
                ID = id,
                Name = "chenxizhang"
            };
        }

        #endregion
    }
}
页面代码
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
        $(function() {
            $("#helloWorld").click(function() {
                var url = "NorthwindService.svc/HelloWorld";
                $.ajax({
                    url: url,
                    dataType: "json",
                    success: function(result) {
                        alert(result);
                    }
                });
            });


            $("#getEmployee").click(function() {
                var url = "NorthwindService.svc/GetEmployee?id=1";
                $.ajax({
                    url: url,
                    dataType: "json",
                    success: function(result) {
                        alert(result.Name);
                    }
                });

            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <input type="button" value="HelloWorld" id="helloWorld" />
    <input type="button" value="Get Employee" id="getEmployee" />
    </form>
</body>
</html>

    没错，就是这么清晰易懂的代码。
    那么，如何实现POST，或者PUT以及DELETE这种请求呢？
    9. 实现POST或者PUT，DELETE请求
    服务合约
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;
namespace WebApplication1
{
    // 注意: 如果更改此处的接口名称 "INorthwindService"，也必须更新 Web.config 中对 "INorthwindService" 的引用。
    [ServiceContract]
    public interface INorthwindService
    {
        [OperationContract]
        [WebGet(UriTemplate="HelloWorld",ResponseFormat=WebMessageFormat.Json)]
        string HelloWorld();

        [OperationContract]
        [WebGet(UriTemplate = "GetEmployee?id={id}", ResponseFormat = WebMessageFormat.Json)]
        Employee GetEmployeeInfo(int id);


        [OperationContract]
        [WebInvoke(UriTemplate = "SubmitEmployee?id={id}&Name={name}", ResponseFormat = WebMessageFormat.Json)]
        ActionResult SubmitEmployee(int id, string name);
    }


    public class Employee {
        public int ID { get; set; }
        public string Name { get; set; }
    }

    public class ActionResult{
        public int Code { get; set; }
        public string Message { get; set; }
    }
}

     
    实现服务
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

namespace WebApplication1
{
    // 注意: 如果更改此处的类名 "NorthwindService"，也必须更新 Web.config 中对 "NorthwindService" 的引用。
    public class NorthwindService : INorthwindService
    {

        #region INorthwindService 成员

        public string HelloWorld()
        {
            return "Hello,world";
        }

        #endregion

        #region INorthwindService 成员


        public Employee GetEmployeeInfo(int id)
        {
            return new Employee
            {
                ID = id,
                Name = "chenxizhang"
            };
        }

        #endregion

        #region INorthwindService 成员


        public ActionResult SubmitEmployee(int id, string name)
        {
            //这里可以将该员工提交到数据库，并且根据结果返回相应的ActionResult
            //作为演示，直接返回

            return new ActionResult
            {
                Code = 200,
                Message = string.Format("你提交了一个员工，编号为:{0},姓名为:{1}", id, name)
            };
        }

        #endregion
    }
}

     
    页面代码
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
        $(function() {
            $("#helloWorld").click(function() {
                var url = "NorthwindService.svc/HelloWorld";
                $.ajax({
                    url: url,
                    dataType: "json",
                    success: function(result) {
                        alert(result);
                    }
                });
            });


            $("#getEmployee").click(function() {
                var url = "NorthwindService.svc/GetEmployee?id=1";
                $.ajax({
                    url: url,
                    dataType: "json",
                    success: function(result) {
                        alert(result.Name);
                    }
                });

            });


            $("#submitEmployee").click(function() {
                var url = "NorthwindService.svc/SubmitEmployee?id=1&Name=chenxizhang";
                $.ajax({
                    type: "POST",
                    url: url,
                    dataType: "json",
                    success: function(result) {
                        alert(result.Code + "," + result.Message);
                    }
                });
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <input type="button" value="HelloWorld" id="helloWorld" />
    <input type="button" value="Get Employee" id="getEmployee" />
    <input type="button" value="Submit Employee" id="submitEmployee" />
    </form>
</body>
</html>

     
     
  • 相关阅读:
    浅析Vue Router中关于路由守卫的应用以及在全局导航守卫中检查元字段
    react-native 项目配置ts运行环境
    #mobx应用在rn项目中
    react-native TextInput输入框输入时关键字高亮
    react-native-亲测可用插件
    nodejs+express实现图片上传
    cordova图片上传，视频上传(上传多个图片，多个视频)
    cordova图片上传，视频上传(上传单个图片，单个视频)
    移动端如何测试(前端,cordova)
    在mac上将apk包安装到android手机上
  • 原文地址：https://www.cnblogs.com/chenxizhang/p/1675266.html
Copyright © 2011-2022 走看看