Basic AJAX サービス

SimpleAjaxService サンプルでは、Windows Communication Foundation (WCF) を使用して、基本的な ASP.NET 非同期 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 を使用してキャッシュを有効にすることもできます。 HTTP POST は、 WebGetAttribute 属性がない場合の既定値です。

[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は、サービスの既定のデータ形式を XML ではなく JSON に設定します。 サービスを呼び出すには、このトピックで後述するセットアップとビルドの手順を完了した後、 http://localhost/ServiceModelSamples/service.svc/Add?n1=100&n2=200 に移動します。 このテスト機能は、HTTP GET 要求を使用することで有効になります。

クライアント Web ページ SimpleAjaxClientPage.aspxには、ユーザーがページ上の操作ボタンの 1 つをクリックするたびにサービスを呼び出す ASP.NET コードが含まれています。 ScriptManager コントロールは、JavaScript を介してアクセス可能なサービスへのプロキシを作成するために使用されます。

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

ローカル プロキシがインスタンス化され、次の 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;
}