Jquery Ve Ajax İle Sayfa Yüklemek

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.

HTML Şablonu

İlk önce HTML dokümanımızın şablonunu tanımlayalım.

Anasayfa
 Hakkında
 İletişim

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.

Jquery ile Ajax bölümü

Javascript kısmı ise şu şekilde olacak:

$(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.

Temel olarak yaptığımız işlem bu kadar.