Veysel Uğur KIZMAZ

JQuery ile Ajax-Enabled WCF Servisinden XML Formatında Veri Çekmek

16.06.2012Okunma Sayısı: 4741Kategori: JQuery

 Bu makalemizde Jquery ile Ajax-Enabled WCF Service’den XML formatında veriyi nasıl alacağımızı inceleyelim.

Bu işlemi bir örnek uygulama üzerinde inceleyelim.
Örnek uygulamamız için öncelikle bir Asp.Net Web Application oluşturuyoruz. Örneğimizde Jquery ile Ajax request yapacağız. Bu sebeple projemize Ajax-Enabled WCF Service ekliyoruz.
 
 
OkulServis.svc dosyamızı ekledik. Şimdi bu servisimize Getir_OkulAd() isminde string veri döndüren bir method yazalım.

 

 
  1. [ServiceContract(Namespace = "")]
  2. [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  3. public class OkulServis
  4. {
  5.    [OperationContract]
  6.    [WebGet(ResponseFormat = WebMessageFormat.Xml)]
  7.     public string Getir_OkulAd()
  8.     {
  9.         return "Gazi Üniversitesi";
  10.     }
  11.     // Add more operations here and mark them with [OperationContract]
  12. }
 
 
Burada dikkat edilmesi gerkeen en önemli nokta, [WebGet(ResponseFormat = WebMessageFormat.Xml)] attribute’udur. Burada, servisten döndürülecek datanın formatını belirliyoruz. WebMessageFormat enumunun 2 değeri vardır. Biri Json, biri Xml. Yani verilerimizi ya Json ya da XML türünde geri döndüreceğiz.
 
Şimdi Projemize Test.aspx isminde bir Web Form ekleyelim ve bu formda Jquery aracılığıyla OkulServis’imizin Get_OkulAd() methodunu çağıralım.
 
 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="JQueryWcf2.Test" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <script src="Scripts/jquery-1.5.2.js" type="text/javascript"></script>
  8.     <script type="text/javascript">
  9.         $.ajax({
  10.             type: "GET",
  11.             url: "OkulServis.svc/Getir_OkulAd",
  12.             dataType: "xml",
  13.             success: function (data) {
  14.                 $('#sonuc').append(data);
  15.             }
  16.         });
  17.     </script>
  18. </head>
  19. <body>
  20.     <form id="form1" runat="server">
  21.     <div id="sonuc"></div>
  22.     </form>
  23. </body>
  24. </html>
 
 
  • $.ajax() methodu ile servisimize ajax request gönderip sonucumuzu alacağız.
  • url: ServisimizinAdı/Methodumuzunadı
  • dataType: geri döndürdüğü veri tipi
  • success: Servisten veri başarıyla çekildiyse ekranda “Gazi Üniversitesi”’ni yazmasını beklemekteyiz.
 
Visual Studio’da $('#sonuc').append(data); satırına breakpoint koyup data değişkeninin değerine bakalım.
 
 
 
Göründüğü gibi, XML türünden bir verimiz dönmüş. XML’imizin childNodes’ından 0. Nodeunu incelersek nodeName = string, nodeTypedValue= “Gazi Üniversitesi” olduğunu görürüz. Yani XML verimiz <string></string> içinde gelmektedir.
 
FireBug ile kodumuzu takip edersek gelen verinin ne olduğunu daha net görebiliriz.
 
 
Şimdi verimizi ekrana yazdırabilmek için script’imizde düzenleme yapalım ve projemizi çalıştırıp sonucunu görelim.
 
 
  1. <script type="text/javascript">
  2.         $.ajax({
  3.             type: "GET",
  4.             url: "OkulServis.svc/Getir_OkulAd",
  5.             dataType: "xml",
  6.             success: function (data) {
  7.                 $('#sonuc').append($(data).find("string").text());
  8.             }
  9.         });
  10.     </script>
  
Ekran çıktısı:
 
 
 
 
 
 
 
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com