JQuery ile XML Okuma

 bcakir
 29 Şubat 2012

Merhaba arkadaşlar, bu yazımda JQuery ile XML okumayı anlatacağım. Bu yazı ile XML dosyalarından verileri kolayca okuyup, projelerinizde gerekli yerlerde kullanabileceksiniz. Özellikle bu uygulamalar güvenlik problemleri olmayan bilgilerin, saklanıp kullanılması için tercih ediliyor. Örneğin; bir marketin sattığı ürünlerin listesi gibi bilgiler. Uygulamamız, XML dosyasındaki kişilerin bilgilerini JQuery ile ekrana yazma işlemini içerecek. Uygulamamız içeriğini açıkladım, HTML kısmıyla geliştirme işlemine geçebiliriz.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>JQuery ile XML Okuma</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var ad=new Array();
var soyad=new Array();
var nick=new Array();

$.ajax({
    url:'veri.xml',
    type:'POST',
    dataType:'xml',
    success:function(gelen){
        var i=0;
        //xml sayfasından bütün kişileri al
        $(gelen).find('kisi').each(function(){
            //kişilerin değerlerini diziye aktar
            ad[i]=$(this).find('ad').text();
            soyad[i]=$(this).find('soyad').text();
            nick[i]=$(this).find('nick').text();
            i++;
        });
        //bir kişinin değerlerini ekrana yaz
        $("#adi").html('Ad: '+ad[1]);
        $("#soyadi").html('Soyad: '+soyad[1]);
        $("#nicki").html('Nick: '+nick[1]);
    }
});
</script>
</head>
<body>
<div id="adi"></div>
<div id="soyadi"></div>
<div id="nicki"></div>
</body>
</html>

Yukarıda XML sayfasından alacağımız bilgileri dizeye aktardık ve bir kişinin bilgilerini ekrana yazdık. Şimdi de kişilerin bilgilerini alacağımız veri.xml sayfamızı oluşturalım.

<?xml version="1.0" encoding="utf-8"?>
<kisiler>
    <kisi>
        <ad>mehmet</ad>
        <soyad>demir</soyad>
        <nick>demit</nick>
    </kisi>

    <kisi>
        <ad>ahmet</ad>
        <soyad>yazar</soyad>
        <nick>ahzar</nick>
    </kisi>

    <kisi>
        <ad>nuri</ad>
        <soyad>mahsun</soyad>
        <nick>mahsuni</nick>
    </kisi>
</kisiler>

Bu kısımda ise 3 kişinin bilgilerinin olduğu bir XML dosyası oluşturduk ve bu bilgilerden sadece bir kişinin değerlerini, ilk kısımda ekrana yazdırdık. Böylece, JQuery ile XML okuma uygulamasının da sonuna geldik. Yararlı olması dileğiyle, hoşçakalın.

 5.058 Okunma

Bu yazıya 7 yorum yapılmış.

  1. bu güzel bilgiler için saolun

  2. XMLHttpRequest cannot load
    file:///C:/Users/user1/Desktop/xml_ornek/veri.xml.
    Origin null is not allowed by Access-Control-Allow-Origin.
    böyle bir hata alıyorum neden olabilir acaba?

    • Dosya yüklenemedi hatası veriyor, dosya yolu yanlış olabilir.

      • Access-Control-Allow-Origin dediği şey;
        Jquery ile bir dosyayı load etmeye çalışıyorsanız browserlar(tarayıcıdan tarayıcıya fark var) bunu bir server request i olarak algılar ve ona göre davranır.

        Örneğin chrome bu işleme izin vermez ancak ie izin verir.

        Load etmek istediğinizde bunu bir localhostta gerçekleştirirseniz sorun olmadığını göreceksiniz.

        server dışında yapmak içinde configurationlarını ayarlamanız gerekecektir.

  3. Merhaba BCAKIR;

    Sitenizdeki Bütün Makaleleri İnceliyorrum ve Kendimi JQUERY KONUSUNDA Gün Gektikçe Geliştiriyorum. Bu Olayda Sizinde Katkınız Var. O Yüzden Bu Yorumu Yapmak İstedim Ellerinize Sağlık Gerçekten ve Gerçekten Güzel Bir Paylaşım Olmuş…..

  4. XML ile veri alma işlemi merkez bankası döviz kurlarında çalışmıyor. Acaba bir nedeni var mı?

  5. jquery hayat kurtarır.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat