JQuery ile Sayfayı Yenilemeden Sayfa İçeriğini Güncelleme

 bcakir
 8 Haziran 2011

Merhaba arkadaşlar size JQuery ile sayfanızı yenilemeden içindeki veriyi belirli aralıklarla güncellemenizi sağlayacak kodu paylaşacağım. İnternette bu tarz kod heryerde neredeyse var fakat Internet Explorer da çalışmıyor. Bununla ilgili bir proje yapmam gerekmişti. Uzun araştırmalarım sonucunda bir Amerikalının bloğunda bulmuştum her tarayıcıda çalışanını. Size de katkısı olacağına inanıyorum.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   var refreshId = setInterval(function() {
      $("#sonuc").load("veri.php?randval="+ Math.random());
   }, 2000);
});
</script>
</head>
<body>
<div id="sonuc"></div>
</body>
</html>

Not: Bende çalışıyor olmasına rağmen, sizden gelen yorumlar yukarıda yer alan kodun bütün bilgisayarlarda ve tarayıcılarda çalışmadığını gösteriyor. Bundan dolayı, aşağıda yer alan kodu deneyin.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    //açılışta çalışması için
    gonder();
    //her 2 saniyede bir yenile
    var int=self.setInterval("gonder()",2000);
});

function gonder(){
    $.ajax({
        type:'POST',
        url:'veri.php',
        success: function (msg) {
            $("#sonuc").html(msg);
        }
    });
}
</script>
</head>
<body>
<div id="sonuc"></div>
</body>
</html>

Yukarıda veri.php dosyasından her 2 saniyede bir veri çekiyoruz ve bu veriyi id değeri sonuc olan div içerisine yazdırıyoruz. Yapacağımız uygulamanın veri.php içeriğini de vereyim, tam bir uygulama olsun. PHP den 1 ile 10000 arasından rasgele sayı üretip ekrana yazdırıyoruz. Sayı direk ekrana yazılmıyor, php den dönen değer oluyor ve JQuery bu değeri alıp sonuc divine yazdırıyor.

<?php
// veri.php olarak kaydedin
$sayi = Rand(1,10000);
echo $sayi;
?>

Umarım yaptığım yeni değişiklik, bütün bilgisayarlarda sorunsuz çalışıyordur. Uygulamanın açılışta çalışan versiyonunu buradan indirebilirsiniz. Uygulama hakkında değerli yorumlarınızı bekliyorum.

 18.964 Okunma

