developerWorks: Ajax Üzerine Ayrıntılı Bir İnceleme, Bölüm 1

Ajax Üzerine Ayrıntılı Bir İnceleme, Bölüm 1:

Ajax’a Giriş

Web sitesi oluşturma konusunda verimli bir yaklaşım olan Ajax’ı ve nasıl çalıştığını anlamak

Düzey: Giriş

Brett McLaughlin (brett@oreilly.com), Yazar ve Editör, O'Reilly ve Ortakları

06 Aralık 2005

HTML, JavaScript™ teknolojisi, DHTML ve DOM’dan oluşan Ajax, eski ve hantal Web arabirimlerini etkileşimli Ajax uygulamalarına dönüştürmenizi sağlayan önemli bir yaklaşımdır. Ajax uzmanı olan yazar, bu teknolojilerin birlikte çalışarak Web geliştirmesinde çok verimli sonuçlar elde edilmesinin kolay bir gerçekliğe nasıl dönüştürüldüğünü genel bilgilerden başlayıp daha ayrıntılı bilgelere geçerek göstermektedir. Ayrıca, XMLHttpRequest nesnesi gibi Ajax’ın temel kavramlarına da ışık tutmaktadır.

Beş yıl önce, XML bilginiz yoksa, kimsenin konuşmadığı çirkin ördek yavrusu gibi görülürdünüz. On sekiz ay önce, Ruby gündeme geldi ve Ruby konusunda bilgisi olmayan programcıların, iş arkadaşlarının ayaküstü sohbetlerine katılması bile zordu. Bugün, en son teknoloji furyasına kapılmak istiyorsanız, işe Ajax ile başlamanız gerekiyor.

Bununla birlikte, Ajax yalnızca gelip geçici bir akım değildir; web sitesi geliştirmek konusunda güçlü bir yaklaşımdır ve yeni bir dili öğrenmek kadar zor değildir.

Ajax’ı derinlemesine incelemeye başlamadan önce, Ajax’ın neler yaptığını anlamak için birkaç dakikamızı ayıralım. Bugün bir uygulama yazarken, iki temel seçim olanağınız vardır:

• Masaüstü uygulamaları
• Web uygulamaları

Her iki tip uygulama da bilinen uygulamalar; masaüstü uygulamaları genellikle bir CD’de gelir (ya da bazen bir Web sitesinden yüklenir) ve bilgisayarınıza tam olarak kurulur. Güncellemeleri yüklemek için Internet’i kullanabilirler, ancak bu uygulamaları çalıştıran kod masaüstünüzde yer alır. Web uygulamalarıysa, sizin de bildiğiniz gibi, başka bir yerdeki bir Web sunucusu üzerinde çalışır ve uygulamaya Web tarayıcınızla erişirsiniz.

Aslında, bu uygulamaların kodlarının nerede çalıştığından daha önemli olan, uygulamaların nasıl işlediği ve bunlarla nasıl etkileşim kurduğunuzdur. Masaüstü uygulamaları genellikle oldukça hızlıdır (çünkü bilgisayarınızda çalışırlar; Internet bağlantısı beklemezsiniz), büyük kullanıcı arabirimleri (genellikle işletim sisteminizle etkileşim halinde olurlar) içerirler ve inanılmaz derecede dinamiktirler. Tıklatma, işaretleme, yazma, menüleri ve alt menüleri çıkarma ve gezinme yoluyla neredeyse hiç beklemeden çalışabilirsiniz.

Diğer yandan, Web uygulamaları genellikle saniyesi saniyesine günceldir ve asla masaüstünüze alamayacağınız hizmetler sağlarlar (Amazon.com ve eBay’i düşünün). Ancak, Web’in gücünün yanında beklemek de vardır; sunucunun yanıt vermesini, ekranın yenilenmesini, isteğin geri gelmesini ve yeni sayfa yaratmasını beklersiniz.

Tabii bu anlatım biraz fazla basitleştirme oldu ancak ana fikri almış olduğunuzu düşünüyorum. Sizin de tahmin edebileceğiniz gibi, Ajax bir masaüstü uygulamasının işlevselliği ve etkileşimi ile her zaman güncellenen bir Web uygulaması arasındaki mesafeyi kapatmaya çalışır. Bir masaüstü uygulamasında bulabileceğinize benzer dinamik kullanıcı arabirimleri ve hoş denetimler kullanabilirsiniz, ama bunlar size Web uygulamasında sunulur.

Bu durumda daha ne bekliyorsunuz? Ajax’a göz atmaya başlayın; eski ve hantal Web arabirimlerinizi hızlı yanıt veren Ajax uygulamalarına dönüştürün.

Eski teknoloji, yeni numaralar

