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/