JavaScript XML Listeleme

Yazıda JavaScript ile XML okuma ve XML içerisindeki verileri listeme için kullanılan işlevler ile ilgili bilgi yer almaktadır.

XML verileri listeleme

JavaScript XML Okuma yazısında AJAX teknolojisi ile 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 vb. 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 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 listelemek için öncelikle XML dosyasını 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);

  function Islemler(sonuc) {

    alert(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 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);

  function Islemler(sonuc) {

    var xml_degeri, liste, sira = 0, uzunluk = 0, eleman = "";

    xml_degeri = sonuc.responseXML;

    liste = xml_degeri.getElementsByTagName("kisi");

    uzunluk = liste.length;

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

    console.log(eleman);

  }
</script>

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

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

<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);

  function Islemler(sonuc) {

    var xml_degeri, liste, sira = 0, uzunluk = 0, eleman = "";

    xml_degeri = sonuc.responseXML;

    liste = xml_degeri.getElementsByTagName("kisi");

    uzunluk = liste.length;

    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.

JavaScript ile XML işlemleri sırasında tarayıcı geliştirici araçlarından faydalanmak işlemleri kolaylaştıracaktır.

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