基本的な AJAX サービス

[アーティクル]
09/17/2008

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

WCF での AJAX サポートは、ScriptManager コントロールを介して ASP.NET AJAX と共に使用するために最適化されています。ASP.NET AJAX と共に WCF を使用する例については、「AJAX のサンプル」を参照してください。

メモ :
このサンプルをビルドして実行するには、.NET Framework Version 3.5 をインストールする必要があります。プロジェクトファイルとソリューションファイルを開くには、Visual Studio 2008 が必要です。

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

次のコードでは、サービスが確実に HTTP GET 要求に応答するように WebGetAttribute 属性が Add 操作に適用されています。このコードでは、簡単にするために GET を使用します (すべての Web ブラウザから HTTP GET 要求を構築できます)。また、GET を使用してキャッシングを有効にすることもできます。HTTP POST は WebGetAttribute 属性を使用しない場合の既定です。

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

<webHttpBinding> 標準バインディングとサービス構成ファイルの <enableWebScript> 動作を使用して、サービスに AJAX エンドポイントを作成できます。

<system.serviceModel>
    <behaviors>
        <endpointBehaviors>
            <behavior name="Microsoft.Ajax.Samples.CalculatorServiceAspNetAjaxBehavior">
                <enableWebScript />
            </behavior>
        </endpointBehaviors>
    </behaviors>
    <services>
        <service name="Microsoft.Ajax.Samples.CalculatorService">
            <endpoint address=" "
                behaviorConfiguration="Microsoft.Ajax.Samples.CalculatorServiceAspNetAjaxBehavior" 
                binding="webHttpBinding"
                contract="Microsoft.Ajax.Samples.ICalculator" />
        </service>
    </services>
</system.serviceModel>

enableWebScript 動作は、サービスの既定のデータ形式を XML ではなく JSON に設定します。サービスを呼び出すには、以下のセットアップ手順とビルド手順を完了してから、https://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 ommitted…
// Instantiate a service proxy
var proxy = new SimpleAjaxService.ICalculator();
// Code for selecting operation ommitted…
proxy.Add(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);

サービス呼び出しが成功すると、コードは onSuccess ハンドラを呼び出し、操作の結果がテキストボックスに表示されます。

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

サンプルを設定、ビルド、および実行するには

「Windows Communication Foundation サンプルの 1 回限りのセットアップの手順」のセットアップ手順を実行します。
「Windows Communication Foundation サンプルのビルド」の手順に従って、ソリューション SimpleAjaxService.sln をビルドします。
https://localhost/ServiceModelSamples/SimpleAjaxClientPage.aspx に移動します (プロジェクトディレクトリからブラウザで SimpleAjaxClientPage.aspx を開かないでください)。

Footer image

基本的な AJAX サービス

サンプルを設定、ビルド、および実行するには

その他のリソース