Beispiel für AJAX-Dienst mit JSON und XMLAJAX Service with JSON and XML Sample

In diesem Beispiel wird veranschaulicht, wie mit Windows Communication Foundation (WCF)Windows Communication Foundation (WCF) ein AJAX-Dienst (Asynchronous JavaScript and XML) erstellt werden kann, der entweder Daten im Datenformat Javascript Object Notation (JSON) oder XML wiedergibt.This sample demonstrates how to use Windows Communication Foundation (WCF)Windows Communication Foundation (WCF) to create an Asynchronous JavaScript and XML (AJAX) service that returns either JavaScript Object Notation (JSON) or XML data. Sie können auf einen AJAX-Dienst zugreifen, indem Sie JavaScript-Code in einem Webbrowserclient verwenden.You can access an AJAX service by using JavaScript code from a Web browser client. Dieses Beispiel baut auf den einfacher AJAX-Dienst Beispiel.This sample builds on the Basic AJAX Service sample.

Im Gegensatz zu den anderen AJAX-Beispielen werden in diesem Beispiel ASP.NET AJAX und das ScriptManager-Steuerelement nicht verwendet.Unlike the other AJAX samples, this sample does not use ASP.NET AJAX and the ScriptManager control. Mit einigen zusätzlichen Konfigurationseinstellungen kann auf WCFWCF AJAX-Dienste von jeder HTML-Seite über JavaScript zugegriffen werden. Dieses Szenario wird hier dargestellt.With some additional configuration, WCFWCF AJAX services can be accessed from any HTML page through JavaScript, and this scenario is shown here. Ein Beispiel der Verwendung von WCFWCF mit ASP.NET AJAX finden Sie unter AJAX-Beispielen.For an example of using WCFWCF with ASP.NET AJAX, see AJAX Samples.

In diesem Beispiel wird gezeigt, wie der Antworttyp eines Vorgangs zwischen JSON und XML umgeschaltet wird.This sample shows how to switch the response type of an operation between JSON and XML. Diese Funktion ist unabhängig davon verfügbar, ob der Dienst für den Zugriff durch ASP.NET AJAX oder eine HTML/JavaScript-Clientseite konfiguriert wurde.This functionality is available regardless of whether the service is configured to be accessed by ASP.NET AJAX or by an HTML/JavaScript client page.

Hinweis

Die Setupprozedur und die Buildanweisungen für dieses Beispiel befinden sich am Ende dieses Themas.The setup procedure and build instructions for this sample are located at the end of this topic.

Um die Verwendung von Nicht-ASP.NET AJAX-Clients zu aktivieren, verwenden Sie WebServiceHostFactory (nicht WebScriptServiceHostFactory) in der SVC-Datei.To enable the use of non-ASP.NET AJAX clients, use WebServiceHostFactory (not WebScriptServiceHostFactory) in the .svc file. WebServiceHostFactory fügt dem Dienst einen WebHttpEndpoint-Standardendpunkt hinzu.WebServiceHostFactory adds a WebHttpEndpoint standard endpoint to the service. Der Endpunkt ist für eine leere Adresse konfiguriert, die relativ zur SVC-Datei festgelegt ist. Dies bedeutet, dass die Adresse des Diensts http://localhost/ServiceModelSamples/service.svc lautet und mit Ausnahme des Vorgangsnamens keine zusätzlichen Suffixe aufweist.The endpoint is configured at an empty address relative to the .svc file; this means that the address of the service is http://localhost/ServiceModelSamples/service.svc, with no additional suffixes other than the operation name.

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

Im folgenden Abschnitt in der Datei Web.config können zusätzliche Konfigurationsänderungen am Endpunkt vorgenommen werden.The following section in Web.config can be used to make additional configuration changes to the endpoint. Wenn keine zusätzlichen Änderungen erforderlich sind, kann der Abschnitt entfernt werden.It can be removed if no extra changes are needed.

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

Das Standarddatenformat für WebHttpEndpoint ist XML, während das Standarddatenformat für WebScriptEndpoint ist "JSON".The default data format for WebHttpEndpoint is XML, while the default data format for WebScriptEndpoint is JSON. Weitere Informationen finden Sie unter Erstellen von WCF AJAX-Diensten ohne ASP.NET.For more information, see Creating WCF AJAX Services without ASP.NET.

Der Dienst im folgenden Beispiel ist ein WCFWCF-Standarddienst mit zwei Vorgängen.The service in the following sample is a standard WCFWCF service with two operations. Beide Vorgänge erfordern den Wrapped-Textstil beim WebGetAttribute-Attribut oder WebInvokeAttribute-Attribut. Dieser Textstil ist typisch für das webHttp-Verhalten und hat keinen Einfluss auf den JSON/XML-Datenformatwechsel.Both operations require the Wrapped body style on the WebGetAttribute or WebInvokeAttribute attributes, which is specific to the webHttp behavior and has no bearing on the JSON/XML data format switch.

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

Das Format der Antwort für den Vorgang angegeben wird, als XML-Daten, die Standardeinstellung ist für die <WebHttp > Verhalten.The response format for the operation is specified as XML, which is the default setting for the <webHttp> behavior. Es wird jedoch empfohlen, das Antwortformat explizit festzulegen.However, it is good practice explicitly specify the response format.

Der andere Vorgang verwendet das WebInvokeAttribute-Attribut und gibt explizit JSON statt XML als Antwortformat an.The other operation uses the WebInvokeAttribute attribute and explicitly specifies JSON instead of XML for the response.

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

Beachten Sie, dass die Vorgänge in beiden Fällen einen komplexen Typ, MathResult, wiedergeben, bei dem es sich um einen standardmäßigen WCFWCF-Datenvertragstyp handelt.Note that in both cases the operations return a complex type, MathResult, which is a standard WCFWCF data contract type.

Der Client Webseite XmlAjaxClientPage.htm enthält JavaScript-Code, der eine der oben beschriebenen beiden Vorgänge aufruft, klickt der Benutzer die Berechnung (JSON zurückgeben) ausführen oder Berechnung (XML zurückgeben) ausführen Schaltflächen auf der Seite.The client Web page XmlAjaxClientPage.htm contains JavaScript code that invokes one of the preceding two operations when the user clicks the Perform calculation (return JSON) or Perform calculation (return XML) buttons on the page. Im zum Aufrufen des Diensts verwendeten Code wird ein JSON-Text erstellt und mit HTTP-POST gesendet.The code to invoke the service constructs a JSON body and sends it using HTTP POST. Die Anforderung wird in JavaScript manuell erstellt, im Gegensatz zu den einfacher AJAX-Dienst Beispiel und den anderen Beispielen, die mithilfe von ASP.NET AJAX.The request is created manually in JavaScript, unlike the Basic AJAX Service sample and the other samples using 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);  

Wenn der Dienst antwortet, wird die Antwort, ohne vorher weiterverarbeitet zu werden, in einem Textfeld auf der Seite angezeigt.When the service responds, the response is displayed without any further processing in a textbox on the page. Dies dient der Veranschaulichung, sodass Sie direkt die verwendeten XML- und JSON-Datenformate prüfen können.This is implemented for demonstration purposes to allow you to directly observe the XML and JSON data formats used.

// Create result handler   
xmlHttp.onreadystatechange=function(){  
     if(xmlHttp.readyState == 4){  
          document.getElementById("result").value = xmlHttp.responseText;  
     }  
}  

Wichtig

Die Beispiele sind möglicherweise bereits auf dem Computer installiert.The samples may already be installed on your machine. Suchen Sie nach dem folgenden Verzeichnis (Standardverzeichnis), bevor Sie fortfahren.Check for the following (default) directory before continuing.

<InstallDrive>:\WF_WCF_Samples

Wenn dieses Verzeichnis nicht vorhanden ist, rufen Sie Windows Communication Foundation (WCF) and Windows Workflow Foundation (WF) Samples for .NET Framework 4 auf, um alle Windows Communication Foundation (WCF)Windows Communication Foundation (WCF) - und WFWF -Beispiele herunterzuladen.If this directory does not exist, go to Windows Communication Foundation (WCF) and Windows Workflow Foundation (WF) Samples for .NET Framework 4 to download all Windows Communication Foundation (WCF)Windows Communication Foundation (WCF) and WFWF samples. Dieses Beispiel befindet sich im folgenden Verzeichnis.This sample is located in the following directory.

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

So können Sie das Beispiel einrichten, erstellen und ausführenTo set up, build, and run the sample

  1. Stellen Sie sicher, dass Sie ausgeführt haben die Setupprozedur für die Windows Communication Foundation-Beispiele zum einmaligen.Ensure that you have performed the One-Time Setup Procedure for the Windows Communication Foundation Samples.

  2. Erstellen Sie die Projektmappe XmlAjaxService.sln, wie in beschrieben Erstellen der Windows Communication Foundation-Beispiele.Build the solution XmlAjaxService.sln as described in Building the Windows Communication Foundation Samples.

  3. Navigieren Sie zu http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (öffnen Sie XmlAjaxClientPage.htm nicht im Browser vom Projektverzeichnis).Navigate to http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (do not open XmlAjaxClientPage.htm in the browser from the project directory).

Siehe auchSee Also

AJAX-Dienst mit HTTP POSTAJAX Service Using HTTP POST