Bu yazıda Jquery ile xml uzantılı bir dökümandan nasıl data çekeceğimizi göreceğiz. Bunun için öncelikle XMLFile.xml adında örnek bir xml dosyası oluşturalım:
<?xml version="1.0" encoding="utf-8" ?>
<library>
<books>
<book>
<name>Issız Ev</name>
<writer>Orhan Pamuk</writer>
</book>
<book>
<name>Ama Hangi Atatürk</name>
<writer>Taha Akyol</writer>
</book>
</books>
<staffs>
<staff>
<name>Recep</name>
<surname>Günay</surname>
</staff>
<staff>
<name>Yusuf</name>
<surname>Uzun</surname>
</staff>
<staff>
<name>Adem</name>
<surname>Giyici</surname>
</staff>
</staffs>
</library>
Görüldüğü gibi “library” altında “books” ve “staffs” olmak üzere iki alt veri başlığımız var. Bu verilerin içinde de yine ilgili altbaşlıklar ve onların verisi var. Örneğin, kütüphane altında kitaplar bölümünde 2 tane kitabımız var. Bu kitaplarında her birinin adı ve yazarı eklenmiş.
Xml dosyamız hazırlandıktan sonra htm dosyamızı hazırlayalım.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "XMLFile.xml",
dataType: "xml",
success: readData
});
function readData(data) {
$(data).find('book').each(function () {
alert($(this).find('name').text());
alert($(this).find('writer').text());
});
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
Head kısmında indirmiş olduğum javascript kütüphanesinin(jquery) yolunu verdim; <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>.
Daha sonra xml dosyamızı alabilmemiz için server’a göndereceğimiz request için;
$.ajax({
type: "GET",// request’in tipini yazıyoruz GET/POST
url: "XMLFile.xml",//Xml dosyamızın bulunduğu yolu veriyoruz. Buraya direk url de verebiliriz. Örneğin; www.deneme.com/myXMLFile.xml
dataType: "xml",//Buraya alınacak data tipini yazıyoruz. Xml çektiğimiz için xml yazdık. Json tipinde bir data çekseydin JSON yazacaktık
success: readData//Buraya yükleme başarılı sonuçlandığında çalışacak fonksiyonun adını yazıyoruz.
});
Xml dosyamız başarıyla yüklendiğinde readData fonksiyonunu tetikletiriz.
function readData(data) {
$(data).find('book').each(function () {
alert($(this).find('name').text());
alert($(this).find('writer').text());
});
}
Fonksiyona parametre olarak data gönderdim, siz buraya herhangibir değişken ismi yazabilirsiniz. Daha sonra “book” isimli dataları find methoduyla bulup her birinin altbaşlıklarının datalarını ekrana alert ile yazdırıyoruz. Örneğin book değilde “staff” ları getirmek isteseydik;
function readData(data) {
$(data).find('staff').each(function () {
alert($(this).find('name').text());
alert($(this).find('surname').text());
});
}
Güzel, istediğimiz veriyi artık xml’den çekip alabiliyoruz. Şimdi bunu ufak bir uygulamaya dönüştürelim. Örneğin, xml dosyasından “book” verilerini alıp, htm sayfamızda bir tablo ( <table> ) içinde ekrana yazdıralım. Bunun için basit bir jquery selector’ü kullandım. Oluştumak istediğim tablonun html’ini bir değişkenin içine ekledim, daha sonra bu değişkenimin değerini <body></body> içine daha önce eklediğim <div id="content"></div> divinin içine attım. Bu atma işlemini $("#content").html(str); bu şekilde yapıyoruz. Örnek htm dosyası aşağıdaki gibidir;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "XMLFile.xml",
dataType: "xml",
success: readData
});
var str = "<table border=\"1\" cellpadding=\"3\">";
function readData(data) {
$(data).find('book').each(function () {
str += "<tr><td>" + $(this).find('name').text() + "</td><td>" + $(this).find('writer').text() + "</td></tr>";
});
str += "</table>";
$("#content").html(str);
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
Hiç yorum yok:
Yorum Gönder