Udostępnij przez

Usługa AJAX z przykładami JSON i XML

Przykład XmlAjaxService pokazuje, jak używać programu Windows Communication Foundation (WCF) do tworzenia asynchronicznej usługi JavaScript i XML (AJAX), która zwraca dane JavaScript Object Notation (JSON) lub XML. Dostęp do usługi AJAX można uzyskać przy użyciu kodu JavaScript z poziomu klienta przeglądarki internetowej. Ten przykład jest rozwinięciem przykładu Podstawowej Usługi AJAX.

W przeciwieństwie do innych przykładów AJAX ten przykład nie używa ASP.NET AJAX i kontrolki ScriptManager . W przypadku dodatkowej konfiguracji usługi WCF AJAX można uzyskać dostęp z dowolnej strony HTML za pośrednictwem języka JavaScript, a ten scenariusz jest pokazany tutaj. Aby zapoznać się z przykładem używania programu WCF z ASP.NET AJAX, zobacz Przykłady AJAX.

W tym przykładzie pokazano, jak przełączyć typ odpowiedzi operacji między formatem JSON i xml. Ta funkcja jest dostępna niezależnie od tego, czy usługa jest skonfigurowana do uzyskiwania dostępu przez ASP.NET AJAX, czy przez stronę klienta HTML/JavaScript.

Uwaga / Notatka

Procedura instalacji i instrukcje kompilacji dla tego przykładu znajdują się na końcu tego tematu.

Aby włączyć korzystanie z klientów nie-ASP.NET AJAX, użyj WebServiceHostFactory (nie WebScriptServiceHostFactory) w pliku .svc. WebServiceHostFactory dodaje standardowy punkt końcowy WebHttpEndpoint do usługi. Punkt końcowy jest konfigurowany pod pustym adresem względem pliku svc; Oznacza to, że adres usługi to http://localhost/ServiceModelSamples/service.svc, bez dodatkowych sufiksów innych niż nazwa operacji.

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

Poniższa sekcja w Web.config może służyć do wprowadzania dodatkowych zmian konfiguracji w punkcie końcowym. Można go usunąć, jeśli nie są potrzebne żadne dodatkowe zmiany.

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

Domyślny format danych to WebHttpEndpoint XML, a domyślny format WebScriptEndpoint danych to JSON. Aby uzyskać więcej informacji, zobacz Creating WCF AJAX Services without ASP.NET (Tworzenie usług AJAX WCF bez ASP.NET).

Usługa w poniższym przykładzie jest standardową usługą WCF z dwoma operacjami. Obie operacje wymagają stylu treści Wrapped dla atrybutów WebGetAttribute lub WebInvokeAttribute, które są specyficzne dla zachowania webHttp i nie mają wpływu na przełącznik formatu danych JSON/XML.

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

Format odpowiedzi dla operacji jest określony jako XML, który jest domyślnym ustawieniem <zachowania webHttp> . Jednak dobrym rozwiązaniem jest jawne określenie formatu odpowiedzi.

Druga operacja używa atrybutu WebInvokeAttribute i jawnie określa kod JSON zamiast XML dla odpowiedzi.

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

Należy pamiętać, że w obu przypadkach operacje zwracają typ złożony, MathResultczyli standardowy typ kontraktu danych WCF.

Strona sieci Web klienta XmlAjaxClientPage.htm zawiera kod JavaScript, który wywołuje jedną z poprzednich dwóch operacji, gdy użytkownik kliknie przycisk Wykonaj obliczenie (zwraca kod JSON) lub wykonaj obliczenia (zwraca kod XML) na stronie. Kod służący do wywoływania usługi tworzy treść JSON i wysyła go przy użyciu protokołu HTTP POST. Żądanie jest tworzone ręcznie w języku JavaScript, w przeciwieństwie do przykładu basic AJAX Service i innych przykładów przy użyciu 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);

Gdy usługa odpowiada, odpowiedź jest wyświetlana bez dalszego przetwarzania w polu tekstowym na stronie. Jest to implementowane do celów demonstracyjnych, aby umożliwić bezpośrednie obserwowanie używanych formatów danych XML i JSON.

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

Aby skonfigurować, skompilować i uruchomić przykładowy program

  1. Upewnij się, że wykonano procedurę instalacji One-Time dla przykładów programu Windows Communication Foundation.

  2. Skompiluj rozwiązanie XmlAjaxService.sln zgodnie z opisem w temacie Building the Windows Communication Foundation Samples (Tworzenie przykładów programu Windows Communication Foundation).

  3. Przejdź do http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (nie otwieraj XmlAjaxClientPage.htm w przeglądarce z katalogu projektu).

Zobacz także

  • Last updated on