Ajax ile sayfa degişmeden belli aralıklarla veri çekmesi

Raiden — Thu, 26 Jun 2008 21:31:28 +0000

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:



Ajax ile Refresh:: www.ysfkc.com



<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>


Mesaj Güncellencek Bekleyiniz...

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

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.

Javascript Compress

Raiden — Wed, 21 May 2008 10:05:39 +0000

Web sitelerimizi tasarlarken yaptığımız dosya boyutlarının bizim için ne kadar önemli bir yer tuttuğunu hepimiz biliriz. Ne kadar küçük boyutta olurlarsa o kadar çabuk yüklenecektir. Son zamanlarda bir çok js frameworklerini uygulamalarız da kullanmaktayız.

Bu tip uygulamalar sitemize görsel ve etkileşim açısından katkıları olsa da sitemizin açılma hızına etki etmektedir. Peki bunun önüne nasıl geçebiliriz ? Aşağıda vereceğim web site adresi bunu sizin yerinize yapıyor. Js kodlarınızı siteye gönderip compress dediğiniz de kodlarınızdaki whitespace ( beyaz boşluklar ) ve gereksiz açıklama satırlarını silerek dosyanın KB ‘nı düşürüyor.

94 Kb’ lık bir jquery dosyasını 30 KB’ a kadar düşürüyor.

124 Kb’ lık bir prototype dosyasını 50 KB’ a kadar düşürüyor.

Siteye buradan gidebilirsiniz.

Yusuf KOÇ » Javascript

Ajax ile sayfa degişmeden belli aralıklarla veri çekmesi

Javascript Compress