Ajax birçok teknolojiyi içerir, temel olanları geçerek bazı farklı teknolojileri daha ayrıntılı olarak incelemeniz gerekir (bu nedenle, bu dizideki ilk birkaç yazıda bu teknolojilerden her birini ayıracağım). Bu teknolojilerden birçoğu hakkında zaten yeterli bilginiz olduğunu sanıyorum (daha da güzeli, bu ayrı teknolojilerin birçoğunu öğrenmek kolaydır); en azından işimiz Java ya da Ruby gibi tüm bir programlama dilini öğrenmek kadar zor olmayacak.

Aşağıda Ajax uygulamalarında bulunan temel teknolojiler verilmiştir:

• HTML, Web formları oluşturmak ve uygulamanızın geri kalanında kullanılacak alanları belirlemek için kullanılır.
• JavaScript kodu, Ajax uygulamalarını çalıştıran esas koddur ve sunucu uygulamalarıyla iletişimi kolaylaştırır.
• DHTML ya da Dynamic HTML formlarınızı dinamik olarak güncellemenizi sağlar. div, span, ve diğer dinamik HTML öğelerini kullanarak HTML öğelerinizi biçimlendirirsiniz.
• DOM, Document Object Model (Belge Nesne Modeli), hem HTML yapısı, hem de (bazı durumalarda) sunucudan dönen XML yapısıyla çalışmak için kullanılır (JavaScript kodu aracılığıyla).

Şimdi bunları ayıralım ve her birinin neler yaptığına daha yakından bakalım. Bu teknolojilerden her birini daha sonraki yazılarımda derinlemesine ele alacağım; şu anda bu bileşenleri ve teknolojileri tanımaya odaklanalım. Bu kod hakkında ne kadar çok şey bilirseniz, bu teknolojilerle ilgili genel geçer bilgilerden her birini ustalıkla kullanmaya (ve Web uygulaması geliştirme yeteneklerinizi zenginleştirmeye) geçişiniz daha kolay olacaktır.

XMLHttpRequest nesnesi

Anlamak istediğiniz ilk nesne büyük olasılıkla sizin için en yeni olan XMLHttpRequest adlı nesnedir. Bu bir JavaScript nesnesidir ve Liste 1’de gösterildiği kadar basit bir şekilde yaratılabilir.

Liste 1. Yeni bir XMLHttpRequest nesnesi yaratma

<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>

Bir sonraki yazımda, bu nesneyi daha ayrıntılı ele alacağım, ama şimdilik bu nesnenin tüm sunucu iletişiminizi yürüten nesne olduğunu anlamanız önemli. Diğer konuya geçmeden önce, sunucuyla iletişim kuranın XMLHttpRequest nesnesi yoluyla JavaScript teknolojisi olduğunu düşünün. Bu normal uygulama akışı değildir ve Ajax’ın sihiri büyük ölçüde buradan gelir.

Normal bir Web uygulamasında, kullanıcılar form alanlarını doldurur ve bir Submit (Gönder) düğmesini tıklatır. Sonra, formun tamamı sunucuya gönderilir, sunucu bir komut dosyasını işlemeye geçer (genellikle PHP ya da Java ya da belki bir CGI işlemi ya da benzeri) ve komut dosyası tamamlandığında, sunucu geriye yepyeni bir sayfa gönderir. Bu sayfa, bazı verilerle doldurulmuş yeni bir form içeren HTML olabilir, bir onay olabilir ya da belki, özgün forma girilen verilere göre seçilen bazı seçenekleri içeren bir sayfa olabilir. Tabii ki, sunucudaki komut dosyası ya da program işlem yaparken ve yeni bir form döndürürken, kullanıcıların beklemesi gerekir. Bu sırada ekran boş kalır ve sunucudan veri geri geldikçe yeniden dolar. İşte düşük etkileşimin ortaya çıktığı yer burasıdır; kullanıcılar anında geribildirim almaz ve kesinlikle bir masaüstü uygulamasında çalışıyorlarmış gibi hissetmezler.

Ajax temelde JavaScript teknolojisini ve XMLHttpRequest nesnesini Web formunuz ile sunucu arasına koyar. Kullanıcı formları doldurduğunda, veriler doğrudan sunucuya değil birtakım JavaScript koduna gönderilir. Sunucunun yerine, JavaScript kodu form verilerini alır ve sunucuya bir istek gönderir. Bu sırada, kullanıcı ekranındaki form yanıp sönmez, ekrandan gitmez ya da ekranda donup kalmaz. Diğer bir deyişle, JavaScript kodu isteği arka planda gönderir; hatta kullanıcı istek yapıldığını bile fark etmez. Daha da güzeli, istek eşzamanlı olmadan gönderilir; yani, JavaScript kodunuz (ve kullanıcı) sunucunun yanıt vermesini beklemez. Bu nedenle, veri girmeyi, gezinmeyi ya da uygulamayı kullanmayı sürdürebilirler.

