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

  • [アーティクル]

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

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

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

Bb472488.note(ja-jp,VS.100).gif注 :
このサンプルのセットアップ手順とビルド手順については、このトピックの最後を参照してください。

ASP.NET AJAX 以外のクライアントを使用できるようにするには、.svc ファイルで WebServiceHostFactory (WebScriptServiceHostFactory ではありません) を使用します。 WebServiceHostFactory によって、WebHttpEndpoint 標準エンドポイントがサービスに追加されます。エンドポイントは .svc ファイルに相対する空のアドレス位置に作成されます。つまり、サービスのアドレスは、操作名以外の追加のサフィックスのない https://localhost/ServiceModelSamples/service.svc になります。

<%@ServiceHost language="c#" Debug="true" Service="Microsoft.Samples.XmlAjaxService.CalculatorService" Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>

Web.config 内の次のセクションを使用して、エンドポイントに対する構成変更を追加できます。追加の変更が不要な場合は、このセクションを削除できます。

<system.serviceModel>
  <standardEndpoints>
    <webHttpEndpoint>
      <!-- Use this element to configure the endpoint -->
      <standardEndpoint name="" />
    </webHttpEndpoint>
  </standardEndpoints>
</system.serviceModel>

WebHttpEndpoint の既定のデータ形式は XML であるのに対し、WebScriptEndpoint の既定のデータ形式は JSON です。詳細については、「ASP.NET を使用せずに WCF AJAX サービスを作成する方法」を参照してください。

次に示すサンプル内のサービスは、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;
     }
}
Bb472488.Important(ja-jp,VS.100).gif 注 :
サンプルは、既にコンピューターにインストールされている場合があります。続行する前に、次の (既定の) ディレクトリを確認してください。

<InstallDrive>:\WF_WCF_Samples

このディレクトリが存在しない場合は、「.NET Framework 4 向けの Windows Communication Foundation (WCF) および Windows Workflow Foundation (WF) のサンプル」にアクセスして、Windows Communication Foundation (WCF) および WF のサンプルをすべてダウンロードしてください。このサンプルは、次のディレクトリに格納されます。

<InstallDrive>:\WF_WCF_Samples\WCF\Basic\AJAX\XmlAjaxService

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

  1. 「Windows Communication Foundation サンプルの 1 回限りのセットアップの手順」が実行済みであることを確認します。

  2. 「Windows Communication Foundation サンプルのビルド」の手順に従って、ソリューション XmlAjaxService.sln をビルドします。

  3. https://localhost/ServiceModelSamples/XmlAjaxClientPage.htm に移動します (プロジェクト ディレクトリからブラウザで XmlAjaxClientPage.htm を開かないでください)。

参照

処理手順

HTTP POST を使用する AJAX サービス