1. Olay Gelişiyor ve JavaScript Fonksiyonu Çağrılıyor
JavaScript uygulamaları "olay" (event) sonuçlarına göre çalışırlar. HTML DOM (Document Object Model) elementlerinde çeşitli olay türleri bulunmaktadır. İlk adım olarak bir form elemanındaki onkeyup olayına göre çağrılan JavaScript fonksiyonunu tanımlayalım.

<input type="text"
size="20"
id="userid"
name="id"
onkeyup="validate();">
Bu form elemanı her tuşa basılışta (onKeyup) validate() fonksiyonunu çağırmaktadır.

2. XMLHttpRequest Nesnesi Oluşturuluyor ve Ayarlanıyor
var req;

function validate() {
var idField = document.getElementById("userid");
var url = "validate?id=" + escape(idField.value);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
validate() Fonksiyonu çağrıldığında bir XMLHttpRequest nesnesi oluşturur ve oluşturulan nesne özelliklerini kullanır. Burada IE tarayıcılarının standart dışı nesne oluşturma sınıfları (class) kullanmasından dolayı; tarayıcının hangi Ajax nesnesini desteklediği (Yani bir anlamda IE olup olmadığı) test edilir. Aynı test rutinleri içinde nesne oluşturma işlemi de yapılır. Oluşturulan nesne adı "req" olarak belirlenmiştir (you can named object as your head ). open fonksiyonu)ile nesne ile sunucu taraflı (server side) uygulama arasında köprü kurulur. Bu fonksiyon için üç parametre tanımlanmaktadır bunlar: Değişken iletim metodu (GET veya POST), uygulama adresi ve iletişimin asenkron olup olmayacağına ilişkin parametredir (true veya false). Son parametre genelde "true" olarak kullanılır, bu durumda asenkron çalışma olacak, yani sunucu taraflı uygulama sonucu hazırlayıp yollarken ve hatta tüm veri transferi gerçekleşinceye kadar geçen sürede tarayıcı diğer fonksiyonlarını ve süreçlerini takip edebilecek. Bu durum onreadystatechange ile kontrol edilen bir süreçtir. onreadystatechange bir tür olay gibi de algılanabilir.

onreadystatechange tüm transferler tamamlandığında callback fonksiyonunu çağırır. Bu fonksiyon ile işlenebilecek verilere sahip nesne ele alınacaktır.

3. XMLHttpRequest Nesnesi İstekte Bulunuyor
req.send(null); komutu ile, sunucu taraflı uygulamaya istekte bulunulmuş olur. Eğer GET metodu kullanılıyorsa bu komutta parametre olarak "null" veya boşluk kullanılabilir. Aşağıdaki örnekte "null" yerine (id) parametresi URL ile birlikte gönderilmektedir. Burada kullanılan escape fonksiyonu parametre olarak gönderilecek verinin "URL encode" edilmesini sağlar.

Burada unutulmaması gereken GET metodu kullanıldığında tarayıcı veya bası sunucu taraflı uygulamaların kısıtlı bilgi gönderip almasıdır. Bazı durumlarda POST yönteminin tercih edilmesi gerekir. Bu durumlarda Content-Type tanımı yapılması gereklidir. Bu "header" bilgisi XMLHttpRequest nesnesi yardımıyla aşağıdaki şekilde iletilebilir:

req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("id=" + escape(idTextField.value));
4. İstek Sunucuda Değerlendiriliyor.
2. Maddede url değişkeni ile belirtilen sunucu taraflı uygulama XMLHttpRequest nesnesinin isteği olan işlemleri yapar. Bu işlemler gereksinim duyulan süreçleri tamamlar ve geriye bir değer döndürür. Bu adımlarda beklenilen text alana girilen değerin geçerli olup olmadığının testidir. Bu nedenle var url = "validate?id=" + escape(idField.value); ile sunucudan bilgi istenmektedir.

Burada sunucunun standartlara uygun bir XML çıktı oluşturması beklenir. Bu çıktı isteğe karşı yanıt olarak iletilecektir.

Bazı uygulamalarda XML dönüş yerine text veya HTML dönüş beklenebilir. Bu durumda aşağıda açıklandığı gibi dönüş bilgisini isteyen fonksiyon da değişecektir.

5. XMLHttpRequest Nesnesi callback() Fonksiyonunu Çağırıyor ve Veriyi İşliyor
XMLHttpRequest nesnesi; readyState özelliği değiştiği anda callback() fonksiyonunu çağırmak üzere düzenlenmiştir. callback()çağrıldığında readyState 4 değerini alırsa, XMLHttpRequest işlemini tamamladı demektir. Eğer status değeri de 200 ise bağlantı işlemin başarıyla yapıldığı anlamı çıkar.

function callback() {
if (req.readyState == 4) {
if (req.status == 200) {
// update the HTML DOM based on whether or not message is valid
}
}
}
Tarayıcılar web sayfalarını DOM nesneleri ile görüntüler. JavaScript bu DOM elementlerine erişme ve kontrol etme yeteneğine sahiptir.

Başarılı bir transfer sonucu Javascript elde edilen bu verileri req.responseXML ile kullanabilecek duruma gelir.

Şimdi yanıt olarak alınan aşağıdaki XML çıktısını JavaScript ile nasıl değerlendireceğimize bakalım.

<message>
valid
</message>
Örnekteki XML içerik message elementi içinde yer alan valid veya invalid değerini taşımaktadır.

function parseMessage() {
var message = req.responseXML.getElementsByTagName("message")[0];
setMessage(message.childNodes[0].nodeValue);
}
parseMessages() fonksiyonu XML veriyi işleyecek bir fonksiyon olarak yazılmıştır. setMessage() fonksiyonu ise tanımlanmış olan HTML DOM elementini güncelleyecek (içeriğini veya değerini değiştirecek) olan fonksiyondur.

(Greg Murray, June 9, 2005 "http://java.sun.com/developer/technicalArticles/J2EE/AJAX/")

Kaynak people.sabanciuniv.edu/alper/calismalar_ajax.html