Sonra, sunucu, verileri bunlarla ne yapılacağına karar verecek olan JavaScript kodunuza geri gönderir (hala Web formunun yerine çalışır). JavaScript kodu form alanlarını hızlı bir şekilde güncelleyebilir, bu şekilde uygulamanızın hızlı olduğu izlenimini verir (kullanıcılar formları gönderilmeden ya da yenilenmeden yeni verileri alırlar). Hatta JavaScript kodu, kullanıcının müdahalesi olmadan, verileri alabilir, bazı hesaplamalar yapabilir ve başka bir istek gönderebilir! Bu, XMLHttpRequest nesnesinin gücüdür. Kullanıcı farkında bile olmadan bu nesne, istediği bir sunucuyla iletişim kurabilir. Sonuç, arkasında yatan Internet teknolojisinin gücüyle, bir masaüstü uygulaması gibi dinamik, hızlı yanıt veren, yüksek düzeyde etkileşimli bir deneyimdir.

JavaScript ekleme

XMLHttpRequest nesnesini nasıl kullanacağınızı öğrendikten sonra, JavaScript kodunuzun geri kalanı oldukça sıradan gelir. Aslında, JavaScript kodunu yalnızca birkaç temel görev için kullanırsınız:

• Form verilerini alma: JavaScript kodu HTML formunuzdan veri almayı ve bunları sunucuya göndermeyi kolaylaştırır.
• Formdaki değerleri değiştirme: Alan değerlerini belirlemek, görüntüleri hızlı bir şekilde değiştirmek gibi form güncelleme işlemlerini gerçekleştirmek de basittir.
• HTML ve XML ayrıştırma: JavaScript kodunu DOM’u işlemek (sonraki bölüme bakın) ve HTML formunuzun ve sunucunun döndürdüğü XML verilerinin yapısıyla çalışmak için kullanırsınız.

İlk iki madde için, Liste 2’de gösterildği gibi getElementById() yöntemini öğrenmek isteyebilirsiniz.

Liste 2. JavaScript koduyla alan değerlerini alma ve belirleme

// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;

// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

Burada çok dikkate değer birşey yok ve bu bizim için iyi. Sanırım bu konunun çok karmaşık bir tarafı olmadığını fark etmeye başladınız. XMLHttpRequest nesnesini iyice öğrendikten sonra, Ajax uygulamanızın geri kalanının büyük bir bölümü, Liste 2’de gösterildiği gibi biraz akıllı HTML ile karışık basit JavaScript kodu olacaktır. Sonra, zaman zaman biraz DOM işi olur. Bu yüzden şimdi DOM’a geçelim.

DOM ile bitirme

Son olarak aynı derecede önemli DOM’u, yani Belge Nesne Modelini (Document Object Model) ele alacağız. Bazılarınız için DOM konusunun açılması biraz ürkütücü olabilir, çünkü DOM, HTML tasarımcıları tarafından çok sık kullanılmaz ve JavaScript kodlayıcıları için, özellikle de gerçekten bir takım üst uç programlama işleriyle uğraşmıyorlarsa biraz değişiktir. DOM’un en fazla kullanıldığı alan yoğun emek gerektiren Java ve C/C++ programlarıdır; işte tam da bu nedenle DOM’u öğrenmenin zor olduğuna inanılır.

Neyse ki, DOM’u JavaScript teknolojisinde kullanmak kolaydır. Bu noktada, normal olarak size DOM’un nasıl kullanılacağını gösterirdim ya da en azından birkaç kod örneği verirdim, ancak bu bile yanlış yönlendirici olabilirdi. Görüyorsunuz, DOM konusunu fazla kurcalamadan Ajax konusunda yeterince bilgi sahibi olabilirsiniz, size de bu yolu göstereceğim. DOM konusunu daha sonraki bir yazımda ele alacağım, şimdilik, yalnızca DOM’un işin içinde olduğunu bilmeniz yeterli. XML’i JavaScript kodunuz ve sunucu arasında geri gönderip yeniden aldığınızda ve HTML kodunu gerçekten değiştirdiğinizde, DOM konusuna yeniden gireceksiniz. Şimdilik, DOM olmadan devam ederek Ajax konusunda yararlı şeyler öğrenmek kolay olacağından DOM’u dışarıda bırakalım.

İstek nesnesi alma

