用JavaScript调用WCF Service-阿里云开发者社区

用JavaScript调用WCF Service

2017-11-17 1070

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

前面介绍过《Step by Step 创建一个WCF Service》和《使用WCF的Trace与Message Log功能》，本文介绍一下如何用JavaScript来调用WCF Service。

WCF Service的代码如下：

IHelloService.cs

using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

namespace HelloService
{    
    [ServiceContract(Name = "IHelloService")]    
    public interface IHelloService
    {
        [OperationContract(Name="GetMessage")]        
        string GetMessage(string name);

        [OperationContract]
        Employee GetEmployee(int id);
    }
}

HelloService.cs

using System;

namespace HelloService
{    
    public class HelloService : IHelloService
    {
        public string GetMessage(string name)
        {
            return "Hello " + name;            
        }

        public Employee GetEmployee(int id)
        {
            return new Employee() { Id = id, Name="Neil Klugman", Birthdate=new DateTime(1930, 1, 31)};
        }
    }
}

web.config文件，注意高亮部分：

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.serviceModel>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />    
    <services>
      <service name="HelloService.HelloService" behaviorConfiguration="metaBehavior">
        <endpoint address="" binding="webHttpBinding" contract="HelloService.IHelloService" behaviorConfiguration="ajaxServiceBehavior"></endpoint>
        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"></endpoint>
        <host>
          <baseAddresses>
            <add baseAddress="http://localhost:8080"/>
          </baseAddresses>
        </host>
      </service>      
    </services>
    <behaviors>
      <endpointBehaviors>
        <behavior name="ajaxServiceBehavior">
          <enableWebScript/>
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="metaBehavior">
          <serviceDebug includeExceptionDetailInFaults="true" />
          <serviceMetadata httpGetEnabled="true" />
        </behavior>
        <behavior name="">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="false" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
  </system.serviceModel>
</configuration>

创建一个客户端web application，添加一个web form，WebForm1.aspx:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>AJAX Service Client Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server">
         <Services>
             <asp:ServiceReference Path="http://192.168.6.47:8080/HelloService.svc" />
         </Services>
    </asp:ScriptManager>        
    <script lang="javascript" type="text/javascript">
        function GetValueFromServer() {
            var name = document.getElementById('txtValueContainer').value;
            tempuri.org.IHelloService.GetMessage(name, onSuccess, onFailure, null);            
        }

        function onSuccess(result) {
            document.getElementById('labelResult').value = result;
        }

        function onFailure(result) {
            window.alert(result);
        }

    </script>
    <div>
        <input id="btnServiceCaller" type="button" value="Get Value" onclick="GetValueFromServer()"; />
        <input id="txtValueContainer" type="text" value="" /> 
        <input id="labelResult" type="text" value="" />
    </div>
    </form>
</body>
</html>