JSONP

  • 發行項

JSONP 範例會示範如何在 WCF REST 服務中支援含填補的 JSON (JSONP)。 JSONP 是一項慣例，透過在目前文件中產生指令碼標記，用來叫用 (Invoke) 跨網域指令碼。 結果會傳回到指定的回呼函式 (Callback Function)。 JSONP 的基礎概念是，像 <script src="http://..." > 之類的標記可以從任何網域評估指令碼，而這些標記擷取的指令碼會在一個範圍裡進行評估，且在這個範圍中可能已定義其他函式。

示範

使用 JSONP 撰寫的跨網域指令碼。

討論

此範例包含的網頁會在該網頁呈現在瀏覽器中之後，以動態方式加入指令碼區塊。 此指令碼區塊會呼叫具有單一作業 GetCustomer 的 WCF REST 服務。 WCF REST 服務會傳回回撥函式名稱中所包裝的客戶名稱和位址。 當 WCF REST 服務回應時，系統會使用客戶資料叫用網頁上的回呼函式，而且回呼函式會將資料顯示在網頁上。 插入指令碼標記與執行回呼函式是由 ASP.NET AJAX ScriptManager 控制項自動處理。 使用模式與使用所有 ASP.NET AJAX Proxy 相同，但是要加入一行來啟用 JSONP，如下列程式碼所示：

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

網頁可以呼叫 WCF REST 服務，因為此服務使用的是 WebScriptEndpoint，且 crossDomainScriptAccessEnabled 設定為 true。 兩個組態都是在 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 回應。 在此範例中，網頁會使用下列 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，且以網頁要求之回呼函式名稱包裝的客戶資料。 ScriptManager 將會使用指令碼標記執行這個回呼以達成跨網域要求，然後將結果傳遞到 onSuccess 標頭，這個標頭會傳遞到 ASP.NET AJAX Proxy 的 GetCustomer 作業。

此範例由兩個 ASP.NET Web 應用程式所組成：其中一個只包含一個 WCF 服務，而另一個則包含呼叫服務的 .aspx 網頁。 執行方案時，Visual Studio 將會在不同的連接埠上裝載兩個網站，這樣就可以建立一個服務和用戶端存留在不同網域上的環境。

若要執行範例

  1. 開啟 JSONP 範例的方案。

  2. 按下 F5 以在瀏覽器中啟動 http://localhost:26648/JSONPClientPage.aspx。

  3. 請注意，在頁面載入之後，會以值填入「Name」和「Address」的文字輸入。 在瀏覽器完成頁面的呈現之後，會從 WCF 服務的呼叫提供這些值。