AJAX (Asynchronous JavaScript And XML)

AJAX ile web sayfası yüklendikten sonra, sunucu üzerine veri göndermek ve sunucudan veri almak mümkündür. Böylece, sayfa yenilenmeden, sayfanın belirli bir bölümünün, sunucu tarafından alınan verilerle yenilenebilir.

Sunucu ile iletişimi sağlamak için XMLHttpRequest nesnesi kullanılır. Tüm modern tarayıcılar XMLHttpRequest nesnesini destekler.

XMLHttpRequest nesnesi metotları

open(method, url, async) isteği oluşturur. method GET ya da POST olabilir. url iletişimin kurulacağı adrestir. async ise, iletişimin senkron ya da asenkron bir şekilde yapılacağını belirler. Asenkron işlemde, sunucu cevabı beklenmeksizin sayfa çalışmaya devam eder.

send() oluşturulan istediği sunucuya gönderir. method GET olarak seçildiği zaman kullanılır.

send(str) oluşturulan istediği sunucuya gönderir. method POST olarak seçildiği zaman kullanılır.

XMLHttpRequest nesnesi özellikleri

readyState XMLHttpRequest nesnesinin mevcut durumunu gösterir. 4 değeri, sunucu ile iletişimin kurulduğunu ve cevabın hazır olduğunu gösterir.

onreadystatechange readyState özelliğinde bir değişim olduğu zaman çağrılır. Örneğin, sunucuya yapılan istediğin tamamlanması durumunda tetiklenir.

status sunucudan alınan cevabın durumunu gösterir. 200 OK, 404 Not Found, 500 Internal Server Error vb. Ayrıca statusText özelliği de mevcuttur.

responseText sunucudan alınan cevaptır. Eğer sunucudan XML sonuç alınıyorsa, responseXML özelliği de kullanılabilir.

Örnek AJAX Kullanımı

<script type='text/javascript'>

    var request = new XMLHttpRequest();

    request.onreadystatechange = function () {
        // Sunucu cevabı hazır ve sunucudan bir hata alınmadıysa (200: OK)
        if (this.readyState == 4 && this.status == 200) {
            // Sunucudan dönen cevap
            var txt = this.responseText;
        }
    };

    // İstek oluşturuluyor.
    request.open("GET", "demo.aspx", true);

    // İstek gönderiliyor.
    request.send();

</script>

JQuery ile AJAX Kullanımı

JQuery kütüphanesi ile, tüm tarayıcılar ile uyumlu ve daha basit bir şekilde AJAX kullanımı mümkündür.

$.ajax() AJAX istediği oluşturur.

Örneğin, ASP.NET demo.aspx sayfası arkasında yer alan aşağıdaki metodun sonucunu sayfada göstermek istediğimiz zaman:

// JavaScript tarafından bu metoda erişebilmek için eklenmesi ve metodun statik olarak tanımlanması gerekiyor.
[WebMethod]
public static string Method1(string name, int number)
{
    return name + number;
}

JQuery ile yazılmış ilgili AJAX isteği:

<script type='text/javascript'>

    $.ajax({
        type: "POST", // GET ya da POST olabilir
        url: "demo.aspx/Method1", // Url
        data: '{"name":"selami","number":"3"}', // Sunucuya gönderilen veri
        contentType: "application/json",
        success: function (msg) {
            alert(msg.d);
        },
        error: function (err) { alert(err.responseText); }
    });

</script>

Data fazla detay için http://api.jquery.com/jquery.ajax/

JQuery, açık kaynak kodlu ve oldukça popüler JavaScript kütüphanelerinden birisidir. JQuery ile daha az zahmetle, anlaşılır, daha az hataya sahip ve tarayıcıdan bağımsız JavaScript kodları yazmak mümkündür.

En sık kullandığım JQuery ifadeleri aşağıda listelendi.

Örnek HTML içerik. Bu içerik üzerinde aşağıdaki JQuery metotları uygulanacak.

 <div id="container">
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 2</a>
    <input type="text" />
</div>

JQuery metotları

Sayfaya JQuery kütüphanesi eklemek için (CDN üzerinden)

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

$(document).ready(function () { // Sayfa yüklenmesi bittikten sonra çalışacak JavaScript kodu });

$("#container"); // id değeri 'container' olan elaman seçiliyor.
$(".link"); // class değeri 'link' olan elamanlar seçiliyor.
$("input"); // Tüm input elamanları seçiliyor.
$("input[type='text']"); // Attribute kullanılarak elamanlar seçiliyor.
$("#container, .link, input"); // Birden fazla elaman aynı anda seçiliyor.
$("div > .link"); // Parent -> child ilişkisi (örnekte, div içerisinde .link sınıfına sahip tüm elemanlar seçiliyor)
$("div .link"); // Parent -> child ilişkisi (sadece bir alt seviye değil, tüm seviyelerdeki elemanlar seçiliyor)
$(".link").hide(); // Elemanları gizle
$(".link").show(); // Gizlenmiş elemanları görünür yap
$(".link").text(); // Eleman metnini al
$(".link").text("Link new text"); // Eleman metnini al
$("#container").html(); // Eleman HTML içeriğini al
$("#container").html("<a href='#'>new HTML content</a>"); // Eleman HTML içeriğini değiştir.
$("input").val(); // Eleman değeri alınıyor. (bu örnekte input metni)
$("input").val("newValue"); // Eleman değeri değiştiriliyor.
$(".link").attr("href"); // Elemanın özelliğini al (href özelliği alınıyor)
$(".link").attr("href", "http://www..."); // Elemanın bir özelliğini değiştir. Yoksa özelliği ekler.
$(".link").removeAttr("href"); // Elemanın özelliğini siliniyor.
$(".link").addClass("className"); // CSS sınıfı ekler
$(".link").removeClass("className"); // CSS sınıfını kaldırır
$(".link").hasClass("className"); // Eleman belirtilen CSS sınıfına sahip mi?
$("#container").css("propertyName"); // CSS style özelliğini geri döndürür. (örneğin, color)
$("#container").css("propertyName", "value"); // CSS style özelliği değiştiriliyor.
$("#container").width(); // Elemanın genişliği
$("#container").height(); // Elemanın yüksekliği,
$("#container").empty(); // Elemanın tüm içeriğini temizler
$(".link").remove(); // Elemanı siler
$(".link").wrap("<div class='new'></div>"); // Seçilen elemanların her birini, parametre olarak verilen elemanın içine koyar. (örnekte, .link sınıfına sahip her bir elemanı div içerisine alıyor.)
$(".link").wrapAll("<div class='new'></div>"); // Seçilen elemanların tümünü, parametre olarak verilen elemanın içine koyar. (örnekte, .link sınıfına sahip tüm elemanları div içerisine alıyor.)
$(".link").unwrap(); // Seçilen elemanların parent elemanını siler. (örnekte, .link sınıfının yer aldığı div siliniyor.)
$("#container").append("<div class='new'></div>"); // Seçilen elemanların içerisine yeni bir eleman ekler.
$("#container").after("<div class='new'></div>"); // Seçilen elemanın peşine yeni bir eleman ekler.
$("#container").before("<div class='new'></div>"); // Seçilen elemanın öncesine yeni bir eleman ekler.
$(".link").parent(); // Seçilen elemanın içerisinde bulunduğu elaman alınıyor. (örnekte, .link sınıfına ait elamanların yer aldığı div)
$("#container").children(); // Seçilen elemanın tüm alt elemanları alınıyor. Sadece birinci seviyedeki elemanlar alınır.
$("#container").next(); // Sonraki eleman alınır.
$("#container").prev(); // Önceki eleman alınır.
$("#container").find("a"); // Seçilen elemanın, verilen kritere alt elemanları alınıyor. Tüm seviyedeki elemanlar alınır. (örnekte, div içerisindeki tüm a elamanları alınıyor)
$(".link").first(); // Seçilen elemanların ilki alınıyor.
$(".link").eq(1); // .link sınıfına ait ikinci eleman seçiliyor. (zero based index)
$(".link").slice(1, 2); // Seçilen elemanlardan sadece verilen aralıktakiler alınıyor. (örnekte, 2. ve 3. eleman alınıyor. üst sınır verilmezse, 2. elemandan itibaren tüm elemanlar alınır.)
$(".link").add("#container"); // Seçilen elemanlara yeni elemanlar ekler.
$(".link").filter(function () { return $(this).css("display") == "none"; }); // Filtre şartına uyan elemanlar seçiliyor. (örnek, .link sınıfına sahip ve gizlenmemiş tüm elemanlar seçiliyor)
$(".link").each(function (index) { return $(this).hide(); }); // Seçilen elemanların her biri için, verilen fonksiyondaki işlemi uygular.
$(".link").click(function () { alert(1); }); // Seçilen elemana tıklanıyor
$(".link").mouseover(function () { $(this).text("mouse over"); }); // Fare ile elemanın üzerine gelindi
$(".link").mouseout(function () { $(this).text("mouse out"); }); // Fare elemanın üzerinden ayrıldı
$(".link").first().focus(); // Seçilen elemana odaklan
$(window).resize(function () { alert(1); }); // Ekran büyültüldü ya da küçültüldü