JSON および XML 形式の AJAX サービスのサンプル

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

このサンプルでは、Windows Communication Foundation (WCF) を使用して、JSON (JavaScript Object Notation) または XML データのいずれかを返す AJAX (Asynchronous JavaScript and XML) サービスを作成する方法について説明します。AJAX サービスには、Web ブラウザクライアントから JavaScript コードを使用してアクセスできます。このサンプルは、「基本的な AJAX サービス」のサンプルに基づいています。

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

他の AJAX サンプルとは異なり、このサンプルでは ASP.NET AJAX および ScriptManager コントロールを使用しません。追加の構成を行うと、JavaScript を使用して HTML ページから WCF AJAX サービスを利用できます。このシナリオを次に示します。ASP.NET AJAX と共に WCF を使用する例については、「AJAX のサンプル」を参照してください。

このサンプルでは、JSON と XML 間で操作の応答のタイプを切り替える方法を示します。この機能は、サービスが ASP.NET AJAX または簡単な HTML/JavaScript クライアントページで使用できるように構成されているかどうかにかかわらず使用できます。

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

ASP.NET 以外のクライアントを使用できるようにするには、サンプルで次の構成セクションを使用します。

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

<enableWebScript> 動作ではなく、<webHttp> 動作を使用します。webHttp 動作の既定のデータ形式は XML で、enableWebScript 動作の既定のデータ形式は JSON です。webHttp 動作の詳細については、「Creating WCF AJAX Services without ASP.NET」を参照してください。

次に示すサンプル内のサービスは、2 つの操作が設定された標準の WCF サービスです。どちらの操作でも WebGetAttribute または WebInvokeAttribute 属性に Wrapped の本文スタイルが必要です。この本文スタイルは、webHttp 動作に固有で、JSON/XML データ形式の切り替えに影響しません。

[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.Wrapped)]
MathResult DoMathXml(double n1, double n2);

この操作の応答形式は、XML として指定されています。これは、<webHttp> 動作の既定の設定です。ただし、応答形式を明示的に指定することをお勧めします。

その他の操作では WebInvokeAttribute 属性を使用し、応答に XML ではなく JSON を明示的に指定します。

[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
MathResult DoMathJson(double n1, double n2);

どちらの場合でも、操作により、標準の WCF データコントラクト型である複合型 MathResult が返されます。

クライアント Web ページ XmlAjaxClientPage.htm には、ページ上の [Perform calculation (return JSON)] または [Perform calculation (return XML)] ボタンをクリックすると上記の 2 つの操作のどちらかを呼び出す JavaScript コードが含まれています。サービスを呼び出すコードによって JSON 本文が作成され、HTTP POST を使用して送信されます。「基本的な AJAX サービス」のサンプルや、ASP.NET AJAX を使用するその他のサンプルとは異なり、要求は JavaScript で手動で作成します。

// Create HTTP request
var xmlHttp;
// Request instantiation code omitted…
// Result handler code omitted…

// Build the operation URL
var url = "service.svc/ajaxEndpoint/";
url = url + operation;

// Build the body of the JSON message
var body = '{"n1":';
body = body + document.getElementById("num1").value + ',"n2":';
body = body + document.getElementById("num2").value + '}';
  
// Send the HTTP request
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/json");
xmlHttp.send(body);

サービスが応答すると、応答はこれ以上の処理を行わずにページ上のテキストボックスに表示されます。これは、使用される XML および JSON データ形式を直接確認できるように、デモンストレーションの目的で実装されています。

// Create result handler 
xmlHttp.onreadystatechange=function(){
     if(xmlHttp.readyState == 4){
          document.getElementById("result").value = xmlHttp.responseText;
     }
}

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

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

次の方法で共有

JSON および XML 形式の AJAX サービスのサンプル

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

関連項目

その他の技術情報

その他のリソース