Dela via

AJAX-tjänst med JSON- och XML-exempel

  • Artikel

XmlAjaxService-exemplet visar hur du använder Windows Communication Foundation (WCF) för att skapa en Asynkron JavaScript- och XML-tjänst (AJAX) som returnerar antingen JavaScript Object Notation (JSON) eller XML-data. Du kan komma åt en AJAX-tjänst med hjälp av JavaScript-kod från en webbläsarklient. Det här exemplet bygger på basic AJAX-tjänstexemplet .

Till skillnad från de andra AJAX-exemplen ScriptManager använder det här exemplet inte ASP.NET AJAX och kontrollen. Med ytterligare konfiguration kan WCF AJAX-tjänster nås från valfri HTML-sida via JavaScript, och det här scenariot visas här. Ett exempel på hur du använder WCF med ASP.NET AJAX finns i AJAX-exempel.

Det här exemplet visar hur du växlar svarstypen för en åtgärd mellan JSON och XML. Den här funktionen är tillgänglig oavsett om tjänsten är konfigurerad för åtkomst av ASP.NET AJAX eller en HTML-/JavaScript-klientsida.

Kommentar

Installationsproceduren och bygginstruktionerna för det här exemplet finns i slutet av det här avsnittet.

Om du vill aktivera användning av non-ASP.NET AJAX-klienter använder du WebServiceHostFactory (inte WebScriptServiceHostFactory) i .svc-filen. WebServiceHostFactory lägger till en WebHttpEndpoint standardslutpunkt i tjänsten. Slutpunkten konfigureras på en tom adress i förhållande till .svc-filen. Det innebär att adressen för tjänsten är http://localhost/ServiceModelSamples/service.svc, utan några andra suffix än åtgärdsnamnet.

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

Följande avsnitt i Web.config kan användas för att göra ytterligare konfigurationsändringar i slutpunkten. Det kan tas bort om inga extra ändringar behövs.

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

Standarddataformatet för WebHttpEndpoint är XML, medan standarddataformatet för WebScriptEndpoint är JSON. Mer information finns i Skapa WCF AJAX-tjänster utan ASP.NET.

Tjänsten i följande exempel är en WCF-standardtjänst med två åtgärder. Båda åtgärderna kräver Wrapped brödtextformatet för attributen WebGetAttribute eller WebInvokeAttribute , vilket är specifikt för beteendet och inte har någon betydelse för webHttp JSON/XML-dataformatväxeln.

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

Svarsformatet för åtgärden anges som XML, vilket är standardinställningen <för webHttp-beteendet> . Det är dock bra att uttryckligen ange svarsformatet.

Den andra åtgärden använder WebInvokeAttribute attributet och anger uttryckligen JSON i stället för XML för svaret.

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

Observera att åtgärderna i båda fallen returnerar en komplex typ, MathResult, som är en standardtyp för WCF-datakontrakt.

Klientwebbsidan XmlAjaxClientPage.htm innehåller JavaScript-kod som anropar en av de föregående två åtgärderna när användaren klickar på knapparna Utför beräkning (returnera JSON) eller Utför beräkning (returnera XML) på sidan. Koden som anropar tjänsten konstruerar en JSON-brödtext och skickar den med HTTP POST. Begäran skapas manuellt i JavaScript, till skillnad från basic AJAX-tjänstexemplet och de andra exemplen med hjälp av 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);

När tjänsten svarar visas svaret utan ytterligare bearbetning i en textruta på sidan. Detta implementeras i demonstrationssyfte så att du kan se de XML- och JSON-dataformat som används direkt.

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

Så här konfigurerar du, skapar och kör exemplet

  1. Kontrollera att du har utfört engångsinstallationsproceduren för Windows Communication Foundation-exempel.

  2. Skapa lösningen XmlAjaxService.sln enligt beskrivningen i Skapa Windows Communication Foundation-exempel.

  3. Gå till http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (öppna inte XmlAjaxClientPage.htm i webbläsaren från projektkatalogen).

Se även