JQuery ile Asp.Net Web Servisinden Veri Çekmek

16.06.2012Okunma Sayısı: 8527Kategori: JQuery

Bu makalemizde Jquery ile ASP.Net Web Service’ten nasıl veri alacağımızı inceleyelim.

Bu işlemi bir örnek uygulama üzerinde inceleyelim.

Öncelikle JqueryDeneme isminde bir ASP.Net Web Application oluşturalım. Ardından Solution’a sağ tıklayıp Add->New Project ile Asp.Net Web Service projemizi oluşturalım. Burada dikkat edilmesi gereken nokta, .Net Framework içerisinde Asp.Net Web Service template’i bulunmamaktadır. Bunun için açılan ekranda .Net Framework versiyonunu 3.5 olarak seçelim.

Web servisimizi projeye dahil ettikten sonra Service1.asmx’i silip yerine OkulService.asmx ekleyelim.

OkulService.asmx

 
public class OkulService : System.Web.Services.WebService
{
 
    [WebMethod]
    public string Getir_OkulAd()
    {
        return "Gazi Universitesi";
    }
}

    public class OkulService : System.Web.Services.WebService
    {
 
        [WebMethod]
        public string Getir_OkulAd()
        {
            return "Gazi Universitesi";
        }
    }

OkulServis projemizi build edelim.

Şimdi JqueryDeneme projemize sağ tıklayıp Add Service Reference diyelim. Açılan ekranda Discover butonuna tıkladığımızda solution’a dahil olan servis referansları listelenecektir. OkulService.asmx’i seçip OK diyelim.

Web servisimiz projemize eklendi.

Şimdi JqueryServis.aspx isminde bir Web Form ekleyelim ve bu formda Jquery ile OkulServis isimli servisimizin Getir_OkulAd() methodunu çağıralım.

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.ajax({
            type: "POST",
            url: "http://localhost/OkulServis/OkulService.asmx/Getir_OkulAd",
            data: "{}",
            dataType: "xml",
            success: function (xml) {
                $('#sonuc').append($(xml).find('string').text());
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="sonuc"></div>
    </form>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.ajax({
            type: "POST",
            url: "http://localhost/OkulServis/OkulService.asmx/Getir_OkulAd",
            data: "{}",
            dataType: "xml",
            success: function (xml) {
                $('#sonuc').append($(xml).find('string').text());
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="sonuc"></div>
    </form>
</body>
</html>

$.ajax() methodu ile Jquery’de ajax requestlerini yapıyoruz.
url -> Web Servisimizin URL’sidir.
dataType: xml -> gelen verimiziin XML tipinde olduğunu göstermektedir.
success: Servisten veriyi alma işlemi başarıyla tamamlandığında yapılacak işlemdir.
$(xml).find() ile servisten gelen XML türündeki veriden <string> tagının text()’ini alıyoruz.

Servisimizden gelen veriyi FireBug (firefox) ile takip edersek hangi türden veri geldiğini (xml) ve ne geldiğini görebilir, buna göre kodumuzu düzenleyebiliriz.

<string></string>’in text’i alacağımız verimiz (Gazi Üniversitesi) olduğu için $(xml).find(‘string’) işlemini kullandık. Eğer json türünden veri alsaydık dataType’ımız json olacaktı ve işlemimiz daha farklı olacaktı. Sonraki makalelerimizde o konulara da değineceğiz.

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi

veysel@ugurkizmaz.com