Konuyla ilgili genel bir bakış sahibi olduğunuz için şimdi bazı özel konulara geçebilirsiniz. Ajax uygulamalarının merkezinde XMLHttpRequest olduğundan ve bu kavram büyük olasılıkla birçoğunuz için yeni olduğundan, konuya buradan başlayacağım. Liste 1’de gördüğünüz gibi, bu nesneyi yaratmak ve kullanmak oldukça kolay, değil mi? Bir dakika bekleyin.

Birkaç sene öncesinde yaşanan can sıkıcı tarayıcı savaşlarını ve tarayıcıların hiçbirinin aynı şekilde çalışmadığını hatırlıyor musunuz? İster inanın, ister inanmayın ama bu savaşlar daha küçük ölçekli de olsa hala sürüyor. Ve sürpriz: XMLHttpRequest bu kavganın kurbanlarından biridir. Bu nedenle, bir XMLHttpRequest nesnesini çalıştırmak için birkaç farklı şey yapmanız gerekiyor. Size bu işlemleri adım adım göstereceğim.

Microsoft tarayıcılarıyla çalışma

Microsoft'un tarayıcısı olan Internet Explorer, XML işlemlerinde MSXML ayrıştırıcısını kullanır (MSXML hakkında daha fazla bilgi için Kaynaklar bölümüne bakabilirsiniz). Bu nedenle, Internet Explorer üzerinde çalışacak Ajax uygulamaları yazarken, nesneyi belirli bir yolu izleyerek yaratmanız gerekir.

Ancak, bu iş bu denli kolay değildir. Internet Explorer’da kurulu olan JavaScript teknolojisinin sürümüne bağlı olarak, MSXML’in etrafta dolaşan iki farklı sürümü vardır; bu nedenle, yazacağınız kodun her iki durum için de kullanışlı olması gerekir. Microsoft tarayıcılarında XMLHttpRequest nesnesi yaratırken kullanmanız gereken kodlar için Liste 3’e bakın.

Liste 3. Microsoft tarayıcılarında XMLHttpRequest nesnesi yaratma

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}

Tüm bunların henüz tam olarak birşey ifade etmemesi normaldir. Bu dizi bitmeden önce JavaScript programlama, hata yönetimi, koşullu derleme ve başka birçok konu hakkında derinlemesine bilgi sahibi olmuş olacaksınız. Şimdilik, aşağıdaki iki temel satırı öğrenmeniz yeterlidir:

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

ve

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.

Birkaç sözcükle toparlayacak olursak, bu kod nesneyi MSXML sürümlerinden birini kullanarak yaratmaya çalışır; nesneyi bu şekilde yaratamazsa, diğer sürümü kullanarak yaratır. Güzel değil mi? Bu yöntemlerden hiçbiri işe yaramazsa, xmlHttp değişkeni false (yanlış) olarak belirlenerek kodunuza birşeyin çalışmadığı bildirilir. Bu durumla karşılaşırsanız, büyük olasılıkla Microsoft dışı bir tarayıcınız vardır ve işi yapmak için farklı bir kod kullanmanız gerekir.

Mozilla ve Microsoft dışı tarayıcılarla çalışma

Tarayıcı olarak Internet Explorer’ı tercih etmiyorsanız ya da Microsoft dışı tarayıcılar için kod yazıyorsanız, farklı bir kod gereklidir. Aslında, Liste 1’de gördüğünüz gerçekten basit olan kod satırı işinizi görür:

var xmlHttp = new XMLHttpRequest object;.

Daha basit olan bu satır, Mozilla, Firefox, Safari, Opera ve bir şekilde Ajax’ı destekleyen Microsoft dışı birçok tarayıcıda bir XMLHttpRequest nesnesi yaratır.

Özet

İşin püf noktası tüm tarayıcıların desteklenmesidir. Kim yalnızca Internet Explorer’da ya da yalnızca Windows dışı tarayıcılarda çalışan bir uygulama yazmak ister ki? Daha da kötüsü, uygulamanızı iki kere yazmak ister misiniz? Tabii ki hayır! İşte bu nedenle, kodunuz hem Internet Explorer, hem de Microsoft dışı tarayıcıları destekler. Liste 4 bunu yapmak için gerekli olan kodu gösterir.

Liste 4. XMLHttpRequest nesnesini birden çok tarayıcı için yaratma

/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

Şimdilik, açıklamaları ve @cc_on; gibi garip etiketleri göz ardı edin; bunlar yalnızca XMLHttpRequest üzerine yazacağım bir sonraki makalemde derinlemesine inceleyebileceğiniz özel JavaScript derleyici komutlarıdır. Bu kodun temeli üç adıma ayrılır:

1. Yaratacağınız XMLHttpRequest nesnesine başvuruda bulunan bir xmlHttp değişkeni yaratın.

