WCF RESTful 服务及其在 HTML 页面中的消费

Sudheer Reddy K

4.76/5 (11投票s)

2013年6月30日

CPOL

6分钟阅读

101145

3678

本文解释了如何使用 jQuery AJAX 调用创建 WCF RESTful 服务并在普通 HTML 页面中对其进行调用。

下载源码 - 94.8 KB

引言

在本文中，我讨论了 WCF REST 服务以及如何在普通 HTML 页面中使用它们。我们将从服务开发者的角度了解创建 RESTful WCF 服务所需的内容。我们将了解如何使用和调用 RESTful WCF 服务。

背景

REST 概述

REST 是 Representational State Transfer（表述性状态转移）的缩写。这是一种在分布式环境中交换数据的协议。REST 的主要思想是我们将分布式服务视为一个资源，并且我们应该能够使用简单的 HTTP 协议对该资源执行各种操作。

现在，基本的 CRUD 操作以以下方式映射到 HTTP 协议：

GET：这映射到 CRUD 操作的 R(Retrieve) 部分。这将用于从远程资源检索所需数据（数据表示）。
POST：这映射到 CRUD 操作的 U(Update) 部分。此协议将更新远程服务器上数据的当前表示。
PUT：这映射到 CRUD 操作的 C(Create) 部分。这将为当前发送到服务器的数据创建一个新条目。
DELETE：这映射到 CRUD 操作的 D(Delete) 部分。这将从远程服务器删除指定的数据。

应用演练

当您在 Visual Studio 中创建 WCF 服务应用程序项目时，您会获得 IService1.cs 和 Service1.svc 文件以及其他一些与项目相关的文件。首先，我们将讨论一些在文章中使用的定义。

Operation Contract (操作契约)：Operation Contract 属性用于指定该方法是一个 Web 服务方法。除非您声明该属性，否则它将被视为一个普通方法，无法向外部公开供其调用。
Data Contract (数据契约)：Data Contract 属性用于指定包含属性、字段的类，通过这些属性和字段，我们存储业务数据，并使用 Web 服务将业务数据传输给调用它的客户端。
Data Member (数据成员)：Data Member 属性与 DataContract 类的一个属性或字段一起使用。如果您希望此字段数据发送到客户端，则应将其属性设置为 DataMember。
End Point (端点)：与 Windows Communication Foundation (WCF) 服务的所有通信都通过服务的端点进行。端点为客户端提供了访问 WCF 服务所提供功能的途径。

每个端点包含四个属性：

一个地址，指示端点可以在哪里找到。
一个绑定，指定客户端如何与端点通信。
一个契约，标识可用的操作。
一组行为，指定端点的本地实现细节。

Binding (绑定)：绑定指定 Windows Communication Foundation (WCF) 服务端点如何与其他端点通信。
Service Contract (服务契约)：服务契约描述了服务提供的操作。一个服务可以有多个服务契约，但至少要有一个服务契约。

服务契约可以使用 [ServiceContract] 和 [OperationContract] 属性进行定义。[ServiceContract] 属性类似于 WebService 中的 [WebServcie] 属性，而 [OpeartionContract] 类似于 WebService 中的 [WebMethod]。

现在我们将看到如何创建两个 Web 服务方法：

返回 employee 类实例作为 XML 输出的方法。
返回 employee 类实例作为 JSON 输出的方法。

在代码中，我创建了两个实体：

EmployeeXML 类

using System.Runtime.Serialization;

namespace WcfServiceXmlAndJsonDemo
{
    /// <summary>
    /// EmployeeXML class : This class is retrieved through servie
    /// as XML representation.
    /// </summary>
    [DataContract]
    public class EmployeeXML
    {
        #region Properties

        [DataMember]
        public string Name { get; set; }

        [DataMember]
        public int Id { get; set; }

        [DataMember]
        public double Salary { get; set; }

        #endregion
    }
}

EmployeeJSON 类

namespace WcfServiceXmlAndJsonDemo
{
    /// <summary>
    /// EmployeeJSON class : This class is retrieved through servie
    /// as JSON(JavaScript Object Notation) representation.
    /// </summary>
    [DataContract]
    public class EmployeeJSON
    {
        #region Properties

        [DataMember]
        public string Name { get; set; }

        [DataMember]
        public int Id { get; set; }

        [DataMember]
        public double Salary { get; set; }

        #endregion
    }
}

第一个方法的返回类型是 EmployeeXML 类的实例，第二个方法也是如此。现在我将向您展示如何将我们的服务方法公开给客户端。

在 IService1 接口中声明这两个方法，如下所示：

[ServiceContract]
public interface IService1
{
    #region OperationContracts

    [OperationContract]
    [WebInvoke(Method="GET",UriTemplate="GetXml", 
      ResponseFormat=WebMessageFormat.Xml,RequestFormat=WebMessageFormat.Xml,
      BodyStyle=WebMessageBodyStyle.Bare)]
    EmployeeXML GetEmployeeXML();

