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

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

XmlAjaxService のサンプルでは、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 のサンプルをご覧ください。

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

Note

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

ASP.NET AJAX 以外のクライアントを使用するには、.svc ファイルで WebServiceHostFactory (WebScriptServiceHostFactory ではありません) を使用します。 WebServiceHostFactory によって、WebHttpEndpoint 標準エンドポイントがサービスに追加されます。エンドポイントは、.svc ファイルに対して相対的に空のアドレスで構成されます。つまり、サービスのアドレスは http://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 サービスです。どちらの操作でも Wrapped または WebGetAttribute 属性に WebInvokeAttribute の本文スタイルが必要です。この本文スタイルは、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 をビルドします。
http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm に移動します (プロジェクトディレクトリからブラウザーで XmlAjaxClientPage.htm を開かないでください)。

次の方法で共有

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

サンプルをセットアップ、ビルド、および実行するには

関連項目

その他のリソース