JavaScript Sayfa Yenileme Nasıl Yapılır ? – Yazılım Dersleri

tarafından
JavaScript Sayfa Yenileme Nasıl Yapılır ? – Yazılım Dersleri

Bu yazılım dersleri rehberimizde JavaScript’te nasıl sayfa yenilenir onu göstereceğiz. Bir yazılım, script geliştiriyorsanız bazı zamanlarda bir olay, bir fonksiyon içinde sayfa yenilemeyi tetiklemeniz gerekebiliyor. Bunun için bu konuda oldukça bol senaryolar ve yöntemler olacak.

JavaScript Sayfa Yenileme

Ayrıntılı anlatımların ve bu yazılım derslerinin gelmeye devam etmesini istiyorsanız ilginiz önemli. Bizleri sosyal medya adreslerinden takip edebilir. Web sitemizin de bildirimlerini açabilirsiniz.

Öncelikle bu rehber tamamen yazılıma dair hiçbir şey bilmeyen kişiler için değil ve gelecek rehberler de böyle olmayacak. Belirli ve düşük seviyede, yeni yeni öğrenmeye çalışanlar için yararlı olacaktır.

JavaScript Sayfayı Yenileme Kodu

Aşağıdaki kod bloğundaki her satır aynı işlevi görüyor. Herhangi birisini kullanabilirsiniz fakat aşağıdaki kodla yenileme yaptığınızda statik dosyaları (resim, stil dosyası vb.) gibi şeyleri tarayıcı önbelleğinden aktarır. Örneğin dinamik olarak değişen resim kullanıyorsanız sayfayı yenilediğinizde o resim değişmeyebilir. Çoğu kişi bu ayrımı atlar ve projelerinde sırf bu ayrım için sorun yaşayabilirler. Cache kullanmadan yenileme için bir aşağıdaki kod bloğunu inceleyin.

Ayrıca bu kod bloğundaki herhangi satırdaki kod varsa POST işlemini iptal ederek yeniler. Yani örneğin form gönderme işlemi var ise bir kez form gönderildikten sonra aşağıdaki kodlarla yenileme yapıldığında tekrar bu formu göndermez ve sayfayı yeniler.

Aşağıdaki kod bloğundaki her satır aynı işlevi görüyor. Herhangi birisini kullanabilirsiniz fakat aşağıdaki kodla yenileme yaptığınızda statik dosyaları (resim, stil dosyası vb.) gibi şeyleri tarayıcı önbelleğinden silerek tekrar sunucudan indirir ve gösterir. Örneğin dinamik olarak değişen resim kullanıyorsanız sayfayı yenilediğinizde o resim değişir.

Ayrıca bu kod bloğundaki herhangi satırdaki kod varsa POST işlemini tekrar göndererek yeniler. Yani örneğin form gönderme işlemi var ise bir kez form gönderildikten sonra aşağıdaki kodlarla yenileme yapıldığında tekrar bu formu gönderir ve sayfayı yeniler.

 

 

Aşağıdaki bu kod ise sayfayı tarayıcı geçmişini silerek yeniler. Tarayıcı geçmişi derken önceki eriştiğiniz sayfalar. Bu şekilde yenileme yaptığınızda artık tarayıcınızdaki geri butonu sizi önceki sayfaya götürmeyecektir.

Aşağıda ise örnek kullanım senaryoları için kodlar yer alacak. Bunları baz alarak projelerinize ekleyebilirsiniz.

Sayfayı Her 10 Saniyede Bir Yenileme Kodu

Sayfayı her 10 saniyede bir Cache kullanarak ve POST var ise iptal ederek yeniler.

Sayfayı Her 10 Saniyede Bir Yenileme Kodu – Cache Siler ve POST Eder

Sayfayı her 10 saniyede bir Cache silerek ve POST var ise tekrar ederek yeniler.

Sayfayı 10 Saniye Sonra Yenileme Kodu

Sayfayı 10 saniye sonra Cache kullanarak ve POST var ise iptal ederek yeniler.

Sayfayı 10 Saniye Sonra Yenileme Kodu – Cache Siler ve POST Eder

Sayfayı 10 saniye sonra Cache silerek ve POST var ise tekrar ederek yeniler.

Butona Tıkladığında Sayfayı Yenileme Kodu

Butona tıkladığınızda sayfayı yeniler. Pure Javascript yöntemi.

Butona Tıkladığında Sayfayı Yenileme Kodu – JQuery

Butona tıkladığınızda sayfayı yeniler. JQuery yöntemi. Tabii ki JQuery kütüphanesini <head> tagına dahil etmeniz gerekir.

Evet bu yazılım dersimizde JavaScript kullanarak sayfa yenileme işlemini gösterdik. HTML’de meta tagları ve PHP’de header() fonksiyonu ile de sayfa yenileme işlemi yapılıyor. Eğer onlara da ilginiz var ise dokümantasyonlarını inceleyebilirsiniz.

Daha fazla yazılım derslerini istiyorsanız destekleyebilirsiniz. Sitemizin bildirimlerini açarak yeni yazılardan haberdar olabilir. Sosyal medyada paylaşarak da ilginizi gösterebilirsiniz.

Görüşmek üzere.