Facebook
twitter
Google Plus
RSS
Ajax işlemlerinde en çok kullanılan metodlardan biri de sayfalar arası geçişleri ajax ile yapmaktır. Bu bize pek çok kolaylık sağlar. Her sayfanın kodunu baştan yazmak yerine, sadece ilgili yerlerin kodunu yazarız, ve küçük birimler halinde yükleriz.
Şimdi, böyle bir işlemi nasıl yapacağımızı en basit haliyle inceleyelim:
|
1 2 3 4 5 6 7 |
<div class="links"> <a href="anasayfa.html">Anasayfa</a> <a href="hakkinda.html">Hakkında</a> <a href="iletisim.html">İletişim</a> </div> <div id="sayfa_icerigi"></div> |
Linkler bölümünde yer alan bağlantılar, ajax isteğinin bağlantıları. Bu linklere tıklanınca ajax isteğini başlatacağız ve ajax ile gelen cevabı id=”sayfa_icerigi” divinin içine koyacağız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(document).ready(function() { //sayfa ilk yüklendiğinde anaysayfa.html dosyasını çağıralım. $.ajax({ type: "GET", url: "anasayfa.html", success: function (response) { $("#sayfa_icerigi").html(response); } }); //ilgili linklere tıklandığında bizim fonksiyonumuz çalışşsın. $(".links a").click(function(){ hedef_url = $(this).attr("href");//asıl hedef bu. hedefi öğreniyoruz. //hedefi ajax ile çağırıyoruz. $.ajax({ type: "GET", url: hedef_url, success: function (response) { $("#sayfa_icerigi").html(response); } }); return false; //ajax ile yükledikten sonra başka işlem yapmıyoruz. burası önemli. }) }) |
Burada yaptığımız iki temel işlem var:
1- Doküman ilk yüklendiğinde anasayfa.html dosyasını çağırıyoruz. Böylece giriş sayfasının boş kalmamasını sağlıyoruz.
2- İkinci aşamada yaptığımız ise, “links” sınıfına sahip div’in içerisindeki a etiketlerinin tıklanmasına dair fonksiyon yazıyoruz. Bu fonksiyonun da temel işlevi, linkin gideceği adresi alıp, onu ajax ile çağırmak.