2. Nesneyi Microsoft tarayıcılarında yaratmayı deneyin:

o Nesneyi Msxml2.XMLHTTP nesnesini kullanarak yaratmayı deneyin.

o Bu sonuç vermezse, nesneyi Microsoft.XMLHTTP nesnesini kullanarak yaratmayı deneyin.

3. xmlHttp hala oluşturulmadıysa, nesneyi Microsoft dışı bir yöntemi kullanarak yaratın.

Bu işlemin sonunda, kullanıcılarınız hangi tarayıcıyı kullanıyor olursa olsun, xmlHttp, geçerli bir XMLHttpRequest nesnesine başvuruda bulunmalıdır.

Güvenlik hakkında

Peki ya güvenlik? Günümüzde tarayıcılar kullanıcılara güvenlik düzeylerini yükseltme, JavaScript teknolojisini devre dışı bırakma ve tarayıcılarındaki istedikleri seçenekleri devre dışı bırakma yeteneğini sunuyor. Bu gibi durumlarda, büyük olasılıkla kodunuz hiçbir koşulda çalışmayacaktır. Bu durumlar için, sorunları dikkatli bir şekilde ele almanız gerekir; bu en azından başlı başına bir yazı konusu ve daha sonra ele alacağım (uzun bir dizi olacak, değil mi? Ama endişelenmeyin, tamamlamadan önce bunların tümünü çok iyi öğreneceksiniz). Şimdilik, yazdığınız kod dayanıklı, ama mükemmel değil; bu kadarı bile Ajax’a başlangıç için büyük bir adım. Daha ince ayrıntılara tekrar döneceksiniz.

Ajax dünyasında İstek/Yanıt

Şimdi Ajax’ı kavradınız ve XMLHttpRequest nesnesi ve bu nesnenin nasıl yaratıldığı konusunda fikir sahibisiniz. Daha dikkatli okuduysanız, sunucudaki Web uygulamalarıyla iletişim kuranın, doğrudan ilgili uygulamaya sunulan HTML formu değil, JavaScript teknolojisi olduğunu fark etmişsinizdir.

Burada eksik kalan nokta nedir? XMLHttpRequest nesnesinin gerçekte nasıl kullanıldığı. Bu kod yazdığınız her Ajax uygulamasında bir şekilde kullanacağınız çok önemli bir kod olduğundan Ajax’ta basit bir istek/yanıt modelinin nasıl olduğuna hızlıca bakalım.

İstekte bulunma

Yeni XMLHttpRequest nesneniz hazır. Öncelikle, Web sayfanızın çağrı yapabileceği (bir kullanıcı metin yazarken ya da menüden bir seçeneği belirlerken olduğu gibi) bir JavaScript yöntemi gerekir. Sonra, hemen hemen tüm Ajax uygulamalarınızda aynı temel anahattı izleyeceksiniz:

1. Web formunda gerek duyduğunuz tüm verileri alın.

2. Bağlanılacak URL’yi oluşturun.

3. Sunucuyla bir bağlantı açın.

4. Sunucuya işi tamamlandığında çalıştırması için bir işlev belirleyin.

5. İsteği gönderin.

Liste 5 bu işlemleri bu sırayla gerçekleştiren bir Ajax yöntemi örneğini gösterir:

Liste 5. Ajax ile istekte bulunma

function callServer() {
  // Get the city and state from the web form
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // Only go on if there are values for both fields
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;

  // Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  // Open a connection to the server
  xmlHttp.open("GET", url, true);

  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage;

  // Send the request
  xmlHttp.send(null);
}

Bu örneğin büyük bir bölümü açıklama gerektirmeyecek şekilde açıktır. Kodun ilk bölümü temel JavaScript kodunu kullanarak birkaç form alanının değerlerini ele alıyor. Ardından, kod, bağlantı hedefi olarak bir PHP komut dosyası oluşturuyor. Basit GET parametreleri kullanılarak komut dosyasının URL’sinin nasıl belirlendiğine, ardından (formdaki) city (ilçe) ve state (il) değerlerinin bu isteğe nasıl eklendiğine dikkat edin.

Bir sonraki adımda, bir bağlantı açılır; burası, XMLHttpRequest nesnesinin yeniden devreye girdiği ilk yerdir. Bağlantı yöntemi (GET) ve bağlanılacak URL belirtilir. Son parametre, true olarak belirlendiğinde, eşzamanlı olmayan bir bağlantı (böylece bunu Ajax yaparak) ister. False değerini kullandıysanız, istek yapıldığında kod sunucuyu bekler ve yanıt alana kadar devam etmez. Bu değer true olarak belirlendiğinde, sunucu arka planda bu isteği işlerken kullanıcılarınız formu kullanmaya (hatta başka JavaScript yöntemlerini çağırmaya) devam edebilirler.

xmlHttp nesnesinin onreadystatechange özelliği (hatırlarsanız, sizin XMLHttpRequest nesnesi örneğinizdi) sunucuya, çalışmayı bitirdiğinde (5 dakika ya da 5 saat içinde olabilir) ne yapacağını bildirmenizi sağlar. Kod sunucuyu beklemeyeceğinden, sunucuya yanıt verebilmeniz için sunucunun ne yapacağını bilmesini sağlamanız gerekir. Bu durumda, sunucu isteğinizi işlemeyi bitirdiğinde updatePage() adlı belirli bir yöntem başlatılır.

Son olarak, bir null değeriyle send() komutu çağrılır. İstek URL’sine sunucuya gönderilecek verileri (ilçe ve il) eklediğiniz için, istekte herhangi birşey göndermeniz gerekmez. Bu işlem isteğinizi başlatır ve sunucu, yapmasını istediğiniz işlemi yapabilir.

Bu işlem bir fikir sahibi olmanızı sağlamadıysa, ne kadar düz ve basit olduğuna bakın! Ajax’ın eşzamanlı olmayan doğasının anlaşılmasından başka, göreceli olarak basit bir işlem. Karmaşık http istek/yanıt kodu yerine size daha yararlı uygulamalara ve arabirimlere yoğunlaşma özgürlüğü tanımasını takdir edeceksiniz.

Liste 5’teki kod göründüğü kadar kolaydır. Veriler basit metinlerdir ve istek URL’sinin parçası olarak eklenebilirler. Daha karmaşık olan POST yerine GET komutu isteği gönderir. Eklenecek XML ya da içerik başlıkları yok, isteğin gövdesinde gönderilecek veri yok; diğer bir deyişle, bu Ajax Ütopyası.

Korkmayın; bu dizinin ilerleyen bölümlerinde işler daha karmaşık bir hal alacak. POST isteklerini göndermeyi, istek üstbilgilerini ve içerik türlerini belirlemeyi, iletinizde XML’i kodlamayı, isteğinize güvenlik eklemeyi ve burada sıralaması zaman alacak daha birçok işlemi öğreneceksiniz. Şimdilik kafanızı zor işlemlerle yormayın; temel ilkeleri kavramaya çalışın, kısa bir süre sonra tam donanımlı bir Ajax araç deposu oluşturacaksınız.

İsteğin işlenmesi

Artık sunucunun yanıtıyla çalışmanız gerekiyor. Bu aşamada yalnızca iki noktayı bilmeniz gerekir:

• xmlHttp.readyState özelliği 4 oluncaya kadar hiçbir şey yapmayın.
• Sunucu yanıtını xmlHttp.responseText özelliğinin içine ekler.

Bu hazır durumlardan ilki bir sonraki yazının ana konusu; bir HTTP isteğinin aşamaları hakkında bilmek istediğinizden daha fazlasını öğreneceksiniz. Şimdilik, yalnızca belirli bir değeri (4) kontrol ederseniz, işler düzgün gider (ve bir sonraki yazının konusunu dört gözle beklersiniz). Sunucunun yanıtını almak için xmlHttp.responseText özelliğinin kullanılması olan ikinci nokta kolaydır. Liste 6’da, sunucunun Liste 5’te gönderilen değerlere dayanarak çağırabileceği bir yöntem örneklenir.

Liste 6. Sunucunun yanıtını işleme

function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

Yine, bu kod da çok zor ya da karmaşık değildir. Sunucunun doğru olan hazır durumla kendini çağırmasını bekler, ardından sunucunun döndürdüğü değeri (bu örnekte, kullanıcının girdiği ilçe ve ilin posta kodu) kullanarak başka bir form alanının değerini belirler. Sonuç olarak, zipCode alanında birden posta kodu görünür (ama kullanıcının hiçbir zaman bir düğmeyi tıklatması gerekmemiştir!). Bu daha önce söz ettiğim masaüstü uygulaması hissidir. Hızlı yanıt verebilme, dinamik görünüş ve daha başka özelliklerin tümünü Ajax kodu sağlıyor.

Gözlemci okuyucular zipCode alanının normal bir metin alanı olduğunu fark etmiş olabilirler. Sunucu posta kodunu döndürdüğünde ve updatePage() yöntemi bu alanın değerini ilçe/il posta koduyla belirlediğinde, kullanıcılar bu değeri başka bir değerle değiştirebilirler. Bunun iki nedeni vardır: Örnekteki öğelerin basit olmasını sağlamak ve size bazen kullanıcıların, bir sunucunun söylediğini değiştirebilmelerini istediğinizi göstermek. Her iki nedeni de dikkate alın; çünkü bunlar iyi bir kullanıcı arabirimi tasarımı için önemli özelliklerdir.

