Facebook ve Twitter Tarzı İçerik Yükleme

Facebook ve Twitter'da kaydırma çubuğunu aşağıya indirdiğinizde yeni içerik yükleniyor, peki ama nasıl?

Facebook veya Twitter'dan herhangi birini kullanmayan yoktur sanırım. Bu siteleri kullanırken farketmiş olmalısınız. Sayfayı okurken dikey kaydırma çubuğunu en aşağı konuma çektiğinizde AJAX ile yeni içerik yükleniyor. Bu yazımda bunun nasıl yapılacağını anlatacağım.

Bu şekilde içerik yüklemenin nedeni kullanıcı siteyi açtığında ilk etapta az içerik göstererek sayfa yüklenmesini hızlandırmak. Ayrıca bu şekilde gerçekleşen yüklemede sunucuda yapılan sorgudan dönen verinin büyüklüğünde de ciddi anlamda azalma oluyor.

Kendi AJAX fonksiyonumu da kullanarak hazırladığım dosya Jquery kütüphanesine başvuruyor. Aşağıdaki fonksiyonu kaydırma çubuklarının hareketi tetikliyor.

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
getir();
}
});

Şayet kaydırma çubuğu en alt noktaya ulaşmış ise getir() fonksiyonu devreye giriyor.Fonksiyon şu şekilde:

function getir()
{
sayi=10*kez;
do_ajax('?sayi='+sayi,'bekle','Bekleyiniz...','icerik_'+kez,'say.php','GET');
kez=kez+1;
$("div#icerik_0").parent().append("<div id='icerik_"+kez+"'></div>");
};

Her seferinde 10 adet içerik alacağım için "kez" değişkenini değerini 10 ile çarpıyorum. AJAX fonsiyonum do_ajax() ile verileri "say.php" dosyasına GET metodu ile gönderiyorum. En son daha sonraki kaydırma işleminde kullanılacak yeni içerik için DIV alanı ekliyorum.

PHP dosyasının içeriğini açıklamaya gerek duymuyorum, çünkü sadece GET ile aldığı sayıyı artırıp "lorem ipsum" ekleyerek ekrana yazdırıyor.

Kendi PHP dosyasınızda veritabanı bağlantısı kullanarak Facebook ve Twitter'daki gibi otomatik içerik eklenen sayfalar hazırlayabilirsiniz.

AJAX fonksiyonum hakkında daha fazla bilgi almak için tıklayın.

Örnek dosyayı incelemek için buraya, indirmek içinse buraya tıklayın.

Umarım faydalı bir yazı olmuştur, yeni bir konuda görüşmek üzere..