AJAX Nedir?

AJAX (Asynchronous Javascript and XML - Eşzamansız JavaScript ve XML), Web 2.0 teknolojilerinin yardımıyla oluşan ve gittikçe ünü artan bir kullanım tekniğidir (dil değil!). AJAX sayesinde sayfanın belirlenmiş herhangi bir alanında, sayfayı yenilemeden XMLHttpRequest nesnesinin yardımıyla bilgi alışverişi yapan web uygulamaları geliştirilebilir, JavaScript yardımıyla daha başarılı ve görsel sayfalar ortaya çıkarabilirsiniz...

Neden AJAX Kullanmalıyım?
Çünkü;
- Microsoft, Google gibi internet devlerinin bu sistemi kullanmak için çabalara girişmesi; diğer şirketlere de örnek olarak AJAX kullanabilen eleman arayışına girmeleri,
- Kullanıcıların AJAX ile yapılmış sayfalarda daha hızlı hareket edebilmeleri ve sayfaların görsel olarak doyurucu olmaları,
- Sunucuyu yenilenmesi gereksiz olan bilgileri kullanıcıya gönderme gibi bir yükün altından kaldırma ve buna bağlı olarak bant genişliği kullanımının düşmesi
...gibi bir çok sebep yüzünden

AJAX Tekniğini Kullanan Bazı Ünlü Sistemler
- GMail, Google Reader ve Google Maps gibi bazı yeni Google servisleri; (Google yeni hizmetlerinde AJAX ile şov yapmaya başladı )
- E-Messenger, MSN Web Messenger gibi tarayıcı tabanlı MSN istemcileri;
- ZK Demo gibi bazı kişisel, kurumsal sayfalar...
AJAX'ı kullanmaktadırlar.

İnternette Birçok AJAX Kütüphanesi Görüyorum. Bu Yazı da Onları Anlatan Bir Yazı mı? / Bu Kütüphaneleri Kullanmalı mıyım?
Hayır, bu yazı XMLHttpRequest nesnesinin kullanımıyla ilgili bir JavaScript tekniğini anlatan bir yazıdır, internetteki AJAX kütüphanelerinin kullanımı geçmez.

Ancak, bu gördüğünüz kütüphaneleri şu an kullanmanızı pek önermem... (özellikle PHP kütüphanesi şeklinde olanları) Zira şu an kararlı bir AJAX kütüphanesinin bulunmayışı, herhangi bir sorun çıktığında yeterli sorun çözüm bilgisinin internette olmaması yüzünden kütüphane dosyalarıyla boğuşmak gibi birçok sebep, kullanıcıları bu teknikten soğutmaktadır. (Tabii kütüphane kullanmayın demiyorum, sadece tekniğin özünü görmenin daha yararlı olacağından söz ediyorum ) Hatta belki bu yazının sonunda kendinizi daha da geliştirerek kendi kütüphanelerinizi de yazabilirsiniz

AJAX kullanan bir Türk programcının hazırladığı örnek kütüphane: S@rdalya ([Sar]mal [D]inamik [Al]t [Ya]pısı)

Yukarıda Bant Genişliği Kullanımından Bahsetmiştiniz... Cidden Büyük Oranda Rahatlık Sağlıyor mu?
Hayır, çok büyük bir rahatlama sağlamıyor. -sayfanın boyutu çok büyükse ve yollanan bilgilere gelen cevaplar küçük bir alanda değişiklik yapıyorsa, daha fazla tasarruf yapılabilir tabii- Hatta, bu alandaki Flash tabanlı bilgi alışverişi yapan rakip uygulamalara karşı da yavaş kalıyor. Bunun yanında da yazılacak kodun JavaScript tabanlı ve fazla olması, küçük sayfaların yüklenme hızını da etkileyebiliyor... Bütün bunlara karşılık yine de AJAX seçebileceğiniz en iyi tekniklerden birisidir, orası ayrı

AJAX Nasıl Kullanılır?

Gelelim işin teknik kısmına... Yazımın başında da belirttiğim gibi, bir HTML sayfası içinde AJAX kullanmak istiyorsanız, öncelikle JavaScript içinden XMLHttpRequest nesnesini çağırmanız gerekir. Bu nesnenin çağırım yolları farklı tarayıcılarda farklı şekillerde oldukları için öncelikle tarayıcının türü tespit edilmeli ve ona göre işlem yapılamalıdır...(Hemen korkmayın; Internet Explorer, Mozilla Firefox, Opera gibi ünlü tarayıcıların çoğu destekliyor bu nesneyi ) Bu işlem de belirli bir düzeyde JavaScript bilgisi gerektirmekle birlikte, yazımızın sonraki kısımlarındaki bazı kodları ve işlemleri anlayabilmeniz için temel düzeyde JavaScript bilmeniz önerilir. Bilmiyorsanız da sorun değil, deneye deneye AJAX'ı kullanabilirsiniz

O hâlde biz bu nesneyi nasıl çağıracağız? Şöyle ki;

