JavaScript XML Okuma, Verileri Listeleme, Örnek Uygulama

Yazıda JavaScript ile XML dosyasını okuma ve XML içerisindeki verileri listeleme işlemi XML örnek uygulamasıyla yer alıyor.

XML okuma

JavaScript XML dosyalarını okumak ve veri çekmek için AJAX kullanılır.

AJAX ile ilgili detaylı bilgiye JavaScript AJAX Nedir? Kullanımı yazısından ulaşabilirsiniz.

AJAX ile XML Nedir? yazısında yer alan aşağıdaki kisiler.xml dosyasını okuyalım.

<?xml version="1.0" encoding="UTF-8"?>
<kisiler>
  <kisi>
    <sira>1</sira>
    <adi>Yusuf</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>

Okuma işlemi için JavaScript AJAX Nedir? Kullanımı yazımda yer alan AJAX fonksiyonunu kullanabiliriz.

<script>
'use strict';
  function ysAjax(url, method, data, callback) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        if (typeof callback == 'function') {
          callback(this);
        }
      }
    }

    xhr.open(method, url);
    if (method == 'POST' && !(data instanceof FormData)) {
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    xhr.send(data);
  }

  ysAjax('kisiler.xml', 'GET', null, islemler);

  function islemler(sonuc) {
    console.log(sonuc.response);
  }
</script>

XML verileri listeleme

XML Okuma ile AJAX teknolojisini kullanarak XML dosyasını okumuştuk.

Okuma sırasında response, responseText ve responseXML değerlerini kullanabiliyorduk.

responseXML, XMLDocument nesnesi olduğundan bize kullanmamız için çeşitli metot ve özellik sunar.

XMLDocument nesnesi içerisinde HTML etiketlerinde de işlem yapmak için kullanılan getElementsByTagName, querySelector, querySelectorAll gibi DOM metotlarını sunar.

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</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 listelemek için öncelikle XML dosyasını okuyalım.

<script>
'use strict';
  function ysAjax(url, method, data, callback) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        if (typeof callback == 'function') {
          callback(this);
        }
      }
    }

    xhr.open(method, url);
    if (method == 'POST' && !(data instanceof FormData)) {
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    xhr.send(data);
  }

  ysAjax('kisiler.xml', 'GET', null, islemler);

  function islemler(sonuc) {
    console.log(sonuc.responseXML);
  }
</script>

XML elemanlarını getElementsByTagName metodunu kullanarak seçelim, metot sonucunda dönen children özelliği ile değerlere ulaşalım.

<script>
'use strict';
  function ysAjax(url, method, data, callback) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        if (typeof callback == 'function') {
          callback(this);
        }
      }
    }

    xhr.open(method, url);
    if (method == 'POST' && !(data instanceof FormData)) {
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    xhr.send(data);
  }

  ysAjax('kisiler.xml', 'GET', null, islemler);

  function islemler(sonuc) {

    var xml_degeri = sonuc.responseXML,
        liste = xml_degeri.getElementsByTagName('kisi'),
        sira = 0,
        uzunluk = liste.length,
        eleman = '';

    for (sira = 0; sira < uzunluk; sira++) {
      eleman += liste[sira].children[0].innerHTML + ' ';
      eleman += liste[sira].children[1].innerHTML + ' ';
      eleman += liste[sira].children[2].innerHTML + '\n';
    }

    console.log(eleman);
  }
</script>

Verileri DOM nesnesine ait getElementById metodunu kullanarak web sayfası içindeki elemana yazdıralım.

<p id="kisi_listesi"></p>

<script>
'use strict';
  function ysAjax(url, method, data, callback) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        if (typeof callback == 'function') {
          callback(this);
        }
      }
    }

    xhr.open(method, url);
    if (method == 'POST' && !(data instanceof FormData)) {
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    xhr.send(data);
  }

  ysAjax('kisiler.xml', 'GET', null, islemler);

  function islemler(sonuc) {

    var xml_degeri = sonuc.responseXML,
        liste = xml_degeri.getElementsByTagName('kisi'),
        sira = 0,
        uzunluk = liste.length,
        eleman = '';

    for (sira = 0; sira < uzunluk; sira++) {
      eleman += liste[sira].children[0].innerHTML + ' ';
      eleman += liste[sira].children[1].innerHTML + ' ';
      eleman += liste[sira].children[2].innerHTML + '< br / >';
    }

    document.getElementById('kisi_listesi').innerHTML = eleman;
  }
</script>

JavaScript ile XML işlemler oldukça kolay olmasına rağmen XMLDocument nesnesi içerisinde benzer metot ve özellik bulunmasından dolayı işlemler karmaşıklaşabilir.

XML okuma ve listeleme işlemleri sırasında tarayıcılarda yer alan geliştirici araçlarından faydalanmak işlemleri kolaylaştıracaktır.

XML Örnek Uygulama

XML Okuma yazısında XML dosyasını okumayı, 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</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 ysAjax(url, method, data, callback) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        if (typeof callback == 'function') {
          callback(this);
        }
      }
    }

    xhr.open(method, url);
    if (method == 'POST' && !(data instanceof FormData)) {
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    xhr.send(data);
  }

  ysAjax('kisiler.xml', 'GET', null, 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(konum);
}

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.