基本的な AJAX サービス

[アーティクル]
05/10/2023

SimpleAjaxService のサンプルでは、Windows Communication Foundation (WCF) を使用して基本的な ASP.NET AJAX (Asynchronous JavaScript and XML) サービス (Web ブラウザークライアントから JavaScript コードを使用してアクセスできるサービス) を作成する方法を示します。このサービスは、WebGetAttribute 属性を使用してサービスが HTTP GET 要求に応答し、JSON (JavaScript Object Notation) データ形式を使用して応答するように構成されていることを確認します。

WCF での AJAX サポートは、ScriptManager コントロールを介して ASP.NET AJAX と共に使用できるように最適化されています。 ASP.NET AJAX と共に WCF を使用する例については、AJAX のサンプルをご覧ください。

Note

このサンプルのセットアップ手順とビルド手順については、このトピックの最後を参照してください。

次のコードでは、サービスが確実に HTTP GET 要求に応答するように WebGetAttribute 属性が Add 操作に適用されています。このコードでは、簡単にするために 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 には、ユーザーがページ上のいずれかの操作ボタンをクリックするとサービスを呼び出す 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;
}

次の方法で共有

基本的な AJAX サービス

その他のリソース