次の方法で共有

JSONP

JSONP サンプルでは、WCF REST サービスで JSON with Padding (JSONP) をサポートする方法を示します。 JSONP は、現在のドキュメントでスクリプト タグを生成することによってクロスドメイン スクリプトを呼び出すために使用される規則です。 結果は、指定されたコールバック関数で返されます。 JSONP は、 <script src="http://..." > などのタグが任意のドメインからスクリプトを評価でき、それらのタグによって取得されたスクリプトが、他の関数が既に定義されているスコープ内で評価されるという考えに基づいています。

対象

JSONP を使用したクロスドメイン スクリプティング。

議論

このサンプルには、ブラウザーでページがレンダリングされた後にスクリプト ブロックを動的に追加する Web ページが含まれています。 このスクリプト ブロックは、単一の操作 ( GetCustomer) を持つ WCF REST サービスを呼び出します。 WCF REST サービスは、コールバック関数名にラップされた顧客の名前とアドレスを返します。 WCF REST サービスが応答すると、Web ページ上のコールバック関数が顧客データと共に呼び出され、コールバック関数によって Web ページにデータが表示されます。 スクリプト タグの挿入とコールバック関数の実行は、ASP.NET AJAX ScriptManager コントロールによって自動的に処理されます。 使用パターンは、次のコードに示すように、すべての ASP.NET AJAX プロキシと同じです。JSONP を有効にするために 1 行が追加されています。

var proxy = new JsonpAjaxService.CustomerService();
proxy.set_enableJsonp(true);
proxy.GetCustomer(onSuccess, onFail, null);

Web ページは WCF REST サービスを呼び出すことができます。このサービスは、crossDomainScriptAccessEnabledが true に設定されたWebScriptEndpointを使用しているためです。 これらの構成は両方とも、Web.config ファイルの <system.serviceModel> 要素で行います。

<system.serviceModel>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
  <standardEndpoints>
    <webScriptEndpoint>
      <standardEndpoint name="" crossDomainScriptAccessEnabled="true"/>
    </webScriptEndpoint>
  </standardEndpoints>
</system.serviceModel>

ScriptManager は、サービスとの対話を管理し、JSONP アクセスを手動で実装する複雑さを隠します。 crossDomainScriptAccessEnabledが true に設定され、操作の応答形式が JSON の場合、WCF インフラストラクチャはコールバック クエリ文字列パラメーターの要求の URI を検査し、コールバック クエリ文字列パラメーターの値で JSON 応答をラップします。 このサンプルでは、Web ページは次の URI で WCF REST サービスを呼び出します。

http://localhost:33695/CustomerService/GetCustomer?callback=Sys._json0

コールバック クエリ文字列パラメーターの値は JsonPCallback であるため、WCF サービスは次の例に示す JSONP 応答を返します。

Sys._json0({"__type":"Customer:#Microsoft.Samples.Jsonp","Address":"1 Example Way","Name":"Bob"});

この JSONP 応答には、JSON として書式設定された顧客データが含まれ、Web ページが要求したコールバック関数名でラップされます。 ScriptManager は、クロスドメイン要求を実行するためにスクリプト タグを使用してこのコールバックを実行し、ASP.NET AJAX プロキシの GetCustomer 操作に渡された onSuccess ハンドラーに結果を渡します。

サンプルは、2 つの ASP.NET Web アプリケーションで構成されています。1 つは WCF サービスのみを含み、もう 1 つはサービスを呼び出す.aspx Web ページを含みます。 ソリューションを実行すると、Visual Studio によって 2 つの Web サイトが異なるポートでホストされ、サービスとクライアントが異なるドメインに住む環境が作成されます。

サンプルを実行するには

  1. JSONP サンプルのソリューションを開きます。

  2. F5 キーを押してブラウザーでhttp://localhost:26648/JSONPClientPage.aspxを起動します。

  3. ページが読み込まれた後、"Name" と "Address" のテキスト入力に値が設定されます。 これらの値は、ブラウザーがページのレンダリングを完了した後、WCF サービスの呼び出しから提供されました。