Delen via

AJAX-service met JSON- en XML-voorbeeld

  • Artikel

Het XmlAjaxService-voorbeeld laat zien hoe u Windows Communication Foundation (WCF) gebruikt om een Asynchrone JavaScript- en XML-service (AJAX) te maken die JSON- of XML-gegevens (JavaScript Object Notation) retourneert. U kunt toegang krijgen tot een AJAX-service met behulp van JavaScript-code vanuit een webbrowserclient. Dit voorbeeld is gebaseerd op het basic AJAX-servicevoorbeeld .

In tegenstelling tot de andere AJAX-voorbeelden gebruikt dit voorbeeld geen ASP.NET AJAX en het ScriptManager besturingselement. Met een extra configuratie kunnen WCF AJAX-services worden geopend vanaf elke HTML-pagina via JavaScript. Dit scenario wordt hier weergegeven. Zie AJAX-voorbeelden voor een voorbeeld van het gebruik van WCF met ASP.NET AJAX.

In dit voorbeeld ziet u hoe u het antwoordtype van een bewerking tussen JSON en XML kunt wijzigen. Deze functionaliteit is beschikbaar, ongeacht of de service is geconfigureerd voor toegang door ASP.NET AJAX of door een HTML-/JavaScript-clientpagina.

Notitie

De installatieprocedure en build-instructies voor dit voorbeeld bevinden zich aan het einde van dit onderwerp.

Als u het gebruik van non-ASP.NET AJAX-clients wilt inschakelen, gebruikt WebServiceHostFactory u (niet WebScriptServiceHostFactory) in het .svc-bestand. WebServiceHostFactory voegt een WebHttpEndpoint standaardeindpunt toe aan de service. Het eindpunt is geconfigureerd op een leeg adres ten opzichte van het .svc-bestand; dit betekent dat het adres van de service is http://localhost/ServiceModelSamples/service.svc, zonder dat er andere achtervoegsels zijn dan de naam van de bewerking.

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

De volgende sectie in Web.config kan worden gebruikt om aanvullende configuratiewijzigingen aan te brengen in het eindpunt. Deze kan worden verwijderd als er geen extra wijzigingen nodig zijn.

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

De standaardgegevensindeling is WebHttpEndpoint XML, terwijl de standaardgegevensindeling voor WebScriptEndpoint JSON is. Zie WCF AJAX-services maken zonder ASP.NET voor meer informatie.

De service in het volgende voorbeeld is een standaard WCF-service met twee bewerkingen. Voor beide bewerkingen is de Wrapped hoofdtekststijl op de WebGetAttribute of WebInvokeAttribute kenmerken vereist, die specifiek is voor het webHttp gedrag en geen invloed heeft op de schakeloptie JSON/XML-gegevensindeling.

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

De antwoordindeling voor de bewerking wordt opgegeven als XML. Dit is de standaardinstelling voor het webHttp-gedrag>.< Het is echter een goede gewoonte om expliciet de antwoordindeling op te geven.

De andere bewerking maakt gebruik van het WebInvokeAttribute kenmerk en specificeert expliciet JSON in plaats van XML voor het antwoord.

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

In beide gevallen retourneren de bewerkingen een complex type, MathResulteen standaard WCF-gegevenscontracttype.

De clientwebpagina XmlAjaxClientPage.htm bevat JavaScript-code die een van de voorgaande twee bewerkingen aanroept wanneer de gebruiker op de knoppen Berekening uitvoeren (retour-JSON) of Berekening uitvoeren (return XML) op de pagina klikt. De code voor het aanroepen van de service bouwt een JSON-hoofdtekst en verzendt deze met behulp van HTTP POST. De aanvraag wordt handmatig gemaakt in JavaScript, in tegenstelling tot het basic AJAX-servicevoorbeeld en de andere voorbeelden met behulp van 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);

Wanneer de service reageert, wordt het antwoord weergegeven zonder verdere verwerking in een tekstvak op de pagina. Dit wordt geïmplementeerd voor demonstratiedoeleinden, zodat u rechtstreeks de gebruikte XML- en JSON-gegevensindelingen kunt observeren.

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

Het voorbeeld instellen, compileren en uitvoeren

  1. Zorg ervoor dat u de eenmalige installatieprocedure voor de Windows Communication Foundation-voorbeelden hebt uitgevoerd.

  2. Bouw de oplossing XmlAjaxService.sln zoals beschreven in het bouwen van de Windows Communication Foundation-voorbeelden.

  3. Ga naar http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (open XmlAjaxClientPage.htm niet in de browser vanuit de projectmap).

Zie ook