Merhabalar yeniden yeniden yazı yazıyor olmak beni heyecanlandırdı :) hani derler ya ilk gördüğüm zamandaki heyecan hala içimde benimki de öyle olsa gerek neyse komikliği bırakıp işimize bakalım.

Bir çoğumuzun başına gelebilecek bir konuya değinmek istiyorum. Sayfa değişmeden bir başka sayfadaki verileri belli aralıklarla istediğimiz alan içinde güncellememiz gerekebilir. Ben de bu durum için bir örnek vereceğim.

Örneğimiz istek.php dosyasına istek yapıp çıkan sonucu bizim istediğimiz alanda gösterecek. Örneğimiz php ve javascript frameworku olan jquery ve onun bir eklentisi jquery.timer i kullanacağız.

Öncelikle istek yapacağımız dosyamızı bir tanımlayalım.

istek.php dosya içeriğimiz aşağıdaki gibi olucaktır.

echo str_shuffle(uniqid(md5(mt_rand())));

istek dosyamız kendisine her istek yapıldığında uniq ( benzersiz ) bir md5 sum oluşturacaktır. str_shuffle() fonksiyonu ise oluşturulan md5 stringi karıştıracaktır ve en sonunda da echo ile elde ettiğimiz stringi ekrana yazıyoruz.

Şimdi ise sıra geldi isteği yapacak olan sayfamızı yapmaya. İsteği yapacak olan sayfamız bir adet javascript fonksiyondan oluşacak. Bu fonksiyon ajax yöntemi kullanarak istek.php ye istek yapıp dönen sonucu almamızı sağlıcak.

index.php:

<html>
<head>
<title>Ajax ile Refresh:: www.ysfkc.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.timer.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $.timer(3000,function() {
        a();
    });
});
 
function a() {
    $.ajax({
        type:'GET',
        url:'istek.php',
        success: function (msg) {
            $('div#adi').html(msg);
        }
    });
}
</script>
</head>
<body>
<div id="adi">Mesaj Güncellencek Bekleyiniz...</div>
</body>
</html>

isteği yapacak olan index dosyamızıda bitirdik. İşlemlerden bahsedelim.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.timer.js" type="text/javascript"></script>

satırları ile javascript kütüphanemizi ve onun eklentisini sayfamıza dahil ediyoruz. Ardından

$(document).ready(function () {
    $.timer(3000,function() {
        a();
    });
});

kısmı ile jquery nin sayfa yüklendiğin de çalışmasını sağlayacak olan document.ready özelliğini kullanarak tetiklenmesi gereken metodlarımızı belirtiyoruz. burda $.time() fonksiyonu jquer.timer.js den gelmektedir. kullanımı ise $.timer(süre,function) şeklindedir. Biz burada kendimizin tanımlamış olduğumuz a() fonksiyonunu her 3 saniye de bir tetikle şeklinde bir ifade belirttik.

function a() {
    $.ajax({
        type:'GET',
        url:'istek.php',
        success: function (msg) {
            $('div#adi').html(msg);
        }
    });
}

a() isimli fonksiyonumuzda ise jquery kütüphanesinin ajax metodu kullandık. Aldığı metodları bir gözden geçirelim kısaca

type: Ajaxın istek yapacağı method. GET ya da POST
url: Ajaxın istek yapacagı sayfa url si
success: Ajaxın tamamlandığında tetiklenecek işlemlerimizi burada belirtiyoruz. buradaki msg istek sonucunda dönen veri msg ye aktarılıyor.

Evet arkadaşlar göründüğü üzere çok basit 1 fonksiyonla sayfamız değişmeden bir başka sayfadaki verileri belli saniye aralıkları ile yenileyerek alabiliyoruz.

Kullandığımız örneğimize buradan bakabilir ve buradan da indirebilirsiniz.