Aracılığıyla paylaş

JSON ve XML Örneği ile AJAX Hizmeti

XmlAjaxService örneği, JavaScript Nesne Gösterimi (JSON) veya XML verileri döndüren bir Zaman Uyumsuz JavaScript ve XML (AJAX) hizmeti oluşturmak için Windows Communication Foundation'ın (WCF) nasıl kullanılacağını gösterir. Web tarayıcısı istemcisinden JavaScript kodu kullanarak AJAX hizmetine erişebilirsiniz. Bu örnek Temel AJAX Hizmeti örneğini temel alır.

Diğer AJAX örneklerinden farklı olarak, bu örnek ASP.NET AJAX ve ScriptManager denetimini kullanmaz. Bazı ek yapılandırmalarla WCF AJAX hizmetlerine JavaScript aracılığıyla herhangi bir HTML sayfasından erişilebilir ve bu senaryo burada gösterilmiştir. ASP.NET AJAX ile WCF kullanma örneği için bkz. AJAX Örnekleri.

Bu örnek, JSON ve XML arasında bir işlemin yanıt türünü nasıl değiştirileceğini gösterir. Bu işlev, hizmete AJAX ASP.NET veya HTML/JavaScript istemci sayfası tarafından erişilecek şekilde yapılandırıldığından bağımsız olarak kullanılabilir.

Uyarı

Bu örnek için kurulum yordamı ve derleme yönergeleri bu konunun sonunda yer alır.

non-ASP.NET AJAX istemcilerinin kullanımını etkinleştirmek için .svc dosyasında WebServiceHostFactory yerine WebScriptServiceHostFactory kullanın. WebServiceHostFactory hizmete standart bir WebHttpEndpoint uç nokta ekler. Uç nokta, .svc dosyasına göre boş bir adreste yapılandırılır; bu, hizmetin adresinin, işlem adından başka ek sonek olmadan olduğu http://localhost/ServiceModelSamples/service.svcanlamına gelir.

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

Web.config'deki aşağıdaki bölüm, uç noktada ek yapılandırma değişiklikleri yapmak için kullanılabilir. Ek değişiklik gerekmiyorsa kaldırılabilir.

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

için WebHttpEndpoint varsayılan veri biçimi XML, varsayılan veri biçimi WebScriptEndpoint ise JSON'dır. Daha fazla bilgi için bkz. ASP.NET olmadan WCF AJAX Hizmetleri oluşturma.

Aşağıdaki örnekteki hizmet, iki işlemi olan standart bir WCF hizmetidir. Her iki işlem de, Wrapped üzerinde veya WebGetAttribute ya da WebInvokeAttribute özniteliklerinde, webHttp davranışına özgü olan gövde stilini gerektirir ve bu, JSON/XML veri biçimi anahtarında hiçbir etkisi yoktur.

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

İşlemin yanıt biçimi, webhttp< davranışı için> varsayılan ayar olan XML olarak belirtilir. Ancak, yanıt biçimini açıkça belirtmek iyi bir uygulamadır.

Diğer işlem özniteliğini WebInvokeAttribute kullanır ve yanıt için XML yerine JSON'ı açıkça belirtir.

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

Her iki durumda da işlemlerin standart bir WCF veri sözleşmesi türü MathResultolan karmaşık bir tür döndürdüğünü unutmayın.

İstemci Web sayfası XmlAjaxClientPage.htm, kullanıcı sayfada Hesaplama yap (JSON döndür) veya Hesaplama gerçekleştir (XML döndür) düğmelerine tıkladığında önceki iki işlemden birini çağıran JavaScript kodu içerir. Hizmeti çağırmak için kod bir JSON gövdesi oluşturur ve HTTP POST kullanarak gönderir. İstek, Temel AJAX Hizmeti örneğinden ve ASP.NET AJAX kullanan diğer örneklerden farklı olarak JavaScript'te el ile oluşturulur.

// 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);

Hizmet yanıt verdiği zaman, yanıt sayfadaki bir metin kutusunda daha fazla işlem yapılmadan görüntülenir. Bu, kullanılan XML ve JSON veri biçimlerini doğrudan gözlemlemenizi sağlamak amacıyla gösterim amacıyla uygulanır.

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

Örneği ayarlamak, derlemek ve çalıştırmak için

  1. Windows Communication Foundation Örnekleri içinOne-Time Kurulum Yordamını yaptığınızdan emin olun.

  2. Çözüm XmlAjaxService.sln Windows Communication Foundation Örnekleri Oluşturma bölümünde açıklandığı gibi oluşturun.

  3. http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm adresine gidin (proje dizininden tarayıcıda XmlAjaxClientPage.htm açmayın).

Ayrıca bakınız