基本 AJAX 服務

發行項
03/13/2024

SimpleAjaxService 範例會示範如何使用 Windows Communication Foundation (WCF) 來建立基本 ASP.NET Asynchronous JavaScript 與 XML (AJAX) 服務 (指您可以從 Web 瀏覽器用戶端使用 JavaScript 程式碼存取的服務)。此服務會使用 WebGetAttribute 屬性來確保服務回應 HTTP GET 要求，並且設定為以 JavaScript Object Notation (JSON) 資料格式做為回應的格式。

WCF 中的 AJAX 支援已針對透過 ScriptManager 控制項來搭配 ASP.NET AJAX 使用完成最佳化。如需搭配 ASP.NET AJAX 使用 WCF 的範例，請參閱 AJAX 範例 (部分機器翻譯)。

注意

此範例的安裝程序與建置指示位於本主題的結尾。

在下列程式碼中，WebGetAttribute 屬性會套用至 Add 作業以確定服務會回應 HTTP GET 要求。為了簡單起見，此段程式碼會使用 GET (您可以從任何 Web 瀏覽器建構 HTTP GET 要求)。您也可以使用 GET 啟用快取。若是缺少 WebGetAttribute 屬性，HTTP POST 便會是預設值。

[ServiceContract(Namespace = "SimpleAjaxService")]
public interface ICalculator
{
    [WebGet]
    double Add(double n1, double n2);
    //Other operations omitted…
}

此範例 .svc 檔案會使用 WebScriptServiceHostFactory，以便將 WebScriptEndpoint 標準端點加入至服務。此端點是在與 .svc 檔相對的空白位址上設定。這表示此服務的位址會是 http://localhost/ServiceModelSamples/service.svc，不含任何有別於作業名稱的其他後置字元。

<%@ServiceHost language="C#" Debug="true" Service="Microsoft.Samples.SimpleAjaxService.CalculatorService" Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" %>

WebScriptEndpoint 已預先設定，可讓您從 ASP.NET AJAX 用戶端頁面存取服務。 Web.config 中的以下區段可用來針對端點進行其他組態變更。如果不需要額外的變更，也可以加以移除。

<system.serviceModel>
  <standardEndpoints>
    <webScriptEndpoint>
      <!-- Use this element to configure the endpoint -->
      <standardEndpoint name=""  />
    </webScriptEndpoint>
  </standardEndpoints>
</system.serviceModel>

WebScriptEndpoint 會將服務的預設資料格式設定為 JSON 而不是 XML。若要叫用服務，請在完成本主題稍後所示的設定和建置步驟之後，瀏覽至 http://localhost/ServiceModelSamples/service.svc/Add?n1=100&n2=200。這個測試功能會在使用 HTTP GET 要求時啟用。

用戶端網頁 SimpleAjaxClientPage.aspx 包含 ASP.NET 程式碼，此程式碼會在使用者每次按下網頁上其中一個作業按鈕時叫用此服務。 ScriptManager 控制項會用來設定可透過 JavaScript 存取之服務的 Proxy。

<asp:ScriptManager ID="ScriptManager" runat="server">
    <Services>
        <asp:ServiceReference Path="service.svc" />
    </Services>
</asp:ScriptManager>

這時會具現化 (Instantiated) 本機 Proxy，並使用下列 JavaScript 程式碼叫用作業。

// Code for extracting arguments n1 and n2 omitted…
// Instantiate a service proxy
var proxy = new SimpleAjaxService.ICalculator();
// Code for selecting operation omitted…
proxy.Add(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);

如果此服務呼叫成功，該段程式碼就會叫用 onSuccess 處理常式，而作業結果會顯示於文字方塊中。

function onSuccess(mathResult){
     document.getElementById("result").value = mathResult;
}

共用方式為

基本 AJAX 服務

其他資源