    [OperationContract]
    [WebInvoke(Method = "GET", UriTemplate = "GetJson", 
      ResponseFormat = WebMessageFormat.Json, 
      RequestFormat = WebMessageFormat.Json, 
      BodyStyle = WebMessageBodyStyle.Wrapped)]
    EmployeeJSON GetEmployeeJSON();

    #endregion
}

Method="GET" 指定它是执行检索操作的 HTTP GET 动词。
UriTemplate="GetXml" 是访问该方法的路径（https:///Service1.svc/GetXml）。
ResponseFormat 指定方法的响应格式，而 RequestFormat 是发送数据的方式（如果方法需要任何参数来请求任何数据）。

现在，在 Service1.svc 文件中实现这些方法，如下所示：

public class Service1 : IService1
{
    #region ImplementedMethods

    public EmployeeXML GetEmployeeXML()
    {
        EmployeeXML xml = new EmployeeXML() {Name="Sudheer",Id=100,Salary=4000.00 };
        return xml; ;
    }

    public EmployeeJSON GetEmployeeJSON()
    {
        EmployeeJSON json = new EmployeeJSON() {Name="Sumanth",Id=101,Salary=5000.00 };
        return json;
    }

    #endregion
}

下一个重要的事情是 Web.config 文件，它是服务中的关键部分。在 web.config 中，您应该指定服务元数据，即绑定和端点的详细信息，客户端可以通过这些信息访问您的服务。在 web.config 文件中需要考虑的重要事项是：

服务行为。
端点行为。

<system.servicemodel>
    <behaviors>
      <servicebehaviors>
        <behavior>
          <servicemetadata httpsgetenabled="true" httpgetenabled="true">
          <servicedebug includeexceptiondetailinfaults="false">
        </servicedebug> </servicemetadata></behavior>
      </servicebehaviors>
    <endpointbehaviors>
      <behavior name="web">
        <webhttp>
      </webhttp></behavior>
    </endpointbehaviors>
    </behaviors>
    <protocolmapping>
        <add scheme="https" binding="basicHttpsBinding">
    </add></protocolmapping>    
    <servicehostingenvironment multiplesitebindingsenabled="true" aspnetcompatibilityenabled="true">
  <services>
    <service name="WcfServiceXmlAndJsonDemo.Service1">
      <endpoint binding="webHttpBinding" 
        contract="WcfServiceXmlAndJsonDemo.IService1" behaviorconfiguration="web">
    </endpoint> </service>
  </services>
  </servicehostingenvironment>
</system.servicemodel>

测试服务

现在右键单击 Service1.svc 文件，然后选择 在浏览器中查看 选项，如下所示：

现在您的浏览器看起来像这样：

现在添加方法的 uritemplate 来查看输出。例如，localhost:1249/Service1.svc/GetXml 会产生以下输出：

同样，您也可以通过添加特定于 JSON 方法（GetJson）的 uritemplate 来查看 JSON 输出。以下是 JSON 输出：

客户端应用程序使用 WCF 服务

现在，继续创建一个空的 Web 应用程序，并添加一个包含以下代码的 HTML 页面。注意：不要忘记将 jQuery 库添加到应用程序中，因为我们将使用 jQuery AJAX 调用来使用 WCF 服务。页面的 HTML 代码如下（代码的一部分，完整代码请参阅我附加的代码）：

<script>
    $(document).ready(function () {    
    });
    var GetJson = function () {
        $.ajax({
            type: "GET",
            url: "https://:4545/Service/Service1.svc/GetJson",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data) {
                var result = data.GetEmployeeJSONResult;
                var id = result.Id;
                var name = result.Name;
                var salary = result.Salary;
                $('#jsonData').html('');
                $('#jsonData').append('<table border="1"><tbody><tr><th>" + 
                  "Employee Id</th><th>Name</th><th>Salary</th>" + 
                  "</tr><tr><td>' + id + '</td><td>' + name + 
                  '</td><td>' + salary + '</td></tr></tbody></table>');

            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });
    }
    var GetXml = function () {
        $.ajax({
            type: "GET",
            url: "https://:4545/Service/Service1.svc/GetXml",
            dataType: "xml",
            success: function (xml) {
                $(xml).find('EmployeeXML').each(function () {
                    var id = $(this).find('Id').text();
                    var name = $(this).find('Name').text();
                    var salary = $(this).find('Salary').text();
                    $('#xmlData').html('');
                    $('#xmlData').append('<table border="1"><tbody><tr><th>Employee" + 
                      " Id</th><th>Name</th><th>Salary</th></tr><tr><td>' + 
                      id + '</td><td>' + name + '</td><td>' + salary + 
                      '</td></tr></tbody></table>');
                });
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });
    }
</script>

上面提供的 URL 已经发布并托管在 IIS 中。它可能与您的不同。因此，请按照以下步骤将应用程序托管在 IIS 中。

现在我们的代码部分已准备就绪。接下来的重要部分是在 IIS 中将您的服务和客户端应用程序托管在同一端口上。我指定同一端口的原因是 WCF 服务帐户的跨域问题，即客户端应用程序应在服务运行的同一端口下运行。