JQuery İle XML Dosyalarını Okuma: 2.Bölüm

Mayıs 18 13:41 2014 Yazar: A.Gökhan, M.Sc. Bu yazıyı yazdır

Daha önceki yazıda basit bir XML dosyasını JQuery kullanarak okuma işlemini gerçekleştirmiştik: JQuery İle XML Dosyalarını Okuma. Bu yazıda, yapısı attribute eklenmek suretiyle biraz daha karmaşık olan bir XML dosyasını JQuery Ajax metodu ile okuyacak ve ekrana yazdıracağız. Bunun için öncelikle XML dosyasını revize edelim:

<?xml version="1.0" encoding="utf-8"?>
<siteler>
  <site>
    <url>http://phpservisi.com</url>
    <title name="phpservisi">teknodemi</title>
  </site>
  <site>
    <url>http://gokhansatman.com</url>
    <title name="gokhansatman">kisisel</title>
  </site>
</siteler>

<?xml version="1.0" encoding="utf-8"?>

<site>

<url>http://phpservisi.com</url>

<title name="phpservisi">teknodemi</title>

</site>

<site>

<url>http://gokhansatman.com</url>

<title name="gokhansatman">kisisel</title>

</site>

</siteler>

Bir önceki yazıda bulunan XML dosyası ise title elementlerinde name attributelarını barındırmamakta idi. Buna göre, diğer uygulama ile aynı kalan HTML dosyasını bu bölümde tekrar göstermekte fayda görüyorum:

<table border="1">
<tr>
<td>URL</td>
<td>Title</td>
<td>[Name]</td>
</tr>
</table>
<div id="mesaj"></div>

<tr>

<td>Title</td>

</tr>

</table>

Yukarıdaki HTML kodlarını body etiketleri arasında yazacağınızı unutmayınız. HTMl dosyamıza yeni bir [Name] isimli sütun geldiğini görebilirsiniz. Buradan hareketle JQuery kodlarımızı şu şekilde düzenleyelim:

// JavaScript Document
$(document).ready(function() {
	$.ajax({
		url: 'site.xml',
		type: 'get',
		dataType: "xml",
		success: function(e) {
			$(e).find('site').each(function() {
				var URL = $(this).find('url').text();
				var title = $(this).find('title').text();
				var name = $(this).find('title').attr("name");
				var veri = '<tr>';
				veri += '<td>' + URL + '</td>';
				veri += '<td>' + title + '</td>';
				veri += '<td>' + name + '</td>';
				veri += '</tr>';
				$('table').append(veri);		
			});
		},
		error: function(e, hataMesaji) {
			$("#mesaj").html(hataMesaji);
		}
	});
});

// JavaScript Document

$(document).ready(function() {

$.ajax({

url: 'site.xml',

type: 'get',

dataType: "xml",

success: function(e) {

$(e).find('site').each(function() {

var URL = $(this).find('url').text();

var title = $(this).find('title').text();

var name = $(this).find('title').attr("name");

var veri = '<tr>';

veri += '<td>' + URL + '</td>';

veri += '<td>' + title + '</td>';

veri += '<td>' + name + '</td>';

veri += '</tr>';

$('table').append(veri);

});

error: function(e, hataMesaji) {

$("#mesaj").html(hataMesaji);

}

});

Yukarıdaki kodlarda görmüş olduğunuz gibi, 11 ve 15. satırlar, name isimli attribute için eklediğimiz satırları ifade etmektedir. name attribute, title element altında olduğundan dolayı yukarıdaki gibi bir hiyerarşi takip ettik. Yukarıdaki uygulama çalıştırıldığında aşağıdaki gibi bir görüntü elde edilecektir: