jQuery ile sayfa değişmeden alan yenileme / veri çekme scripti

Bu script sayesinde tanımladığınız bir alanda belirli aralıklarla yenileme yapabilir böylelikle her defasında farklı bir içerik veya resim görüntüleyebilirsiniz. Ayrıca sayfa değişmeden farklı kaynaklardan (veritabanı, dış dosya) veri çekmek için oldukça ideal.

Uygulamayı Egoradyo’da değişen şarkı isimlerini ve online sayısını çekmek için kullandım. Dilerseniz salt örneğini şu adresten inceleyebilirsiniz.

Scriptin kullanımı oldukça basit, yapmanız gereken ilk şey sürekli değişen verilerinizi bulunduran dosyayı (response.php) oluşturmak ve ardından uygulama yapacağınız sayfadan (index.php) çağırmak.

Uygulama yapılacak sayfada (index.php) </head> tagından önce eklenecek kodlar:

1
2
3
4
5
6
7
8
9
<script src="jquery-1.3.2.min.js"></script>
<script>
 $(document).ready(function() {
     $("#responsecontainer").load("response.php");
   var refreshId = setInterval(function() {
      $("#responsecontainer").load('response.php?randval='+ Math.random());
   }, 3000);
});
</script>

en sondaki 3000 rakamı milisaniyeyi ifade ediyor, bu rakamı çağırma sıklığınıza göre azaltıp arttırabilirsiniz.

yine aynı dosyada <body> tagından sonra, scripti çalıştırmak istediğiniz yere eklenecek kod:

1
2
<div id="responsecontainer">
</div>

hepsi bu kadar. Artık responsecontainer id’li alanınızda sayfa değişmeden belirli aralıklarla ister sürekli değişen verilerinizi listeler, isterseniz her defasında farklı bir resim gösterebilirsiniz. Scriptin oldukça basit ve kolay anlaşılır olduğunu düşünüyorum.

Scripti paket halinde indirmek için (20 Kb):
Download

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