Web formunu ekleme

Peki, söz etmediğimiz neler kaldı? Aslında, çok fazla şey kalmadı. Kullanıcının bir forma girdiği bilgileri alan, sunucuya gönderen, iletişim kuracağı başka bir JavaScript yöntemi sağlayan ve bir yanıtı işleyen, hatta bu yanıt geri geldiğinde bir alanın değerini belirleyen bir JavaScript yöntemini öğrendiniz. Geriye kalan tek şey ilk JavaScript yöntemini çağırmak ve tüm süreci başlatmak. Tabii HTML formunuza bir düğme de ekleyebilirsiniz ama bu biraz demode olmaz mı, ne dersiniz? Liste 7’deki gibi JavaScript teknolojisinden yararlanın.

Liste 7. Bir Ajax işlemini başlatma

<form>
 <p>City: <input type="text" name="city" id="city" size="25" 
       onChange="callServer();" /></p>
 <p>State: <input type="text" name="state" id="state" size="25" 
       onChange="callServer();" /></p>

 <p>Zip Code: <input type="text" name="zipCode" id="zipCode" size="5" /></p>
</form>

Bunun da diğerleri gibi oldukça rutin bir kod olduğunu düşünüyorsanız, haklısınız, öyle! Bir kullanıcı ilçe ve il alanına yeni bir değer girdiğinde, callServer() yöntemi devreye girer ve Ajax eğlencesi başlar. Birşeyleri kavramaya başladınız mı? Güzel; amacımıza ulaştık!

Sonuç

Bu aşamada, büyük olasılıkla çıkıp ilk Ajax uygulamanızı yazmaya hazır olmayacaksınız; tabii en azından Kaynaklar bölümünde gerçekten inceleme yapmaya istekli değilseniz. Bununla birlikte, bu uygulamaların nasıl çalıştığıyla ve XMLHttpRequest nesnesiyle ilgili temel bilgileri kavramaya başlayabilirsiniz. Sonraki makalelerde, bu nesne, JavaScript ve sunucu arasındaki iletişimi yönetme, HTML formlarıyla çalışma, hatta DOM’la ilgili temel kavramlar konusunda derinlemesine bilgi sahibi olacaksınız.

Şimdilik, yine de, Ajax uygulamalarının ne kadar güçlü olabileceğini düşünmeye zaman ayırın. Size yalnızca bir düğmeyi tıklattığınızda değil, bir alana veri girdiğinizde, birleşik giriş kutusundan bir seçim yaptığınızda, hatta farenizi ekranda sürüklediğinizde de yanıt veren bir Web formu hayal edin. Eşzamanlı olmayan teriminin tam olarak ne anlama geldiğini düşünün; çalışan ve sunucunun, isteklerine yanıt vermesini beklemeyen bir JavaScript kodunu düşünün. Ne tür sorunlarla karşılaşabilirsiniz? Hangi alanlarda dikkatli olmanız gerekir? Ve formlarınızın tasarımı bu yeni programlama yaklaşımından nasıl etkilenecek?

Bu konular üzerinde kayda değer zaman harcarsanız, kesip yapıştırabileceğiniz ve gerçekte anlamadığınız bir uygulamaya geçireceğiniz koda sahip olmanın ötesinde avantajlar elde edebilirsiniz. Bir sonraki makalede, bu fikirleri uygulamaya geçireceksiniz ve size, uygulamaların burada anlatıldığı gibi çalışmasını sağlamanız için gereksinim duyacağınız kodla ilgili ayrıntıları vereceğim. O zamana kadar Ajax’ın olanaklarının tadını çıkarın.

Kaynaklar

Bilgi

