JQuery İle XML Dosyalarını Okuma

Mayıs 17 14:06 2014 Yazar: A.Gökhan, M.Sc. Bu yazıyı yazdır

Geçmiş yazılarda XML ve JQuery ile ilgili konulardan bahsetmiştik, ilgili yazı kategorilerine aşağıdaki linkler aracılığı ile ulaşabilirsiniz:

XML
JQuery

Bu konuda XML dosyalarını JQuery kütüphanesini kullanarak içerisindeki verilere erişme ile ilgili basit bir uygulama yapacağız. Öncelikle XML dosyasını oluşturalım:

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

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

<site>

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

<title>phpservisi</title>

</site>

<site>

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

<title>gokhan satman</title>

</site>

</siteler>

Yukarıdaki XML dosyasını site.xml olarak kaydedelim. Sonrasında üç adet dosya oluşturacağız, bunların biri JQuery kütüphanesi olacak. Bu dosyayı JQuery download sayfasından indirebilirsiniz. Bunun dışında bizim manuel olarak oluşturacağımız dosyalar şunlardır:

JQuery sayfası: lib.js
HTML sayfa: veri-goster.html

HTML sayfasında bulunan body elementleri arasına aşağıdaki HTML kodlarını ekleyeceğiz.

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

<tr>

<td>Title</td>

</tr>

</table>

Yukarıda 2 sütun 1 satırlık bir tablo ve hata durumlarında ekrana yazdırılacak mesajın bulunacağı bir div bulunmaktadır. XML dosyasında url ve title isimli iki adet element bulunmaktadır. Bu sebeple tablo içerisinde 2 adet sütun oluşturuyoruz. JQuery ile XML dosyasında mevcut olan satır sayısı kadar yeni satır ekleyeceğiz:

// 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 veri = '<tr>';
				veri += '<td>' + URL + '</td>';
				veri += '<td>' + title + '</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 veri = '<tr>';

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

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

veri += '</tr>';

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

});

error: function(e, hataMesaji) {

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

}

});

JQuery ajax metodunu kullanarak XML dosyasında bulunan tüm verileri HTML sayfada çıktı oluşturduk.

Ekran Çıktısı

Yukarıdaki uygulamannın demosuna buradan ulaşabilirsiniz: DEMO

Yazı şöyle etiketlendi:

Kategoriler:

Ajax JQuery XML

daha fazla yazı görüntüle

Yazar Hakkında

A.Gökhan, M.Sc.

My Name is A. Gokhan SATMAN, and I am a software engineer, Author and game developer. gokhansatman.com

Daha fazla yazı görüntüle

daha fazla yazı görüntüle

İlgili Yazılar

Yorum yaz

JQuery İle XML Dosyalarını Okuma

Yazar Hakkında

İlgili Yazılar

1 Yorum

Yorum ekle

Cevabı iptal etmek için tıklayın.

JQuery İle XML Dosyalarını Okuma

Yazar Hakkında

İlgili Yazılar

1 Yorum

Yorum ekle

Loading, Please Wait!