AJAX Nedir?
(Asynchronous Javascript and XML)
Sunucuda çalışan bir kodun çıktılarının sayfayı yenilemeden istemciye ulaştırılmasıdır. AJAX aslında yeni bir olay değil sadece var olan bir kaç teknolojinin bir araya gelmesi ile oluşturulmuş bir yöntemdir...
AJAX herhangi bir firmanın ya da grubun geliştirdiği bir teknoloji değildir. AJAX bir geliştirme yöntemidir. Ajax isim olarak “Asynchronus Javascript and XML” kelimelerinin kısaltılmasıdır ve bu yöntemi kullanan topluluklar tarafından verilmiş isimdir...
Gerçekte bu yöntem tarayıcıların asenkron sunucu kodu çalıştırmasına verilen isimdir.
Yapılan işin göbeğinde XMLHttpRequest isimli bir nesne olduğundan ve bu işlemlerde Javascript ile yapıldığından ismi bu şekilde kalmıştır..
Dolayısıyla AJAX dediğimizde anlamamız gereken bir teknoloji değil, anlamamız gereken XML ve Javascript gibi bir kaç teknoloji kullanılarak web uygulaması geliştirme yaklaşımı olmasıdır...
AJAX tipi geliştirme, Microsoft’un internet explorer için bir kaç yıl önce geliştirmiş olduğu bir ActiveX bileşeni kullanılarak yapılmakta. Bu bileşenin adı XMLHttpRequest. XmlHttpRequest, ilk olarak IE nin 5.0 versiyonunda implemente edilmiştir. Bu teknik ilk defa Microsoft tarafından oluşturulmuştur. Bu tekniğin faydası kısa sürede görülünce Opera, Mozilla, Firefox, Netscape ve Safari gibi diğer web tarayıcıları da bu bileşeni implemente ettiler.
XmLHttpRequest bileşeni popüler olarak kullanılan hemen hemen bütün tarayıcılarda bulunmaktadır...
XMLHttpRequest Bileşeni
XMLHttpRequest web tarayıcısı üzerinde çalışan bir bileşendir. Bu bileşen asenkron bir şekilde bir web sayfasına istekte (request) bulunabilir ve yine asenkron bir şekilde isteğe karşı gelen cevabı kendisini çağıran yere iletebilir. Bütün bu işlemleri siz farkına varmadan arka planda (background) yaptığı için web uygulamasına sanki bir masaüstü uygulamasıymış hissini verebilirsiniz.
XMLHttpRequest Bileşeni nasıl kullanılır?
XMLHttpRequest istemci tarafından oluşturulduğu için tarayıcıdan tarayıcıya farklı isimlerde kullanılabilir. IE tarayıcılarında aşağıdaki Javascript kodu ile bir XMLHttpRequest nesnesi oluşturalibilir
Kod:
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
Eğer istemci tarayıcısında Msxml2 bileşeni kurulmuşsa bu yeni versiyon kullanılarak aşağıdaki gibi de oluşturulabilir.
Kod:
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
Bazı tarayıcılarda ise ancak aşağıdaki gibi bir nesne oluşturmak mümkün olabilmektedir.
Kod:
var xmlhttp = new XMLHttpRequest();
Bütün bu kombinasyonlardan dolayı Ajax yaklaşımını uygulayan web sitelerinde bir XMLHttpRequest nesnesini oluşturmak genellikle aşağıdaki kod bloğu ile yapılmaktadır..
Aşağıdaki JavaScript kod bloğunda yapılan iş XMLHttpRequest nesnesinin farklı tarayıcılar kullanıldığında oluşturulmasını garanti etmektedir... (Google da bu yöntemi kullanmaktadır).
Kod:
function XMLHTTP_Olustur()
{
var retval=null;
try
{
retval=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
retval=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
retval=null;
}
}
if(!retval && typeof XMLHttpRequest != "undefined")
{
retval=new XMLHttpRequest();
}
return retval;
}
Yukarıdaki fonksiyon kullanılarak XMLHttpRequest nesnesi oluşturulduktan sonra yapılması gereken iş XMLHttpRequest nesnesinin open isimli metodunu kullanarak bir web sayfasına POST ya da GET yöntemi ile istekte bulunmak. XMLHttpRequest bileşeninin open metodunun prototipi şöyledir;
open ("POST | GET", "URL", asynch, "kullanıcıadı", "şifre");
1. Parametre : Web sayfasına yapılacak isteğin hangi yöntemle yapılacağını belirtir...
2. Parametre : İstek yapılacak web sayfasının Adresi. Eğer GET metodu kullanılıyorsa gönderilen değerler Adrese birleştirilerek belirtilmelidir...
3. Parametre : Yapılacak İsteğin asenkron mu yoksa senkronmu yapılacağını belirtir. Genel kullanımı asenkron olduğundan genellikle true değeri verilmelidir. Eğer false değeri verilirse işlem bitene kadar tarayıcı diğer kullanıcı isteklerine cevap veremeyecektir. true yapılırsa istek ayrı bir iş parçacığı olarak ele alınacaktır.
4. ve 5. Parametreler : İsteğe bağlı parametrelerdir. Eğer istek yapılan web sayfası kullanıcı adı ve şifre istiyorsa bu şekilde gönderilebilir...
open metodunun kullanımı
Kod:
xmlhttp_nesnesi.open("GET", "sayfa.php?parametre=", true);
open metodunun kullanımından sonra isteğin sunucuya gönderilmesi için send isimli metod kullanılmalıdır.
send metodunun kullanımı
send komutu ile isteği sunucuya gönderdikten sonra geriye sunucudan cevabın gelip gelmediğini kontrol etmek ve eğer cevap başarılı bir şekilde geldi ise sonucu almak kalmaktadır.
Bunun için XMLHttpRequest bileşeninin onreadystatechange isimli bir olay işleyicisi kullanılmaktadır.
Bu işleyici XMLHttpRequest nesnesinin her bir durum değişimi esnasında tetiklenen bir olayı yakalar...
XMLHttpRequest nesnesinin belli bir anda 5 durumda olabilir.
Bu durumlar;
0 uninitalized (henüz open metodu kullanılmadı)
1 loading (sunucuya istek gönderildi, yükleniyor)
2 loaded (sunucuya istek gönderildi.)
3 interactive (sunucudan cevap geldi ama başka bir veri daha bekleniyor)
4 complete (cevap tamamlandı ve geri geldi)
Bütün bu durumlara XMLHttpRequest bileşeninin readyState isimli özelliği ile erişebilmek mümkündür. Dolayısıyla bir isteğin başarılı bir şekilde sonuçlandığını anlamak için onreadystatechange olay işleyici ile belirtilen fonksiyon içerisinde readyState değerinin 4 ya da complete olup olmadığına bakmak gerekir. Eğer bu değer 4 ise sonucu yine aynı nesnenin responseText ya da responseXml özelliği ile alabiliriz.
Eğer response XML formatında geliyorsa (mesela bir SOAP mesajı) responseXml i kullanarak direk DOM aracılığıyla sorgulamalar yapabiliriz. Ancak daha çok responseText özelliği kullanılmaktadır.
ÖRNEK 1
Aşağıdaki Linkte Ajax kullanılarak yapılmış bir örnek bulunmaktadır:
Girdiğiniz plaka numarasına göre ili veriyor..
Örneği İndir
Örneği Hazırlayan: Sebahattin Arslan
ÖRNEK 2
Sayfayı Yenilemeden İllere Ait İlçeleri Veritabanından Getiren Uygulama
Örneği İndir
kaynak : pehepe.org |