Freigeben über

Beispiel für AJAX-Dienst mit JSON und XML

  • Artikel

In diesem Beispiel wird veranschaulicht, wie mit 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. Sie können auf einen AJAX-Dienst zugreifen, indem Sie JavaScript-Code in einem Webbrowserclient verwenden. Dieses Beispiel basiert auf dem Einfacher AJAX-Dienst-Beispiel.

Im Gegensatz zu den anderen AJAX-Beispielen werden in diesem Beispiel ASP.NET AJAX und das ScriptManager-Steuerelement nicht verwendet. Mit einigen zusätzlichen Konfigurationseinstellungen kann auf WCF AJAX-Dienste von jeder HTML-Seite über JavaScript zugegriffen werden. Dieses Szenario wird hier dargestellt. Ein Beispiel für das Verwenden von WCF mit ASP.NET AJAX finden Sie unter AJAX Samples.

In diesem Beispiel wird gezeigt, wie der Antworttyp eines Vorgangs zwischen JSON und XML umgeschaltet wird. 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.

Bb472488.note(de-de,VS.100).gifHinweis:
Die Setupprozedur und die Erstellungsanweisungen für dieses Beispiel befinden sich am Ende dieses Abschnitts.

Um die Verwendung von Nicht-ASP.NET-Clients zu aktivieren, verwenden Sie WebServiceHostFactory (nicht WebScriptServiceHostFactory) in der SVC-Datei. WebServiceHostFactory fügt einen WebHttpEndpoint-Standardendpunkt zum Dienst hinzu. Der Endpunkt ist für eine leere Adresse konfiguriert, die relativ zur SVC-Datei festgelegt ist. Dies bedeutet, dass die Adresse des Diensts https://localhost/ServiceModelSamples/service.svc lautet und mit Ausnahme des Vorgangsnamens keine zusätzlichen Suffixe aufweist.

<%@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. Wenn keine zusätzlichen Änderungen erforderlich sind, kann der Abschnitt entfernt werden.

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

Das Standarddatenformat für WebHttpEndpoint ist XML und das Standarddatenformat für for T:System.ServiceModel.Description.WebScriptEndpoint ist JSON. Weitere Informationen finden Sie unter Erstellen von WCF AJAX-Diensten ohne ASP.NET.

Der Dienst im folgenden Beispiel ist ein WCF-Standarddienst mit zwei Vorgängen. 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.

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

Als Antwortformat des Vorgangs wird XML angegeben. Dies entspricht der Standardeinstellung für das <webHttp>-Verhalten. Es wird jedoch empfohlen, das Antwortformat explizit festzulegen.

Der andere Vorgang verwendet das WebInvokeAttribute-Attribut und gibt explizit JSON statt XML als Antwortformat an.

[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 WCF-Datenvertragstyp handelt.

Die Webseite des Client XmlAjaxClientPage.htm enthält JavaScript-Code, der einen der oben beschriebenen beiden Vorgänge aufruft, wenn der Benutzer auf der Seite auf die Schaltfläche Berechnung durchführen (JSON zurückgeben) oder Berechnung durchführen (XML zurückgeben) klickt. Im zum Aufrufen des Diensts verwendeten Code wird ein JSON-Text erstellt und mit HTTP-POST gesendet. Die Anforderung wird manuell in JavaScript erstellt. Im Einfacher AJAX-Dienst-Beispiel und in den anderen Beispielen wird dagegen ASP.NET AJAX verwendet.

// 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. Dies dient der Veranschaulichung, sodass Sie direkt die verwendeten XML- und JSON-Datenformate prüfen können.

// Create result handler 
xmlHttp.onreadystatechange=function(){
     if(xmlHttp.readyState == 4){
          document.getElementById("result").value = xmlHttp.responseText;
     }
}
Bb472488.Important(de-de,VS.100).gif Hinweis:
Die Beispiele sind möglicherweise bereits auf dem Computer installiert. Überprüfen Sie das folgende (standardmäßige) Verzeichnis, bevor Sie fortfahren.

<Installationslaufwerk>:\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)- und WF-Beispiele herunterzuladen. Dieses Beispiel befindet sich im folgenden Verzeichnis.

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

So richten Sie das Beispiel ein, erstellen es und führen es aus

  1. Vergewissern Sie sich, dass Sie Einmaliges Setupverfahren für Windows Communication Foundation-Beispiele ausgeführt haben.

  2. Erstellen Sie die Projektmappe XmlAjaxService.sln, wie in Erstellen der Windows Communication Foundation-Beispiele beschrieben.

  3. Navigieren Sie zu https://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (öffnen Sie XmlAjaxClientPage.htm nicht im Browser vom Projektverzeichnis).

Siehe auch

Aufgaben

AJAX-Dienst mit HTTP POST