Share via

Beispiel für AJAX-Dienst mit JSON und XML

  • Artikel

Im XmlAjaxService-Beispiel wird veranschaulicht, wie mit WCF (Windows Communication Foundation) ein AJAX-Dienst (Asynchronous JavaScript and XML) erstellt werden kann, der entweder JSON- (Javascript Object Notation) oder XML-Daten wiedergibt. Sie können auf einen AJAX-Dienst zugreifen, indem Sie JavaScript-Code in einem Webbrowserclient verwenden. Dieses Beispiel baut auf dem Beispiel für einen einfachen AJAX-Dienst auf.

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 ist der Zugriff auf WCF-AJAX-Dienste von jeder HTML-Seite aus über JavaScript möglich. Dieses Szenario wird hier dargestellt. Ein Beispiel für die Verwendung von WCF mit ASP.NET AJAX finden Sie in den AJAX-Beispielen.

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.

Hinweis

Die Setupprozedur und die Buildanweisungen für dieses Beispiel befinden sich am Ende dieses Themas.

Um die Verwendung von Nicht-ASP.NET AJAX-Clients zu aktivieren, verwenden Sie WebServiceHostFactory (nicht WebScriptServiceHostFactory) in der SVC-Datei. WebServiceHostFactory fügt dem Dienst einen WebHttpEndpoint-Standardendpunkt hinzu. Der Endpunkt wird an einer leeren Adresse konfiguriert, die relativ zur SVC-Datei festgelegt ist. Daher lautet die Adresse des Diensts http://localhost/ServiceModelSamples/service.svc und weist mit Ausnahme des Vorgangsnamens keine zusätzlichen Suffixe auf.

<%@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 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 Clientwebseite XmlAjaxClientPage.htm enthält JavaScript-Code, der einen der beiden oben beschriebenen Vorgänge aufruft, wenn Benutzer*innen auf der Seite auf die Schaltfläche Berechnung durchführen (JSON zurückgeben) bzw. Berechnung durchführen (XML zurückgeben) klicken. 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 Beispiel zum einfachen AJAX-Dienst 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;
     }
}

So können Sie das Beispiel einrichten, erstellen und ausführen

  1. Stellen Sie sicher, dass Sie die Beispiele zum einmaligen Setupverfahren für Windows Communication Foundation ausgeführt haben.

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

  3. Navigieren Sie zu http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (öffnen Sie „XmlAjaxClientPage.htm“ nicht über das Projektverzeichnis im Browser).

Siehe auch