65 Yorum

  1. sezgin

    Merhaba, bilgiler için teşekkürler…
    Bu konuyla ilgili bir sorunum var. radyozimbirti.org sitesinden sidebarda bulunan radyonun çalan şarkı bilgisinin yenilenmesini istiyorum. Sanırım aynı şeyi daha önce yapmışsınız. Ancak bilgiyi sidebarda nasıl göstereceğimi bir türlü çözemedim. Php klasörünü nasıl oluşturacağım ve sidebarda nasıl göstereceğim acaba? Şarkı bilgisinin geldiği ve header’a eklediğim kod şu anda bu:
    Sidebar’da görünmesini sağlayan kod ise bu: #Şu anda çalanYükleniyor … Şarkı bilgisi bazen donuyor ve sayfayı yenilemek gerekiyor. Sayfayı yenilemeden sadece bu kodu yenilemek istiyorum.

    Teşekkürler

  2. Kamil

    Merhaba peki bunu şöyle yapabilir miyiz caner bey;

    Bir form olacak ve buna ID’sini, giriş ve çıkış tarihlerini gireceğiz daha sonra bize o id ve giriş çıkış tarihlerine uyan bilgileri sıralayacak response olacak harici dosya hazır ama jquery ile form ilişkisi için nasıl bir yol izlemem gerekli bilemiyorum. Acaba örnek bir kod gösterebilir misiniz?

      • Kamil

        Tekrar merhaba,

        bir otel tanıtım sitem var ve bu site bir çok siteden ilgili otele ait oda ve fiyat bilgisi çekiyor. Yapmak istediğim şey jquery ile bir bölümde tarih ve oda bilgilerini girip sayfayı hiç yeniletmeden sadece bir bölümde veri alışverişi yaptırmak yani ana bir div olduğunu düşünelim bu divin içinde sadece tarih, oda sayısı ve kişi sayısı alanı olsun. Kullanıcı bu alandaki bilgileri doldurup butona tıkladığında hemen altına oda bilgileri sıralanacak. Web sitemde hızdan kazanmak için sayfayı tekrar çekmemek için sadece bir bölümünde bu işlemi yaptırmak daha mantıklı geliyor ama istediğim gibi bir sonuç bulamadım bir türlü.

  3. Murat Temel

    abi ben zaman içinde artan bir sistem istiyorum sayfa değişmeden onu nasıl sağlayabilirim yani bir banka hesabı düşün be her dakika 5 dolar artıyo hesaptaki para ama daha fazla yatırırsam belki o 5 dolar 10 dolar da olabilir.Belki tam anlatamadım ama anladıysanız bi yardımcı olursanız çok sevinirim.

  4. devrim

    slm. herkez kendince birşeyler yapmış ama hep rakamlar üzerine. Bense rakam yerine kendiliğinden değişen resimler olsun istiyorum. resimler adlı bir klasörüm olsun ve bu klasöre eklediğim resimleri rastgele tek tek değiştirsin istiyorum. birtürlü yapamadım. örneğini yapan olursa nasıl sevineceğimi anlatamam. saygılar.

  5. suat

    merhaba araştırdım fakat forumlarda sorunuma çözüm bulamadım. jquery ile yenilemeden sayfayı güncelleyebiliyorum
    fakat sorunum şu yardımcı olacak arkadaşlar şimdiden teşekürler…
    sayfam yenilenirken o anda kullanıcının izlediği herhnangi bir videonun kesilmeme olayını bir türlü gerçekleştiremedim…
    bu konuda bi mantık üretebilecek arkadaşlaraşimdiden tşkrlr

  6. Yakup

    Merhaba Caner Bey, öncelikle paylaşımınız için teşekkür ederim. Bir konuda yardımınıza ihtiyacım var anlık içeriği görüntülemek için sayfa yerine sayfa içindeki birden fazla değişkenin güncellenmesini sağlayamazmıyım ?

  7. Emre Dipi

    Merhaba yazıda anlattığınız sistemi kullanıyorum ama başka bir yerde içeriği güncellemek yerine her gelen içeriği devamına eklemesini istiyorum. Kodlarda nasıl bir değişiklik gerekli ?

    Siz örnek olarak rastgele numaralar veriyordunuz.

    12349466
    78548445
    9654125161
    3591615155
    511613513
    515555
    4984165

    şeklinde 🙂

  8. Mehmet Fatih

    Merhaba Caner Bey, internette araştırırken buldum sayfanızı

    Vermiş oldugunuz kodları denedim sistemimde ama şöyle bir eksisi var benim için , kullanıcılar arasında eş zamanlı bir yenileme olmuyor , Örnek olarak A kullanıcısı sayfaya girdi ve ilgili div tagının yenilenmesi için geri sayım baslamış oldu ( 60 sn diyelim ) 15 sn sonra B kullanıcısı kendi bilgisayarından sayfaya girdiginde geri sayın B kullanıcısı için yeni baslamış oluyor , böylelikle eş zamanlı bir yenilenme olmuyor , yapmak istedigim ise yenileme durumunu tüm kullanıcılar için eş zamanlı yapmak , mesela 1 dk da bir ilgili div tagı yenilensin istiyorum bunun için de şöyle date(“Y-m-d H:i:00”) dedigim zaman saniye alanı her 00 oldugunda yenilenme olacak ve bu yenilenme eş zamanlı olacak ama bu durumu

    $(document).ready(function() {
    $(“#1”).load(“test.php”);
    var refreshId = setInterval(function() {
    $(“#1”).load(‘test.php’);
    }, 300000);
    });

    burada nasıl kodlayarak yapabilirim.
    Şimdiden teşekkür ederim 🙂

  9. ömer

    merhaba google da ararken siz çıktınız dediklerinizi uygulayıp sorunsuz bir şekilde çalıştı.
    Emeğinize karşılık teşekkür yorumu bırakmak istedim.

  10. ONUR YILDIZ

    Merhabalar bunu Asp .Net mvc projesinde kullanabilir miyim? Yani php projesindemi çalışıyor sadece? mesela ben ms sql veritabanımda bir adet tablom var ve bunda kullanıcının konum bilgisi var ben bunu sürekli olarak güncellemek istiyorum.

    BUNUNLA ALAKALI BİR ÖRNEK VARMIDIR YARDIMCI OLABİLİR MİSİNİZ?

    • Caner Öncel
      Yazar

      Merhaba, tarayıcı bazlı kodları her türlü altyapılı projenizde kullanabilirsiniz ancak bu kodlar oldukça eski olduğu için kullanmanızı tavsiye etmem.

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir