WCF 服務在 JavaScript 中調用：ASP.NET AJAX 兩大啟用模式

兩種服務創建方式

方式一：AJAX 啟用 WCF 服務模板

1. 右鍵專案 → 添加新項目 → 「AJAX 啟用的 WCF 服務」
2. 命名 HelloWorldService.svc
3. 自動生成：.svc、.svc.cs、web.config 端點配置

<%@ ServiceHost Language="C#" Debug="true" 
    Service="WebUI.HelloWorldService" 
    CodeBehind="HelloWorldService.svc.cs" %>

// HelloWorldService.svc.cs
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
[ServiceContract(Namespace = "")]
public class HelloWorldService {
    [OperationContract]
    [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json)]
    public string SayHello(string name) {
        return $"Hello, {name}!";
    }
}

方式二：服務接口 + 類庫分離

// 契約程序集 (獨立部署)
[ServiceContract]
public interface IHelloService {
    [OperationContract]
    [WebGet(ResponseFormat = WebMessageFormat.Json)]
    string GetGreeting(string name);
}

// 實現程序集
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class HelloService : IHelloService {
    public string GetGreeting(string name) => $"Welcome, {name}!";
}

// .svc 文件
<%@ ServiceHost Language="C#" Debug="true" 
    Service="MyServices.HelloService" 
    Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" %>

JavaScript 調用代碼

<script src="HelloWorldService.svc/jsdebug" type="text/javascript"></script>
<script>
    // 方式一：生成的代理類
    HelloWorldService.SayHello("張三", onSuccess, onError, null);
    
    function onSuccess(result) { alert(result); } // "Hello, 張三!"
    function onError(err) { console.error(err); }

    // 方式二：jQuery 直接調用 (REST 風格)
    $.ajax({
        url: "HelloService.svc/GetGreeting",
        data: { name: "李四" },
        dataType: "json",
        success: function(resp) { alert(resp.d); } // ASP.NET 包裹在 .d
    });
</script>

序列化圖解

關鍵配置點

• WebScriptServiceHostFactory：自動啟用 JSON 端點、生成 JS 代理
• AspNetCompatibilityRequirements：訪問 Session、Cache、User 等 ASP.NET 上下文
• WebInvoke/WebGet：控制 HTTP 動詞、請求/響應格式
• crossDomainScriptAccessEnabled="true"：支持跨域 JSONP (需謹慎)