jQuery ile Sayfayı Yenilemeden Sayfa İçeriğini Güncelleme - Sinan Yorulmaz

Sinan Yorulmaz


Bir Yazılımcının Günlüğü

22 Ağustos 2016
jQuery ile Sayfayı Yenilemeden Sayfa İçeriğini Güncelleme

jQuery
22 Ağustos 2016 JavaScript 417 Okuma Yorum Yok

Bir çok sitede karşımıza çıkabilen, sayfanın yenilenmeden sayfa içeriğinin veya sayfanın bir kısmındaki içeriğin güncellenmesi, aslında jQuery ile yapılabilen basit bir olay. Bu yazımda sizlere bu işlemi nasıl yapabileceğinizden bahsedeceğim. Kabaca yapacağımız işlemler sonucu sistem, sitemizde belirtmiş olduğumuz rel=”load” etiketine sahip linkleri bulup, tıklandığı anda href=”sayfa-linki.html” etiketi içerisindeki adrese gidip içeriğini aldıktan sonra, mevcut sayfadaki içerikle değiştiriyor ve bu işlemler esnasında sayfa yenilenmiyor. Şimdi bu kabaca tanımı biraz açarak uygulayalım fakat öncesinde merak edilen bir soruya cevap verelim.

Bu işlemin SEO’ya etkisi var mıdır?

Haliyle insanın aklına SEO açısından olumsuz bir etkisinin olabileceği gelebilir fakat durum öyle değil. Sayfa içeriğini yenilemeden güncelleyen bir çok uygulamada şuna benzer bir yöntem kullanılmaktadır: “<a href=”yukleme(‘yeni-sayfa’)”>Yeni sayfa</a>“. Fakat bizim kullanacağımız yöntemde “<a rel=”yukleme” href=”yeni-sayfa”>Yeni sayfa</a>” şeklinde bir link yapısı olacak. Buda arama motoru botlarının sitemizi ziyaret ettiğinde ilk örnekteki link yapısıyla karşılaşınca www.siteadi.com/yukleme(‘yeni-sayfa’) gibi bir adres algılayacağından sonuca ulaşamayacaktır ve tabi ki bunun SEO açısından olumsuz etkileri olacaktır. Ama bizim uygulayacağımız yöntemle URL’i doğru bir şekilde okuyabileceği için herhangi bir olumsuz etki söz konusu değildir. Şimdi gelelim bu işi uygulamaya.

Öncelikle çalışma dosyamıza jQuery kütüphanesini dahil ediyoruz.

Sonrasında “sayfa1.html“, “sayfa2.html“, sayfa3.html” gibi sayfalar oluşturuyoruz ve her sayfanın içeriğine de farklı şeyler yazıyoruz. (Örneğin <p> etiketi içerisinde bir cümle olabilir.) Bir tane de “index.html” oluşturuyoruz ve bu ana sayfamız oluyor. (Yalnız oluşturduğumuz tüm sayfaların içerisindeki TAG’ların aynı olmasına dikkat edin.)

Oluşturduğumuz tüm sayfaların uygun gördüğümüz bir yerine şu linkleri ekliyoruz:

Şimdi ise olayın jQuery kısmına geliyoruz ve bu kodlarımızı da <head> ile </head> etiketleri arasına ekliyoruz.

Bu kodu da açıklamak gerekirse; mevcut sayfadaki tüm linkleri tarıyor ve rel=”yukleme” etiketine sahip olan linkleri algılıyor. Algıladığı bu linklerden birine tıklandığı anda, href etiketinin içerisindeki adresi arka plan da ziyaret ediyor ve o sayfadaki <body> ile </body> etiketleri içerisindeki her şeyi alıp, mevcut sayfanın içeriği ile değiştiriyor. (Burada kodu özelleştirerek, <body> etiketine göre değilde sadece bir DIV’e göre de işlem yaptırabiliriz, bu sizim kullanım amacına kalmış.)

Yorum Yap

Copyright © 2015. Tüm haklarım anneme aittir. Babama yakalanmadığınız sürece sorun yok!