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

JQuery ile Ajax-Enabled WCF servisinden XML formatında nasıl veri çekebileceğimizi inceleyelim.

02.05.2012

3323

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.

 
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class OkulServis
{
   [OperationContract]
   [WebGet(ResponseFormat = WebMessageFormat.Xml)]
    public string Getir_OkulAd()
    {
        return "Gazi Üniversitesi";
    }
    // Add more operations here and mark them with [OperationContract]
}

    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class OkulServis
    {
       [OperationContract]
       [WebGet(ResponseFormat = WebMessageFormat.Xml)]
        public string Getir_OkulAd()
        {
            return "Gazi Üniversitesi";
        }
        // Add more operations here and mark them with [OperationContract]
    }

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.

 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="JQueryWcf2.Test" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.5.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.ajax({
            type: "GET",
            url: "OkulServis.svc/Getir_OkulAd",
            dataType: "xml",
            success: function (data) {
                $('#sonuc').append(data);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="sonuc"></div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="JQueryWcf2.Test" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.5.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.ajax({
            type: "GET",
            url: "OkulServis.svc/Getir_OkulAd",
            dataType: "xml",
            success: function (data) {
                $('#sonuc').append(data);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="sonuc"></div>
    </form>
</body>
</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.

 
<script type="text/javascript">
        $.ajax({
            type: "GET",
            url: "OkulServis.svc/Getir_OkulAd",
            dataType: "xml",
            success: function (data) {
                $('#sonuc').append($(data).find("string").text());
            }
        });
    </script>

<script type="text/javascript">
        $.ajax({
            type: "GET",
            url: "OkulServis.svc/Getir_OkulAd",
            dataType: "xml",
            success: function (data) {
                $('#sonuc').append($(data).find("string").text());
            }
        });
    </script>

Ekran çıktısı:

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi

veysel@ugurkizmaz.com

www.ugurkizmaz.com

Yazar Hakkında

Veysel Uğur KIZMAZ

www.ugurkizmaz.com

YazılımDilleri.Net projesinin lideri olan Veysel Uğur Kızmaz, Gazi Üniversitesi Bilgisayar Mühendisliği bölümü mezunudur. Bir çok projede çalışmış, yazılım alanında birçok eğitimler vermiştir. Şu an özel bir yazılım danışmanlık firmasında Sharepoint proje danışmanlığı ve proje yöneticiliği yapmaktadır. Veysel Uğur Kızmaz, dahil olduğu projelerin çeşitliliği sebebiyle farklı alanlarda uzmanlaşmıştır: .Net, Sharepoint, Java, Php, Javascript, SQL Server, Oracle, MySQL.

Yazar Hakkında

Sosyal Medya

0 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar