AJAX’lanmış bir uygulama

Posted by Erhan Abay in AJAX, JavascriptMay 16th, 2007 | View Comments

Geçen ay yaptığımız laf salatasının ardından icraat dönemine geçmiş bulunuyoruz, hepimize hayırlı uğurlu olsun. Bu ay şöyle basitinden bir uygulama ile öğrendiklerimizi pekiştirelim.

Adım 1 – Sunucuya isteğimizi gönderme
Sunucuya isteÄŸimizi gönderebilmek için istemci tarafında -tarayıcıda- çalışan bir dile ihtiyacımız olduÄŸundan bahsetmiÅŸtik. Bunu gerçekleÅŸtirebilmek için XMLHTTP olarak bilinen ve Internet Explorer’da ActiveX nesnesi olarak bulunan bir sınıf kullanacağız. ‘Peki ya diÄŸer tarayıcılar?’ sorusunu merak edenlere de hemen cevap verelim: aynı sınıf XMLHttpRequest adıyla Mozilla, Safari ve Opera’da da kullanılabilmekte. Ve kodumuzun ilk ayrıntılarına geçiyoruz.

if (window.XMLHttpRequest) { // Mozilla, Safari, …
http_istegi = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_istegi = new ActiveXObject(“Microsoft.XMLHTTP”)
}

Bazı Mozilla tarayıcıları sunucudan dönen bilgi XML üstbilgisini içermiyorsa hata verir. EÄŸer açık kaynaÄŸa saygılı gençlersek biz de Mozilla’ya saygı duyanlardanız demektir ve o yüzden de bu ayrıntıya dikkatlice yaklaÅŸaraktan gerekli düzenlemeyi hemen yapmalıyız. Nesneyi kendi deÄŸiÅŸkenimize kopyaladıktan sonra sayfa üstbilgisini XML olarak deÄŸiÅŸtirelim.

http_istegi = new XMLHttpRequest();
http_istegi.overrideMimeType(‘text/xml’);

Bir sonraki aşama HTTP isteğini oluşturan nesnemize sunucudan gelen cevabı işleyecek JS fonksiyonunu söylemek. Bunu da kullanacağımız fonksiyonun adını nesnenin onreadystatechange özelliğine atayarak yapacağız.

http_istegi.onreadystatechange = fonksiyonunAdi;

Dikkat etmeniz gereken nokta fonksiyon adından sonra parantez kullanılmadığı ve hiçbir değiştirgen gönderilmediği. Bu söz diziminin yanı sıra işinizi biraz daha kolaylaştırabilecek olanı da şöyle kullanabilirsiniz:

http_istegi.onreadystatechange = function(){
// iÅŸi yapacak kodlar
};

Sunucu cevabının nasıl işleneceğini belirledikten sonra şimdi ise sıra gerçekten talepte bulunmada. HTTP isteği sınıfımızın open() ve send() metodları bu işimizi görecek.

http_istegi.open(‘GET’, ‘http://www.ornek.org/bir.dosya’, true);
http_istegi.send(null);

Gördüğünüz gibi open() metodundaki ilk deÄŸiÅŸtirgen GET. Sunucunuz tarafından desteklenen POST, HEAD, TRACE gibi diÄŸer tüm metodlar da kullanılabilir. Ä°kinci deÄŸiÅŸtirgen ise isteÄŸimizi gönderdiÄŸimiz sayfanın adresi. Güvenlik nedeniyle sadece kendi alan adınızdan sayfaları çağırabilirsiniz. Unutmamanız gereken nokta ise adresi yazarken iletiÅŸim kuralını yazmak (http://…). Üçüncü deÄŸiÅŸtirgen isteÄŸimizin eÅŸzamanlı olup olmadığını belirliyor. True olarak atanan deÄŸer AJAX kısaltmasının ‘A’sını oluÅŸturuyor. EÅŸzamanlı olmayan bu taleple sunucudan yanıt beklenirken de JS fonksiyonu çalışmaya devam edecek.

send() metodu sunucuya bilgileri göndermemizi sağlıyor. Eğer gönderim türü GET yerine POST olarak belirlenirse o zaman gönderilen veri sorgu dizisi şeklinde yazılmalı.

anahtar=deger&digeranahtar=digerdeger

Ayrıca sayfa üstbilgisi de

http_istegi.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

atanmalı. Aksi takdirde gönderdiğinizi düşündüğünüz veriler aslında gönderilmemiş olacak.

Adım 2 – Sunucudan gelen yanıtı işleme
İsteğimizi sunucuya sağ salim gönderdikten sonra sıra gelen veriyi düzgün bir biçimde ele almak. onreadystatechange özelliğine atadığımız fonksiyon içeriğini kabaca şöyle yazabiliriz:

if (http_istegi.readyState == 4) {
// yanıt alındı, herşey yolunda
} else {
// henüz hazır değil
}

Öncelikle isteğimizin durumunu gözden geçirelim. Eğer durum değeri 4 ise bu sunucudan yanıt dönüşünün tamamlandığı anlamına geldiğinden işimize devam edebiliriz demektir. Diğer durum değerleri de aşağıdaki gibi:

• 0 (baÅŸlatılmadı)
• 1 (yükleniyor)
• 2 (yüklendi)
• 3 (etkileÅŸimli)
• 4 (tamamlandı)

Sıradaki kontrol ise HTTP sunucu yanıtının durum kodu. SaÄŸlıklı bir yanıtta –ki bu bir internet sayfasını da görüntülediÄŸinizde gönderilen- kod 200′dür.

if (http_istegi.status == 200) {
// mükemmel!
} else {
// istekle ilgili bir sorun var,
// örneğin yanıt 404 (Sayfa bulunamadı)
// ya da 500 (Sunucu hatası) kodlarına sahip olabilir
}

İsteği gönderdik, yanıtı aldık ve her şey yolundaysa veri elimize ulaştı. Şimdi elimizdeki veriye erişim için elimizde 2 seçenek var.

• http_istegi.responseText, sunucu yanıtını metin dizisi olarak döndürür.
• http_istegi.responseXML, yanıtı XML biçiminde döndürerek DOM fonksiyonları ile iÅŸlenebilmesine olanak saÄŸlar.

Adım 3 – Örnek uygulama
Şu ana kadarki tüm kodları bir araya getirerek örneğimizi oluşturalım. Aşağıdaki kodlar test.html adlı sayfanın içeriğini ekrana getirecek.

Örnekte ziyaretçi ‘Ä°stek yap’ baÄŸlantısına tıklayarak test.html deÄŸiÅŸtirgenine sahip istekYap() fonksiyonunu tetikler. Ardından istek alertContents() fonksiyonuna gönderilir. Bu fonksiyon da yanıtı kontrol eder ve sorunsuz bir yanıtta test.html içeriÄŸini alert() fonksiyonuna aktarır. Ve böylece iÅŸlem tamamlanmış içerik ekranda görüntülenmiÅŸ olur.

Not: Örneği buradan kontrol edebilirsiniz.

Bu yazı Haziran 2006 tarihinde PC Tech dergisinde yayınlanmıştır.