JS ile XML Kullanımı

Merhaba Webkolog takipçileri!

Bugün web geliştirmenin önemli konularından birine dalıyoruz: JavaScript ile XML kullanımı. XML'in veriyi yapılandırma ve taşıma gücüyle, JavaScript'in dinamik yetenekleri birleştiğinde ortaya neler çıkardığını ve günümüzde bu etkileşimi nasıl sağladığımızı adım adım inceleyeceğiz. Gelin, bu veri akışını nasıl yöneteceğimize bakalım!

---

XML Verisine JavaScript ile Erişim: İki Temel Yöntem

JavaScript ile XML verilerine erişmek için genellikle iki ana senaryo karşımıza çıkar:

1. Harici Bir XML Dosyasına Erişim: Sunucuda bulunan bir XML dosyasını alıp JavaScript ile işlemek.
2. Dize (String) Halindeki XML Kodlarına Erişim: JavaScript kodu içinde veya başka bir kaynaktan dize olarak gelen XML metnini ayrıştırmak.

1. XMLHttpRequest Nesnesi ile XML Dosyası Erişimi

Sunucudaki bir XML dosyasına erişmek için modern tarayıcılarda XMLHttpRequest nesnesini kullanırız. Bu, AJAX (Asynchronous JavaScript and XML) kavramının da temelini oluşturan güçlü bir araçtır.

var xmlhttp;

