JavaScript XML Örnek Uygulama

Yazıda JavaScript ile yapılabilecek XML okuma ve listeleme işlemlerinin iyi anlaşılması için örnek bir uygulama yapılmıştır.

JavaScript XML Okuma yazısında XML dosyasını okumayı JavaScript XML Listeleme yazısında ise XML dosyasındaki verileri listelemeyi görmüştük.

XML verilerini web sayfası içerisinde çeşitli HTML elemanları ile birlikte kullanabiliriz.

Kişi listesinin olduğu kisiler.xml dosyasından kişileri listeleyelim.

<?xml version="1.0" encoding="UTF-8"?>
<kisiler>
  <kisi>
    <sira>1</sira>
    <adi>Yusuf Sefa</adi>
    <soyadi>SEZER</soyadi>
  </kisi>
  <kisi>
    <sira>2</sira>
    <adi>Ramazan</adi>
    <soyadi>SEZER</soyadi>
  </kisi>
  <kisi>
    <sira>3</sira>
    <adi>Sinan</adi>
    <soyadi>SEZER</soyadi>
  </kisi>
  <kisi>
    <sira>4</sira>
    <adi>Mehmet</adi>
    <soyadi>SEZER</soyadi>
  </kisi>
</kisiler>

XML verilerini göstereceğimiz HTML elemanlarını oluşturalım.

<p id="kisi_bilgi"></p>
<input type="button" value="Önceki" />
<input type="button" value="Sonraki" />

XML dosyasındaki verileri okuyalım.

<script>
"use strict";
  function UrlAc(URL, GeriBildirim) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {

        GeriBildirim(this);

      }
    }

    xhr.open("GET", URL);
    xhr.send();
  }

  UrlAc("kisiler.xml", Islemler);

XML dosyasındaki verileri işleyelim.

var liste, konum = 0, kisi_sayisi = 0;

function Islemler(sonuc) {

  var xml_degeri = sonuc.responseXML;

  liste = xml_degeri.getElementsByTagName("kisi");

  kisi_sayisi = liste.length - 1;

  goster(0);

}

function goster(sira) {

  var eleman = "";

  if (sira < 0) konum = kisi_sayisi;

  if (sira > kisi_sayisi) konum = 0;

  eleman = "Sıra : " + liste[konum].children[0].innerHTML + "<br />";
  eleman += "Adı : " + liste[konum].children[1].innerHTML + "<br />";
  eleman += "Soyadı : " + liste[konum].children[2].innerHTML + "<br />";

  document.getElementById("kisi_bilgi").innerHTML = eleman;

}
</script>

XML dosyasındaki verileri liste isimli bir değişkene aktardık, daha sonra goster fonksiyonu ile gönderilen parametreye göre XML değerini HTML elemanına aktardık.

Önceki ve sonraki HTML elemanlarına basıldığında görünen elemanı değiştirmek için onclik olayı ekleyelim.

<p id="kisi_bilgi"></p>
<input type="button" value="Önceki" onclick="goster(--konum);" />
<input type="button" value="Sonraki" onclick="goster(++konum);" />

Önceki ve sonraki elemanlarına basıldığında XML elemanına ait sırayı tutan konum değişkenini azaltıp arttırarak elemanlar arasında geçiş yapmış olduk.

Diğer JavaScript XML işlemlerine JavaScript derslerinden ulaşabilirsiniz.

Hayırlı günler dilerim.

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir