含 JSON 和 XML 的 AJAX 服務範例

發行項
09/12/2008

這個範例會示範如何使用 Windows Communication Foundation (WCF) 建立會傳回 JavaScript 物件標記法 (JSON) 或 XML 資料的 Asynchronous JavaScript 與 XML (AJAX) 服務。您可以從 Web 瀏覽器用戶端使用 JavaScript 程式碼存取 AJAX 服務。這個範例是以基本 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>

請注意，這時是使用 <webHttp> 行為，而不是使用 <enableWebScript> 行為。webHttp 行為的預設資料格式是 XML，而 enableWebScript 行為的預設資料格式是 JSON。如需 webHttp 行為細節的詳細資訊，請參閱Creating WCF AJAX Services without ASP.NET。

下列範例中的服務是包含兩種作業的標準 WCF 服務。這兩種作業的 WebGetAttribute 或 WebInvokeAttribute 屬性上都必須是 Wrapped 本文樣式，這是 webHttp 行為的特定需求，而且不會影響 JSON/XML 資料格式切換。

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

作業的回應格式會指定為 XML，這是 <webHttp> 行為的預設值。然而，明確指定回應格式是較好的做法。

其他作業會使用 WebInvokeAttribute 屬性，並且明確地指定回應型別為 JSON 而不是 XML。

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

請注意，在這兩種情況中，作業都會傳回屬於標準 WCF 資料合約型別的複雜型別 MathResult。

用戶端網頁 XmlAjaxClientPage.htm 包含的 JavaScript 程式碼，會在使用者按一下該頁上的 [執行計算 (傳回 JSON)] 或 [執行計算 (傳回 XML)] 按鈕時叫用前述兩種作業的其中一種作業。叫用此服務的程式碼會建構 JSON 本文，然後使用 HTTP POST 加以傳送。此要求是使用 JavaScript 手動建立，這點不同於基本 AJAX 服務範例以及使用 ASP.NET AJAX 的其他範例。

// 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 範例的單次安裝程序。
使用建置 Windows Communication Foundation 範例中描述的方式建置方案 XmlAjaxService.sln。
瀏覽到 https://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (不要使用瀏覽器從專案目錄開啟 XmlAjaxClientPage.htm)。

請參閱

工作

使用 HTTP POST 的 AJAX 服務

共用方式為

含 JSON 和 XML 的 AJAX 服務範例

若要設定、建置及執行範例

請參閱

工作

其他資源