Merhaba arkadaşlar bu yazımda jquery ve ajax metodlarını kullanarak kendi oluşturduğumuz bir xml dosyasından nasıl veri çekebileceğimizi anlatacağım . İlk olarak xml dosyası oluşturalım .
<?xml version="1.0" encoding="utf-8" ?>
<SonKitaplar>
<Kitap>
<Baslik>Jquery</Baslik>
<Tanim>Web siresi tasarlmaya yeni başlayan ve mevcut siteleri geliştirenler kişilerin bilmesi gerekir. </Tanim>
<Tarih>12/1/2010</Tarih>
</Kitap>
<Kitap>
<Baslik>Javascript</Baslik>
<Tanim>Web tasarım dünyasının olmazsa olmazı olarak tanımlanıyor son yıllarda .</Tanim>
<Tarih>4/1/2010</Tarih>
</Kitap>
<Kitap>
<Baslik>HTML5</Baslik>
<Tanim>Günümüzün ve geleceğin web teknolojilerinde kullanılacak temle alt yapısı olarak kendini duyurdu.</Tanim>
<Tarih>6/2/2010</Tarih>
</Kitap>
<Kitap>
<Baslik>CSS3</Baslik>
<Tanim>Çogu mobil cihazın ve browser'ın desteklediği css3 il kodlamayla bir adım öne çıkın !</Tanim>
<Tarih>14/2/2010</Tarih>
</Kitap>
</SonKitaplar>
Ben yukarıdaki şekilde gördüğünüz gibi books.xml adında bir xml dosyası oluşturdum . Şimdi sıra jquery ve ajax metodlarını yazacağımız sayfaya geldi.
<!DOCTYPE html >
<head>
<title>JQUERY-XML</title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
</head>
<body>
<div class="main"></div>
</body> </html>
Gereken html taglarımızı açıyoruz ve gerekli olan ajax api ' yi script taglarımızın içine ekliyoruz. Body tagımızın içinede classı main olan bir div ekliyoruz ki bilgilerimizi bu divin içinde gösterelim .
Ajax metodumuzu yazmanın zamanı geldi . Yeni bir script tagı oluşturup buraya ajax metodumuzu yazalım .
$(document).ready(function () {
$.ajax({
type: "GET",
url: "books.xml",
dataType: "xml",
success: Parser
});
});
Satırlarımızı tek tek inceleyelim . İlk olarak jquery fonksiyonumuzu oluşturuyoruz . Burda kullandığımız ajax metodu jquery kullanımı olduğundan başına $ işareti koyuyoruz. Type get olucak çünkü belirtilen kaynaktan verileri almamız gerekiyor. Url ile kaynağımızı belirtiyoruz . Data type uzantımız xml oldugundan xml . Success karşılığına da fonksiyon ismimizi yazıyoruz. Aşağıda oluşturacağımız fonksiyon ismini yazıyoruz istediğimiz bir isim yazabiliriz.
function Parser(xml) {
$(xml).find("Kitap").each(function () {
$(".main").append('<div class="kitap"><div class="baslik">' + $(this).find("Baslik").text() + '</div><div class="tanim">' + $(this).find("Tanim").text() + '</div><div class="tarih">Basılma: ' + $(this).find("Tarih").text() + '</div></div>');
$(".kitap").fadeIn(1000);
});
}
Ben parser adında bir paremete gönderen fonksiyon oluşturdum .Bu fonksiyonu verileri çekmek için oluşturuyoruz . $ işaretimle xml paremetremi seçiyorum ve find metoduylada xml dosyamı buluyorum . each diyerek her bir fonksiyon için yapmasını belirtiyorum. Main classımı seçerek append metoduyla sonuna ekleme yapmasını istiyorum . Her birini bir div içine alarak data düzenli görünmesini sağlıyorum . Kitap classımı seçerek fadeIn metodumla 1000 milisaniyede göstermesini sağlıyorum Buraya jquery ' nin diğer metodlarını da yazabiliriz fadeOut , show ,toggle gibi .. Aynı zamanda saniye kısmını da istediğimiz şekilde düzenleyebiliriz.Uygulamamız bitmiştir bu son kodla ama ben css kodu da eklemek istiyorum . Daha güzel bir görünüm elde etmek için eklemek isteğe bağlıdır.
<style>
.main{
width:1000px;
margin:0 auto;
height:130px;
}
.kitap{
width:208px;
float:left;
margin:10px;
border:1px #dedede solid;
padding:5px;
display:none;
}
.baslik{
margin-bottom:6px;}
.tanim{font-size:11px; font-family:Geneva, Arial, Helvetica, sans-serif;}
.tarih{font-size:10px; color:#999; margin-top:4px;}
</style>
Style dosyamızı da ekledik . Burada en önemli noktayı söylemeyi unuttum bu uygulamayı yerel bir sunucuda çalıştırmamız gerekiyor Çünkü ajax metodları çalışmıyor. Bunu da söyledikten sonra uygulamamıza son noktayı koyabilirim.
Umarım yararlı bir çalışma olmuştur . Herkese iyi çalışmalar..
Bu yorum yazar tarafından silindi.
YanıtlaSil