jQuery ile sayfayı yenilemeden içeriği değiştirmek

Merhaba arkadaşlar,

Bu yazımda sizlere twitter, youtube ve benim sitemin de kısmen kullanmış olduğu sayfa yeniden yüklenmeden, sayfa değişmeden içeriği mevcut sayfada gösterme konusunu inceleyeceğiz.

Öncelikle sistemin işleyiş mantığını açıklayayım;

Sistem, sitenizde belirtmiş olduğunuz herhangi bir taglı linklerin tıklanma fonksiyonunu yakalayıp, tıklandığı adresin içeriğini aldıktan sonra mevcut sayfaya yüklüyor.

Peki bunun seo’ya (Arama motoru optimizasyonu) etkisi nedir ?

Genel kanı seo’ya kötü yönde olduğu fakat bizim kullanacağımız yöntem tamamen sağlıklı ve seo’yu herhangi bir şekilde bozmayıp, arama motorlarında alt sıralamalara düşmenize neden olmaz.

Neden, nasıl seo’yu kötü yönde etkilemiyor ?

Google ve bildiğiniz gibi diğer arama motorları web sitenizdeki href="" tagına bakıp, href tagının içindeki url’leri dolaşıp, indexlemektedir.Faklı metodlarda href tagı yerine javascript yazılmakta, bizim kullandığımızda ise link mevcut şekilde kalacak.

Seo’yu kötü yönde etkileyen bir örnek vermek gerekirse; <a href="load('yeni-sayfa')">Yeni sayfa</a>

Bizim kullanacağımız yöntem için örek vermek gerekirse; <a rel="load" href="yeni-sayfa">Yeni sayfa</a>

Arasındaki fark nedir ?

İlkinde arama motoruna ait örümcek gelip linki yüklemeyi denediğinde www.siteadi.com/load('yeni-sayfa') şeklinde bir sayfayı açmaya çalışacağı için başarılı olamayacaktır, ikinci uyguladığımız yöntemde ise örümcek linke doğru bir şekilde erişeceği için herhangi bir problem olmayacaktır.

Durumu yeteri kadar özetlediysek işleme başlayalım;

Öncelikle ilk iş, sayfamıza jQuery kütüphanesini dahil etmek.

jQuery’nin son versiyonunu sayfamızdaki script kodunun bulunduğu kısıma; <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript">

kodunu eklemek.

Böylelikle jQuery komutlarını web sayfamızda kolaylıkla çalıştırabileceğiz.

Şimdi yapmamız gereken işlem ise, tıklandığında sayfanın değişmeden, mevcut sayfada açılmasını istediğimiz linklerini belirleyip, ilgili linklere tag eklemek. Örneğin sitemizdeki hiç bir linke tıklandığında sayfanın yenilenmesini istemiyorsak link verdiğimiz kısıma; rel="load" eklememiz yeterli, dilerseniz load yerine farklı şeyler yazabilirsiniz bunu yapmamızdaki amaç sayfada mevcut sayfada açma işlemini yapacak linkleri tespit etmek. jQuery ile sadece bu linklerin tıklanma fonksiyonunu dinleyeceğiz.

İlgili taglamayı yaptığınızda elinizde aşağıdaki gibi linkler olması gerekmekte;

	<li><a rel="load" href="index.php">Ana Sayfa</a></li>
	<li><a rel="load" href="Hakkimda/">Hakkımda</a></li>
	<li><a rel="load" href="php/">Php</a></li>
	<li><a rel="load" href="linux/">Linux</a></li>
	<li><a rel="load" href="guvenlik/">Güvenlik</a></li>
	<li><a rel="load" href="iletisim.php">iletişim</a></li>
</ul>

Şimdi ise gelelim olayın jQuery yani javascript kısmına;

$(function(){
$("a[rel='load']").click(function(e){
		pageurl = $(this).attr('href');
		$.ajax({url:pageurl,success: function(data){
			$('body').html(data).find("body").html();
		}});		
		if(pageurl!=window.location){
			window.history.pushState({path:pageurl},'',pageurl);	
		}
		return false;  
	});
});
$(window).bind('popstate', function() {
	$.ajax({url:location.pathname,success: function(data){
		$('body').html(data).find("body").html();
	}});
});

Burada yaptığımız işlemi kısaca özetlememiz gerekirse sayfadaki tüm linkleri tarayıp, rel kısmında load yazanları bulduktan sonra bunlardan herhangi biri tıklandığında href kısmının içerisinde yer alan kısmı jQuery ile çağırıp, yeni sayfada body’nin içini alıp, mevcut sayfanın body’si ile değiştirmek. Aynı zamanda pushState ile sayfanın adres çubuğundaki konumunu değiştirip, geçmiş kısmına da önceki sayfayı atıyoruz.

Daha kısa şekilde özetlersek yeni sayfa’da body’nin içinde yer alan her şeyi kopyalayıp, mevcut sayfanın body kısmına yapıştırıyoruz.

Bu kod çok genel ve hemen hemen tüm sitelerde sorunsuzca çalışır, peki bunu kendinize nasıl uyarlayacaksınız ?

$("a[rel='load']").click(function(e){

kısmı hangi linklere tıklandığında çalışacağını belirttiğimiz kısım. Burada load yerine hangi rel tagını kullandıysanız onu yazabilirsiniz.

pageurl = $(this).attr('href');

Kısmı yüklenecek sayfanın adresini aldığımız kısım. Siz oraya sadece yeni-sayfa yazıp, aslında depo klasörünün altındaki yeni-sayfaların açılmasını istiyorsanız;

pageurl = 'depo/' + $(this).attr('href');

şeklinde veya istediğiniz şekilde düzenleyebilirsiniz.

$('body').html(data).find("body").html();

kısmı ise en önemli kısım.

Burada yaptığımız olay, mevcut sayfanın body tagının içinde kalan tüm sayfaları, yeni sayfanın body tagındakiler ile değiştirmek. Bu şekilde yaptığınızda mevcut sayfanızda ve yeni açılacak olan sayfada body tagı olduğu sürece sorun çıkartmayacaktır ama hedefi daha da küçültebilirsiniz bu tamamen sitenizi nasıl kullanmak istediğinize bağlı olarak değişir.

Tüm bu işlemleri yaptıktan sonra sitenizi çalıştırdığınızda içerisinde load geçen rel taglı tüm linkleriniz yeni sayfaya yönlenmeden açılacaktır, adres çubuğundaki adres de otomatik olarak değişecktir.

Takıldığınız veya sormak istediğiniz kısım olursa yorumlardan sorabilirsiniz.