Bu yazıya 49 yorum yapılmış.

  1. google dan gezinirken buldum bloğunuzu, yararlı bilgiler varmış :D

  2. Merhaba, tam aradığım şey. Ancak chrome da sorunsuz çalışırken İE de çalışmıyor. Çok enteresandır ki IE de veri tabanından değişiklik yaptığımda veya çağırdığım dosyada değişiklik yaptığımda onları bile göstermiyor. Neden Olabilir acaba?

    • Kod IE’de de çalışıyor herhangi bir sorun yok. Tekrar denedim yine çalıştı.

  3. Kod bütün tarayıcılarda çalışıyor ben de denedim. Paylaşım için teşekkürler.

  4. Paylaşım için teşekkürler. Bu paylaşımını Long Pooling yazınla birleştirdim. Baya yararlı oldu.

  5. çok teşekkürler, basit ama çok güzel bir mantık, tam da bunu arıyordum.

  6. IE’de çalışmadığını belirtmek isterim. Acab IE’nin sürümünden kaynaklanıyor olmasın. IE 9 kullanıyorum ve maalesef çalışmadı.

    • İlk önce, daha önce uygulamanın çalışmadığını söyleyen kişilerden özür diliyorum. Çünkü uygulamanın sorunsuz çalıştığını iddia ediyordum. Ama maalesef uygulama her bilgisayarda çalışmıyor. Bu yüzden yazıyı güncelleyip, ekleme yaptım. Yaptığım bu değişikliğin çalışıp çalışmadığı hakkında değerli yorumlarınızı bekliyorum.

      • Maalesef bu sefer IE’de çalışıyor, firefox ve chrome’da çalışmıyor. Site tasarlarlıyordum ve her şey birden bire anlamsızlaştı. HTML site tasarlıyordum ve harici bir menuList.html dosyasının içeriğini div id=”anaMenu” tagları içerisinde göstermeye çalışıyordum. İlk zaman çalıştı. Sitenin tasarlanmasını sonuna geldiğimde IE’de çalıştığını, firefox ve chrome’da çalışmadığını farkettim. İkinci kez yazdığınız kodların çalışıp çalışmadığını kontrol eder misiniz? Bu işi sorun yaşamadan yapabileceğim tavsiyenizi ve rehberliğinizi de benden esirgememenizi diliyorum, iyi çalışmalar…

      • Server’da çalışıyormuş, ancak bilgisayarda local olarak çalışmıyormuş.

  7. Firefox, IE ve chrome’da çalıştı. Gerekten çalışmalarınızdan dolayı sizi tebrik ediyorum. Sitenizi yeni keşfettim, çok yararlanacağımı görüyorum. Çalışmalarınızın devamını diliyorum.

  8. uygulama için teşekkürler
    ancak kod çalıştığı anda değilde beklemesi gereken süre sonunda sayfayı çağırıyor acaba sayfa açılır açılmaz veri.php yi çağıran sonrasında ise istenilen zamana göre sayfayı yenileyen kod nasıl olacak?

    • $(document).ready(function(){
      gonder();
      var int=self.setInterval(“gonder()”,1000);
      });

      • tam olarak bundan bahsetmiyorum.
        süreyi 5 dakika olarak ayarlayın ve çalıştırın veri.php nin içeriğini görmek için 5 dakika beklersiniz benim bahsettiğim ise sayfayı açılır açılmaz çeksin 5 dakika geçtikten sonra sayfayı yenilesin.
        sayfayı başlangıçta da çekmesi için ne yazmam gerek.

        • Lütfen kodu aşağıda yazılanları dikkate alarak tekrar deneyin. Yukarıdaki kod da extradan gonder(); fonksiyonunu kullandığımız için sayfa açılır açılmaz çalışacak. Ayrıca da,
          var int=self.setInterval(“gonder()”,1000); kodu ile de her 1 saniyede sayfayı yenileyecek. Siz bu saniyeyi 300000 yaparsanız, 5 dk olur.

          • hocam 300000 yapıp bi denerseniz rasgele üretilen sayıyı ancak 5 dakika sonra görebiliyorsunuz yani açılır açılmaz bi değer görünmüyor ancak ilk değer 5 dakika sonra görünüyor. :( neyse yapamadım ben olmadı. ilginiz için teşekkürller

          • Kusura bakmayın, istediğiniz işlem bana çok kolay geldiği ve yukarıda detaylı olarak anlattığım için artık yeni bir açıklama yapmak istemiyorum. İstediğiniz uygulamayı buradan indirebilirsiniz. Uygulama denenmiş olup çalışmaktadır.
            Tek yapmanız gereken bu kısmı
            $(document).ready(function() {
            var int=self.setInterval(“gonder()”,1000);
            });
            aşağıdaki şekilde değiştirmekti.
            $(document).ready(function(){
            gonder();
            var int=self.setInterval(“gonder()”,3000);
            });

          • siteniz ve içerikler çok yararlı. teşekkür ettim.

  9. peki başka bir sitenin sayfasını neden çekemiyoruz?

    • Başka bir site derken? Bot yazmaktan bahsediyorsan o bu yazının kapsamına girmiyor. Eğer uzak siteden veri alacaksan, bu yazıyı incele.

  10. Teşekkür ederim güzel paylaşım.

  11. hava durumu cekıyorum selectbox ile sabit şehir kocaeli selectle istanbul u seciyorum gosteriyor fakat sayfam 1 dkk sonra yenilendiğinde kocaeli tekrar geri geliyor.secili olan veriyi sayfa yenilense bile basıl sayfada tutabılrım?
    tesekkurler

    • Seçilen değer (il) için, selectboxda selected değeri vermelisin.

  12. Gerçekten çok güzel bir paylaşım. Teşekkür ederim.

  13. Merhaba arkadaşlar. Yeni bir sosyal ağ projesi üstünde çalışıyorum. Proje bitdi bitecek ama, bu refresh problemini bir türlü çözemedim. Koddan falan pek anlamıyorum. Bcakir arkadaşımızın paylaştığı jquery refresh uygulamasını indirdim. Kullandığım site sistemi Drupal. Şimdi sorum bu ki, indirdiğim bu uygulamanı sitemin hangi klasörüne yüklemem lazım? Şimdiden teşekkürler.

  14. uygulamanız için tşk ederim ama söyle bir sorum var. Butona basılınca sayfayı yenilesin(php ile yapıyorum) butonun bir adı var. Yardımlarınız için şimdiden tşkler.

    • mouseclick olayı ile sayfa yenileme fonksiyonunu çağırırsan istediğin sayfa yenilemeyi elde etmiş olursun.

  15. Bu kodlarla bir web sitesi tasarlıyordum ve şu an itibari ile IE’de çalışıyor, google crhome ve firefox’ta çalışmıyor. Daha önce çalışıyordu. Ama şimdi çalışmıyor. Ana menüyü bir html içeriğinde çekmesi için ayarlamıştım. Büyük bir hayal kırıklığı ve sıkıntı içerisindeyim. Başka bilgisayarlarda da deneyeceğim, Win7 Home Pr. IE9 ve diğerlerini kullanıyorum. Kodlarınızın firefox ve crhome’da çalışıp çalışmadığını kontrol edebilirseniz size minnettar Kalacağım. Başka bilgisayarda da denedim yine olmuyor? Yardımlarınızı bekliyorum.

    • Sayfa yenileme kodu çalışıyor, herhangi bir sorun olmaması gerekli.

  16. allah razı olsun kardeş çok işime yaradı

  17. O ajaxtan baya çekmiş ve sonunda çözmüştüm sizde yararlanın diye yazıyorum. IE 9 da çalışmamasının nedeni cache problemi bunu aşağıdaki gibi cache : true ile çözebilirsiniz.

    $.ajax({
    type:’POST’,
    url:’veri.php’,
    cache:true,

  18. Her 10 Dakikada Bir Dizideki Farklı Sayfaları İframe içinde Açmak İstiyorum Bu Kod ile Yaklaştım Ama Tam Olmadı Yardımlarınızı Bekler İyi Çalışmalar Dilerim….

  19. Bende çalışıyor sorunsuz, teşekkürler.

  20. Paylaşımınızın çok çok faydasını gördüm teşekkür ederim

  21. Emeğinize sağlık hocam, çok iyi bir şey bu. Ama ben her 2 saniyede bir alanı yormak istemiyorum. Sadece database’den veri gelince alanı yenilesin istiyorum. Yapamadım bir türlü.

    • Bu konuyla alakalı olarak daha önce yazmış olduğum 2 adet long polling yazısı, istediğini yapmanda yardımcı olacaktır.

  22. Hocam yukarıda Koray hocamın dediği gibi veritabanına veri geldiğidne nasıl yenileme yaparız, direk her saniyede bir güncelleme 1000 kullanıcı aktif olduğunda sistemi aşırı derecede kasmaz mı? Bilgilendirmelerinizi bekliyorum.

    • Comet programlamanın Long Polling tekniğini kullanman lazım. Daha önce long polling konusunda 2 adet yazı yazmıştım. Fakat kullanıcın çok fazla arttığında bu da yeterli olmayacaktır. En iyi çözüm Node.js ve Socket.io kullanmak.

  23. Tam aradığım koddu, teşekkür ederim.

  24. Paylaşım tüm tarayıcılarda çalışıyor. Ve mütiş bir uygulama webde online olarak uyarı göndermek için tam aradığım kod blogu. Emeğinize sağlık.

  25. merhaba ben html tabanlı websitemde uygulamak istiyorum, tam olarak anlamadım bu kod php ile mi çalışıyor?

    • Güncellemeyi alacağın yer Php gibi bir server diliyse (örnekte öyle), Php çalıştıran sunucuya ihtiyacın var. JavaScript dilini Html içinde direk çalıştırabilirsin, ama server tabanlı diller (Php, Asp, .NET, …) için mecburen Php yorumlayan sunucun olması gerekli. Html içerisinde Php çalıştıramazsın zaten, Php yorumlayan Web Server olmadan (sayfa uzantısı Php olmalı Html değil).

  26. bu kodu blogspotda nasil kullaniriz lutfen yardim edin

  27. tesekkürler işe yaradı

  28. Alttaki örnek sorunsuz çalışıyor, ben denedim kullanacağım.

  29. uygulama güzel çalışıyor fakat
    “more” kontrolü ile kullanamıyorum.
    Örneğin;
    Gönderilerin ilk 20′sini sıralıyorum, en altta devamını gör butonu var.
    butona basınca diğer 20 de yükleniyor.

    Bu uygulamayı sisteme yerleştirdiğimde devamını gör’e bastığımda işlemiyor çünkü gönderiler daimi olarak yenilenmekte. Devamını gör’e bastığım anda da yenilendiği için otomatik olarak sadece ilk 20 yi gösteriyor.
    Bunu süre bazlı yaptığımda ise aynı problem mevcut. Atıyorum 5 saniye yaptım. üye, gönderilerin devamını gör butonunu ilk 5 saniye kullanabiliyor daha sonra tekrar ilk 20yi gösterdiği hale dönüşüyor. Bu problemi nasıl aşabilirim?

    • İkisini iç içe kullanmanız mümkün değil. Bunu değiştirmeniz ya da more ile daha fazla kayıt getiren uygulamayı değiştirmeniz gerekir. Bu uygulama bütün div içerisindeki kayıtları değiştirdiği için daha fazla göster ile yüklenmiş olan kayıtlar sıfırlanacaktır. Çözümü, son kayıt id değerini post edip yeni kayıt id varsa (id değeri daha büyük olan) prepend ile listenin başına eklemek olur. Bu yöntem listeyi silmez, yeni girilmiş kayıtları ekler.

  30. Bu örnekte bir url’ye bir dosya ismi değilde bir url yazarak veriyi alabilme vede gelen veriyi iframe içerisinde gösterebilme imkanı var mıdır? Ben normalde bir sayfaya iframe ile bir siteyi çekiyorum ama o sayfadaki bilgileri güncellemek için sayfayı yenilemem gerekiyor, bu örneği gördüğümde eğer dediğim gibi yapabiliyorsa çok iyi olur şimdiden teşekkür ederim.

    • Iframe içerisinde bir siteyi gösterebilirsin, aralıklarla da iframe’i güncelleyebilirsin (sitenin yeni içerik girdiğini kontrol ettirmeden ya da dolaylı kontrol ettirerek iframe içinde güncelleme yapman, sunucuna büyük yük getircektir). Bu konuya ek önemli mesele, farklı bir sitenin (faklı domaininde hizmet veren) veritabanından verileri almak gibi bir düşüncen varsa da, normal yollarla bu mümkün değildir, sitenin sahibinin araya bir web servis koyması gerekir.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery, Php
Kapat