mehmetduran.com - Paylaşmak Güzeldir...
Jquery ve Ajax ile Xml Dosyaları Okuma
Bu yazımda jquery ile xml belgeyi okuyup, bu belgede ki verileri kullanmayı anlatmaya çalışacağım. Jquery ile uzun zamandır ilgileniyordum ve artık bu konu ile ilgili paylaşımlara başladım. Bu örnekte xml belgeyi jquery ajax ile okuyup, verileri çekip herhangi bir html kontrole yazdırmayı göstereceğim. Kodlarımıza ve xml belgemize bakacak olursak:

Örnkete kullandığım xml belge şu şekilde olacak:

Jquery ile Xml Dosyaları Okuma - Xml Dosyası

Jquery kodlarımız şöyle olacak:

     $(document).ready(function() {
      $(window).load(function() {
        $('#liste').html("");
            $.ajax({
                url: 'yemekler.xml', //xml dosyamız
                type: 'GET',
                dataType: 'xml',
                timeout: 1000,
                success: function(xml){
                        $(xml).find('menu').each(function(){ //menu node ve altında ki verileri alıyoruz
                        var item_text = $(this).text(); // xml belgenin içeriğini text olarak alıyoruz
                        $('<li></li>').html(item_text).appendTo('#liste'); //html kontrole ekliyoruz
                    });
                },
                error: function(){
                    alert('Error loading XML document');
                }
            });
        });
    });

Xmlden aldığımız bilgileri yazdıracağımız html kontrollerin kodları ise şöyle olacak:

<div id="baslik">Xml Veriler</div><ul id="liste"></ul>

Uygulamanın ekran görüntüsü ise şöyle olacak:

Jquery ile Xml Dosyaları Okuma - Ekran Görüntüsü
Bu şekillendirme için css kullandım ve verileri yüklediğim html kontrolleri böyle şekillendirdim. Sizler istediğiniz şekilde yapabilirsiniz. Böylece jquery ile xml belgeleri okumayı görmüş olduk.

İyi Çalışmalar!
Mehmet Duran 05 Eylül Cuma 2008 6 27776 4,4
Ajax jQuery Jquery XML
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Asp.net'te Jquery ve Ajax Kullanarak Email Gönderme Jquery ile Ajax İşlemlerinde Güvenli Parametre (Data) Kullanımı Jquery ile Kayan (Floating) Alan Yapımı Javascript ile Klavye Tuşlarının Kontrolü jQuery Takvim Eklentim (Datetimepicker Uygulamam)
Yorumlar
Yorum Yaz
RSS Yorum Takibi
HasanG 25 Ağustos Salı 2009 12:30 #1
Örnek ie7'de sorunsuz çalışıyo fakat ffde nedense çalışmak istemiyor. Deneyen var mı?
HasanG 25 Ağustos Salı 2009 13:27 #2
Sanırım sorun sayfayı development server'dan çalıştırmaktan kaynaklanıyordu. IIS'de firefox'ta sorunsuzçalıştı.
Mehmet Duran 25 Ağustos Salı 2009 13:31 #3
Ben örneklerimi hep firefox'ta denerim. Hatta ekran görüntülerini de firefox ile alırım ve bu uygulamayı da bu şekilde hazırladım. Ayrıca jquery tarayıcı farklılığını kaldırıyor ve tarayıcıların birçok sürümüyle çalışıyor. Bu uygulamanın çalışmadığını ilk kez duyuyorum. Kodlarda bir hata olabilir mi acaba?
Mehmet Duran 25 Ağustos Salı 2009 13:33 #4
Cevabına yetişemedim. :D Çalıştığı için sevindim.
şamil basar 07 Temmuz Çarşamba 2010 09:08 #5
kardeş bu verdiğin jquery kodlarını nereye nasıl yazacağımı beceremedim acaba sen bu örneğin yapılmış halini bana mailden atabilirmisin. kusura bakma banada lazım fakat yapamadım seni meşgul edicem 1 dakkikanı alır o kadar
Mehmet Duran 07 Temmuz Çarşamba 2010 11:13 #6
Merhaba. Öncelikle örneğin ve kodların elimde olmadığını belirteyim. Ancak elimde olsa da kodların buradakilerle hiçbir farkı yok. Yani örneğin olması şart değil. Buradaki kodlar örneğin aynısı zaten. Eğer bunları bir dakika incelersen anlayacağını düşünüyorum. Script kodları script tagları arasında herhangi bir sayfada yazabilirsin.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Büyük işler gibi, büyük düşüncelerinde davula ihtiyaçları yoktur.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009