Bu makalede sizlere JQuery ile XML'den nasıl veri çekilip kullanılacağını göstereceğiz. Konu gayet basit ve açık. Tabiki öncelikle JQuery, AJAX ve XML konusunda biraz bilgi sahibi olmanız gerekiyor. Bu yüzden bu konulara makaleye başlamadan önce bir göz atmanızı tavsiye ederiz. Konumuza geçecek olursak öncelikle XML oluşturuyoruz. Bu size kalmış. Herhangi bir XML olabilir ya da bir RSS beslemesi de olabilir. Biz deneme amaçlı şöyle bir XML oluşturduk.
<?xml version="1.0" encoding="utf-8" ?>
<Personlist>
<Person>
<Name>Eleman1</Name>
<Position>Birinci</Position>
</Person>
<Person>
<Name>Eleman2</Name>
<Position>İkinci</Position>
</Person>
<Person>
<Name>Eleman3</Name>
<Position>Üçüncü</Position>
</Person>
</Personlist>
Daha sonra aşağıdaki gibi HTML kod bloğunu ve içine AJAX kontrolünü eklemiş olduk.
<!doctype html>
<html>
<head runat="server">
<title>XML/JSON Deneme</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"> $(function () {
$('#getdata').on('click', function () {
$.ajax({
url: 'test.xml',
type: 'GET',
dataType: 'xml',
success: function (gelen) {
var html = "<table>";
$(gelen).find('Person').each(function () {
html += "<tr><td><label>Ad:</label>" + $(this).find('Name').text() + "</td><td><label>Pozisyon:</label>" + $(this).find('Position').text() + "</td></tr>";
});
html += "</table>";
$("#showdata").html(html);
}
});
});
}); </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" id="getdata">XML Verilerini Al</a>
<div id="showdata"></div>
</div>
</form>
</body>
</html>
Gördüğünüz gibi body tagları arasında ilk önce "getdata" id'si olan bir link ve "showdata" id'si olan bir div oluşturduk. Daha sonra head tagları arasına sayfa hazır olduğunda anlamını taşıyan $(function(){ //sayfa hazır olduğunda çalıştır. }); bu kod bloğunun içine "getdata" id'si olan linke tıklandığında XML'deki verileri getirip "showdata" id'si olan div'in içine yazan script'i hazır hale getirdik. Burada en önemli nokta AJAX'ın dataType property'sinin XML yapılması ve veri kaynağının belirtilmesidir. Veri kaynağı belirtilmediği takdirde sonuç alamayacağımız gibi AJAX doğru bir şekilde çalışmayacaktır.
Herkese iyi çalışmalar dileriz.
İşletmenizin en kritik sorunları ve fırsatları konusunda yardımcı oluyoruz. Birlikte kalıcı değişim ve sonuçlar almaya ne dersiniz?