基本 AJAX 服務

SimpleAjaxService 範例示範如何使用 Windows Communication Foundation （WCF） 來建立基本 ASP.NET 異步 JavaScript 和 XML （AJAX） 服務（您可以從網頁瀏覽器用戶端使用 JavaScript 程式代碼存取的服務）。 服務會 WebGetAttribute 使用 屬性來確保服務會回應 HTTP GET 要求，並設定為使用 JavaScript 物件表示法 （JSON） 數據格式進行回應。

WCF 中的 AJAX 支援已優化，可透過 ScriptManager 控件與 ASP.NET AJAX 搭配使用。 如需使用 WCF 搭配 ASP.NET AJAX 的範例，請參閱 AJAX 範例集。

備註

此範例的設定程式和建置指示位於本主題結尾。

在下列程式代碼中， WebGetAttribute 屬性會套用至 Add 作業，以確保服務回應 HTTP GET 要求。 程式代碼使用 GET 以求簡單（您可以從任何網頁瀏覽器建構 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 可用來讓 Proxy 可透過 JavaScript 存取服務。

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

本機 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;
}