Yukarıdaki kod en basit şekilde farklı tarayıcılarda XMLHttpRequest nesnesini çağırır ve eğer desteklenmiyorsa kullanıcıyı uyarır. -Daha farklı çağırım yöntemleri de kullanılabilir. Örneğin; navigator.appName ile tarayıcı ismi kontrol edilebilir- Eğer sizde bir uyarı penceresi çıkmadıysa, tarayıcınız bu nesneyi destekliyor demektir

Nesneyi oluşturdum. Sonra ne yapacağım?
Nesne oluştuktan sonra AJAX ile bilgi alışverişinin yapılacağı sayfaya gönderim yapacağız. Bu gönderimi yapmak için nesnemizde varolan fonksiyon open() fonksiyonudur:

Fonksiyon: open()
Kullanılışı: (* = Belirtilmesi zorunlu)
open([*Yollama methodu, [*Yollanacak URL, [*Eş Zamanlılığı [Kullanıcı adı, [Parola]]]]]

[*Yollama methodu]
Yapılacak bilgi alışverişi için kullanılacak methodu belirtir. Form içinde GET kullanıyorsanız / sadece dosya içeriğini alacaksanız GET kullanmanız gerekir. Eğer formlarınızda POST yöntemini uyguluyorsanız, POST yazmanız gerekir ki; POST ile gönderim daha ileri bir AJAX kullanım seviyesi olduğu için sonraki yazımızda işleyeceğiz onu... (Kısa bir not: AJAX, internet üzerinden dosya yollamayı desteklemez!)

[*Yollanacak URL]
Bilgi alışverişi yapılacak olan URL adresidir. Query String kullanarak yapılan göndermeleri de destekler. (dosya.php?x=y şeklindeki gibi)

[*Eş Zamanlılığı]
Alışverişin eş zaman içinde yapılıp yapılmadığının yazıldığı parametredir. Mantıksal değer alır (true / false).

[Kullanıcı Adı, [Parola]]
Eğer HTTP doğrulaması gerekiyorsa, kullanıcı adı ve parola bilgileri bu iki parametreye yazılabilir.
------------------

Bu bilgilere göre örnek bir kullanım şekli:

open() fonksiyonu ile birlikte POST kullanılarak gönderilecek diğer değerlerin yazılabileceği send() fonksiyonu da kullanılmaktadır. Ayrıntılı kullanımı sonraki yazımızda anlatılacak olan bu fonksiyon, GET methodu kullanılsa bile yazılmak zorundadır. GET ile yapılan işlemlerde boş parametre geçilebilir. (ya da xxxx olarak belirlenebilir)

Peki bu kurduğumuz bağlantı üzerinden nasıl işlem yapabiliriz?
open() ile kurulan bağlantıdaki HTTP isteği durumunun değişmesi hâlinde, yapılacak olan fonksiyonu çağıran bir XMLHttpRequest nesnesi onreadystatechange'i kullanarak bu tür işlemler yapabiliriz. Bu özelliğe değer olarak bir fonksiyon belirlenir.

- readyState ve status özellikleri
onreadystatechange'e belirtilen fonksiyon içerisindeki olayların düzgün bir şekilde kontrol edilmesi için kullanılabilecek olan bu iki özelliği uygulamalarınızda görsel amaçlı olarak da kullanabilirsiniz.

readyState değeri; AJAX ile yapılan HTTP isteğinin 5 ayrı durumuna 0 - 4 arası bir değer atar. Bu değerlerin anlamları;

readyState değerini kullanılarak GMail'deki gibi yükleniyor kutucukları oluşturabilir, olası bir hata durumunda uygulamanın nasıl davranacağını belirleyebilirsiniz.

status ise; HTTP isteği sunucunda gelen durum kodunu belirtir. Aldığı farklı değerlere göre uygulama daha da geliştirilebilir. Eğer tüm işlemler doğru bir şekilde tamamlanmışsa, alacağı değer 200 (OK)'dir. (status özelliğinin dışında, statusText de kullanılabilir. Aradaki tek fark, gelen değerin kod değil de kod açıklaması şeklinde -örn. OK- gelmesidir)

- responseText ve responseXML
AJAX ile yapılan bilgi alışverişine karşılık dönen sonuçlardır. responseText, string değer döndürürken; responseXML ise XML ağacını DOM kullanarak yazdırmayı sağlar.

İşbu tüm özelliklere göre, AJAX bağlantısı açıldıktan sonra gelen veriler şu örnekteki gibi alınabilir ve kullanılabilir:

sayfa.htm:

isim.php:

Yukarıdaki kodları sayfa.htm ve isim.php adlarıyla PHP destekli bir sunucuya yollayın ve sayfa.htm'ye girin ve ilgili alanı doldurun. Çizginin altında girdiğiniz bilgiye göre isim.php karşılığını göreceksiniz AJAX'ın doğru çalıştığını kontrol etmek isterseniz sayfa.php?ad=deneme olarak da girmeyi deneyebilirsiniz...

__________________

tesekkurler dostum...