• Adaptive Path kullanıcı arabirimi tasarımı alanındaki lider şirketlerden biridir; bu şirketin sayfalarını dikkatle okuyarak Ajax hakkında birçok bilgi edinebilirsiniz.
• Ajax teriminin nereden geldiğini merak ediyorsanız, kaynak olarak Jesse James Garrett ve Ajax hakkındaki mükemmel makalelerine (bunun gibi) bakın.
• XMLHttpRequest nesnesiyle ilgili bu harika makaleyi inceleyip, XMLHttpRequest nesnesi üzerinde yoğunlaşarak bu dizinin bir sonraki yazısı için hazırlık yapabilirsiniz.
• Internet Explorer kullanıyorsanız, Microsoft Developer Network's XML Developer Center olanağında işinize yarayacak birçok şey bulabilirsiniz.
• Ajax for Java developers: Build dynamic Java applications (developerWorks, Eylül 2005), sayfayı yeniden yükleme çıkmazını çözen dinamik Web uygulaması yaratma alanında çığır açan bir yaklaşımı anlatır.
• Ajax for Java developers: Java object serialization for Ajax (developerWorks, Ekim 2005) Ajax uygulamarında verilerin diziselleştirilmesine yönelik beş yöntemi açıklar.
• Using Ajax with PHP and Sajax (developerWorks, Ekim 2005) Ajax ve PHP’yi kullanarak içeriği dinamik olarak güncelleyen zengin Web uygulamaları geliştirmekle ilgillenenlere yönelik eğitici bir yayındır.
• Call SOAP Web services with AJAX, Part 1: Build the Web services client (developerWorks, Ekim 2005) Web tarayıcısı tabanlı bir SOAP Web hizmetleri istemcisinin Ajax tasarım modeli kullanılarak nasıl uygulanacağını anlatır.
• XML Matters: Beyond the DOM (developerWorks, Mayıs 2005) Document Object Model’in (Belge Nesne Modeli) dinamik Web uygulamaları oluşturma yöntemi olarak kullanılmasının ayrıntılı olarak açıklar.
• Build apps with Asynchronous JavaScript with XML, or AJAX (developerWorks, Kasım 2005) Ajax kullanılarak gerçek zamanlı kimlik doğrulama yapabilen Web uygulamalarının nasıl geliştirildiğini gösterir.
• Ajax for Java developers: Ajax with Direct Web Remoting (developerWorks, Kasım 2005) AJAX’ın ağır karmaşık yükünün nasıl otomatikleştirileceğini gösterir.
• OSA Foundation AJAX/JavaScript kitaplıklarında araştırma yapan katılımcı bir Web sitesine (wiki) sahiptir.
• XUL Planet’taki object reference (nesne başvurusu) bölümü XMLHttpRequest nesnesiyle (XML nesnelerinin yanı sıra DOM, CSS, HTML, Web Service ve Windows ve Navigation nesneleri gibi diğer türler dahil) ilgili ayrıntılı bilgileri içerir.
• Bazı temel Ajax ilkeleri hakkında ayrıntılı bilgi edinmek için güzel bir stratejik teknik yazıyı okuyabilirsiniz.
• Flickr.com adresinde çarpıcı Ajax uygulamarından birini çevrimiçi olarak görebilirsiniz.
• Google’un GMail’i Ajax’ın devrim yaratan Web uygulamalarından biridir.
• Head Rush Ajax (O'Reilly Media, Inc., Şubat 2006) bu makalede ve dizide özetlenen fikirleri (ve daha birçok şeyi) alarak size yeni ve Head First ödüllü biçimde sunar.
• JavaScript: The Definitive Guide, 4. Basım (O'Reilly Media, Inc., Kasım 2001) JavaScript dili ve dinamik Web sayfalarıyla çalışmak konularında zengin bir kaynaktır.
• developerWorks Web Architecture zone (Web mimarisi bölgesi) çeşitli Web tabanlı çözümleri ele alan makaleler üzerinde yoğunlaşır.

Tartışma

• Tartışma forumuna katılın.
• Ajax.NET Professional Ajax’ı tüm yönleriyle ele alan harika bir Web günlüğüdür.
• developerWorks Web günlüklerine katılarak developerWorks topluluğuna girin.

Yazar hakkında

Brett McLaughlin, Logo zamanından (küçük üçgeni hatırlarsınız) bu yana bilgisayarlar üzerinde çalışıyor. Son yıllarda, Java ve XML topluluklarında en çok tanınan yazar ve programcılardan biri oldu. Karmaşık kurumsal sistemler kurma göreviyle Nextel Communications ’ta, uygulama sunucuları yazmak göreviyle Lutris Technologies’de ve halen önemli kitaplar yazma ve düzenleme görevini sürdüğü O'Reilly Media, Inc. şirketlerinde çalıştı. Brett'in yakında çıkacak olan kitabı Head Rush Ajax, kitabın çok satan diğer yazarları Eric ve Beth Freeman ile birlike Ajax’a ödüllü ve yenilikçi Head First yaklaşımını getirmiştir. Yazarın son kitabı Java 1.5 Tiger: A Developer's Notebook, Java teknolojisinin en son sürümüyle ilgili ilk kitap olma özelliğini taşırken, yazarın klasiği niteliğindeki Java and XML adlı kitabı Java dilinde XML teknolojilerinin kullanılmasına ilişkin eksiksiz çalışmalardan biri olma özelliğini hala sürdürmektedir.