// Modern tarayıcılar (IE7+, Firefox, Opera, Safari, Chrome)
if (window.XMLHttpRequest) {
	xmlhttp = new XMLHttpRequest();
} 
// Eski Internet Explorer sürümleri (IE5, IE6) için ActiveXObject
else {
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// "GET" metodu ile "dosya.xml" adresine senkron (false) bir istek gönderiyoruz
xmlhttp.open("GET","dosya.xml",false);
xmlhttp.send(""); // İstek gövdesi boş

// Yanıt olarak gelen XML dokümanını bir XML DOM nesnesi olarak alıyoruz
var xmlDoc = xmlhttp.responseXML;

Yukarıdaki kod, dosya.xml adlı XML dosyasını sunucudan çeker ve içeriğini bir XML DOM nesnesi olan xmlDoc değişkenine atar. Artık bu xmlDoc nesnesi üzerinde JavaScript ile işlem yapmaya başlayabiliriz.

---

2. DOMParser Nesnesi ile Dize Halindeki XML Kodlarına Erişim

Eğer XML verileriniz bir dize (string) olarak JavaScript kodu içinde mevcutsa veya bir yerden dize formatında geldiys, bunu ayrıştırmak için DOMParser nesnesini kullanırız.

var xmlstring = `<insanlar>
	<insan tc="12345678901">
		<ad>Ali</ad>
		<soyad>Mantar</soyad>
		<yas>30</yas>
	</insan>
</insanlar>`; // XML kodlarını bu değişkene ata

var xmlDoc = "";
var parser;

// Modern tarayıcılar (IE7+, Firefox, Opera, Safari, Chrome)
if (window.DOMParser) {
	parser = new DOMParser();
	xmlDoc = parser.parseFromString(xmlstring,"text/xml");
} 
// Eski Internet Explorer sürümleri (IE5, IE6) için ActiveXObject
else {
	xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	xmlDoc.async = "false"; // Senkron yükleme
	xmlDoc.loadXML(xmlstring); // Dizeden XML yükleme
}

Bu kod bloğu, xmlstring içindeki metni ayrıştırarak onu yine bir XML DOM nesnesi olan xmlDoc'a dönüştürür. Her iki durumda da elde ettiğimiz xmlDoc nesnesi, XML dokümanının bellekteki temsilidir ve üzerinde gezinebilir, veri okuyabilir veya manipülasyon yapabiliriz.

---

XML DOM Yapısı ve Dolaşma

XML DOM (Document Object Model), bir XML dokümanını ağaç yapısı (tree structure) olarak temsil eder. Bu yapıda her şey bir Node (Düğüm) olarak adlandırılır. Temel node tipleri şunlardır:

• DocumentNode: Tüm XML dokümanını temsil eden ana düğüm. (xmlDoc değişkeni bir DocumentNode'dur)
• ElementNode: Her bir XML etiketi (örneğin, <insan>, <ad>) bir element düğümüdür.
• TextNode: Elementlerin içindeki metin içeriği (örneğin, <ad>Ali</ad> içindeki "Ali" metni).
• AttributeNode: Elementlerin nitelikleri (örneğin, tc="12345678901" içindeki tc niteliği).
• CommentNode: Yorum satırları (<!-- yorum -->).

Bu ağaç yapısında gezinmek için çeşitli DOM metotları ve özellikleri bulunur:

• Root: Dokümanın en dışındaki ana element.
• Element: Her bir XML etiketi.
• Parent (Ebeveyn): Bir düğümün bir üst seviyesindeki düğüm.
• Child (Çocuk): Bir düğümün bir alt seviyesindeki düğüm.
• Sibling (Kardeş): Aynı seviyede bulunan düğümler.
• Leaf Element (Yaprak Element): Başka alt elementi olmayan elementler.

DOM Metotları ve Özellikleri

XML DOM nesnesi üzerinde kullanabileceğimiz bazı temel metotlar ve özellikler:

• .getElementsByTagName("etiket_adi"): Belirtilen etikete sahip tüm elementleri bir liste (NodeList) olarak döndürür. Örneğin, xmlDoc.getElementsByTagName("insan")[0] ile ilk <insan> elementine erişiriz.
• .appendChild(node): Seçili elemente yeni bir alt düğüm ekler.
• .removeChild(node): Seçili elementten belirli bir alt düğümü kaldırır.
• .attributes: Elementin tüm niteliklerini döndürür.
• .nodeValue: Düğümün metin değerini döndürür (özellikle TextNode'lar için kullanılır).
• .nodeName: Düğümün adını döndürür (etiket adı, nitelik adı vb.).
• .parentNode: Düğümün ebeveyn düğümünü döndürür.
• .childNodes[indeks]: Düğümün tüm alt düğümlerini bir liste olarak döndürür. Belirli bir indeksteki alt düğüme erişmek için kullanılır.
• .firstChild: Düğümün ilk alt düğümünü döndürür.
• .lastChild: Düğümün son alt düğümünü döndürür.
• .nextSibling: Düğümün bir sonraki aynı seviyedeki kardeş düğümünü döndürür.
• .previousSibling: Düğümün bir önceki aynı seviyedeki kardeş düğümünü döndürür.

Örnek: İlk insanın adını çekme

var isim = xmlDoc.getElementsByTagName("insan")[0].childNodes[0].nodeValue;
// Bu kod, "insan" etiketlerinden ilkini alır,
// onun ilk alt düğümüne (yani <ad> elementinin içindeki metin düğümüne) ulaşır
// ve o metin düğümünün değerini (adını) çeker.
console.log(isim); // Çıktı: Ali

---

Güncel Yaklaşımlar ve Ötesi

Günümüzde, JavaScript ile XML verilerini işlemek hala geçerli bir yöntem olsa da, çoğu modern web uygulamasında JSON (JavaScript Object Notation) formatı, XML'e göre daha yaygın olarak tercih edilmektedir. Bunun başlıca nedenleri JSON'un daha az sözdizimi yüküne sahip olması, JavaScript objeleriyle doğrudan eşleşmesi ve daha hafif yapıda olmasıdır.

Ancak, XML hala birçok kurumsal sistemde, eski API'lerde veya belirli veri değişim standartlarında (örneğin, SOAP web servisleri) aktif olarak kullanılmaktadır. Bu nedenle, JavaScript ile XML'i okuma, yazma ve manipüle etme becerisi, bir web geliştirici olarak araç setinizde bulunması gereken değerli bir yetenektir.

Umarım bu makale, JavaScript ile XML verilerini nasıl yöneteceğiniz konusunda size net bir yol haritası sunmuştur. Veri işleme yeteneklerimizi geliştirmek, her zaman daha iyi uygulamalar yazmamıza yardımcı olacaktır!

Webkolog'u takipte kalın!

Hepinize bol kodlu ve başarılı projeler dilerim!