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

0
butch
Bilişim camiasının önemli ve değerli bilgi kaynaklarından biri olan, yayımladığı özgün makalelerle prestijli bir site sıfatını fazlası ile hak eden IBM developerWorks, pek çok durumda referans olarak gösterilen bir yer. Artık IBM developerWorks anadilimizde, Türkçe makalerle yazılımcılara ve bilişim uzmanlarına seslenecek. FM ve IBM Türkiye işbirliği ile Türk diline kazandırılan ve düzenli olarak çıkacak developerWorks makalelerinin ilkini yılbaşı hediyesi olarak sunmaktan ötürü sevinçliyiz.

Not: Çevirilecek makaleler sizden gelecek öneriler doğrultusunda belirlenecek.
Makalenin orjinaline bu adresten ulaşabilirsiniz.

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


Tartışma



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.

Görüşler

0
FZ
Ne kadar yüzel bir yılbaşı hediyesi bu böyle! :)

Bu güzel girişimi başlatan ve ilk ürünün sunulmasında emeği geçen herkese canı gönülden teşekkürler. Yazarın devam makalesini de en kısa sürede yine burada, Türkçe olarak okuyabilmek ümidiyle...
0
yilmaz
benimde bir çok şeyi arayıp bulduğum çok sayıda döküman olan bir site ve boyle bir çalışma gerçekten çok güzel olmuş teşekkürler.
0
darkhunter
http://www-306.ibm.com/able/guidelines/hardware/hwtouchscreen.html

"Install a touchscreen for Linux" çok heyecan verici bir makale, bunun çevrilmesi düşünülürse, Touchscreens Hardware checkpoint 1.3 (link yukarıda) makalesine de bir göz atmakta fayda var. Lakin kendisi bu işler için basit ama hayati bir referanstır...
0
FZ
Ben bir de ek bölüm istiyorum, parmak izi manyağı olan ekranları hangi solüsyon ile temizleyeceğiz, bunu evde yapabilir miyiz, vs. gibisinden ;-)
0
darkhunter
Ben o konunun fena halde cahiliyim.

Öyle ki geçmişte, bir LCD ekranı kolonyalı pamukla temizleye temizleye bozmuşluğum vardır :-) Panelin içini açtığımda mis gibi kolonya kokan, kokmakla da kalmayıp LCD'nin plastiklerinde sıvı halde kolonya gördüğüm bir deneyimdi bu.

O gün, "eşşeğin bi tarafına su kaçırmak" deyimini gerçekten idrak ettiğim gün oldu ;-)
0
jfever
bu noktada bende çok dertliyim, bir arkadasimdan ogrendigime gore vatan bilgisayarda lcd panelleri temizlemek icin ozel mendil varmis, ıslak mendil kıvamında olup, cok ozel bir solusyon iceriyormus. kullanan iki ayri kisi memnun kalmis, yolum dustugunde alip deneyecegim.
0
kesken
ozel bir solisyonu anliyorum da 'cok ozel bir solisyon' nasil birsey :) cok ozel fiyati filan mi var, nedir numarasi?
0
ttk
Seneler (galiba en az 10 sene) önce bir bilgisayar fuarından eşantiyon olarak gerçekten çok özel :] bir temizleme seti almıştım. Islak mendil gibi olanlarının yanında kulak çöpü gibi olan temizleme ekleri de vardı.
Temizlenmesi çok zor olan klavyeyi bile rahatlıkla temizliyordu (çok iyi kir söküyordu.)
Bilgisayarın değişik parçalarını kolayca temizlemeyi sağlayacak şekilde hazırlanmıştı. Ama fiyatı da bana göre epey tuzlu olduğundan içim elverip de satın alamamıştım.
0
Satanique
Benim monitorum de parmak izi manyagı oluyor FZ'ciğim... Solüsyona ihtiyacım var. Sen hangi solüsyondan kullanıyorsun? (Lütfen solüsyon yerine karışım filan de. Türkçe'yi mahvettin yabancı kelimelerler)
0
ttk
Güzel ve çok faydalı bir teşebbüs.
Emeği geçenlere kolaylıklar diler teşekkür ederim icabında :)
0
evolution
Ajax ile ara yüzlerini ürettiğimiz Rakun adında bir XML Uygulama Geliştirme Ortamı projesi yürütmekteyiz. Projenin web üzerinde kurumsal uygulama (örneğin mrp, erp, crm, v.b.) geliştirmek isteyenler için yerel bir altyapı niteliğinde olması hedeflenmektedir. Ajax ile standart verilerin (sayı, yazı,v.b.) sunucuya yollanması ve işlenmesi konusunda birçok kaynağa rastlanmaktadır. Ancak bir binary dosyanın Ajax ile web tarayıcıdan sunucuya nasıl yollanacağı konusunda bir bilgi bulamadım. Böyle bir işlemin javascript'e uygulanan yetki kontrollerinden dolayı sadece Ajax ile mümkün olmayacağını söylüyorlar. Bu konuda bir bilgisi olan var mı?
0
lifesdkver0_1
binary dosyanin yollanmasi derken ne kastediyorsunuz? istemci tarafanidaki bir dosyanin yollanmasi gibi mi mesela? ajaxlanmış, dosya yollayan bir form yeterli olmuyor mu mesela?
0
sleytr
sanırım "javascripte uygulanan yetki kontrolleri" yüzünden bir dosya alanı js ile submit edilemiyor. Zaten öyle olmasaydı warez sitelere giren sağ çıkamazdı herhalde :)
0
Berserk
Evet mümkün değil. Hatta bir formda bulunan dosya yükleme alanının değerini başka bir forma kopyalamak dahi mümkün değil (ki zaten aslında bunun yapılması alanın kodla düzenlenmesi arasında bir fark yok sanırım). Eğer binary data kullanıcının seçtiği bir dosya değilse bu durumda içeriği base64 gibi bir kodlamaya çevirip göndermek dışında pek bir çözüm yok sanırım.
0
robertosmix
Base64 encoding'i denediniz mi? Hem muhtemelen herhangi bir dilde rahatlıkla implement edilebilir. http://en.wikipedia.org/wiki/Base64
0
Satanique
Tebrikler...

Selametle
0
hardheart
Çok güzel bir gelişme. Yayında ve yapımda emeği geçen herkese şimdiden teşekkür.
0
xelon
Ellerinize sağlık... (Gerçi bu aralar bu üç nokta mevzusu derin, aman yanlış anlamayın ;) )
0
anonim
Yaptığı iş anlamında JSF nin event listenerlar ından bir farkı yok gibi. Hali hazırda JSF gibi bir kullanıcı arayüz tasarlamak için hazır programlar bulunuyor mu (ve bunlar ne derece başarılı ) ona bakmak lazım. Diğer taraftan php ve RoR gibi görsel anlamda eksikleri olan uygulama geliştirme ortamlarının açıklarını kapatabileck gibi görünüyor. Bu anlamda önemli bir teknoloji AJAX...
0
simor
Çok çok çok teşekkürler.
0
marsyas
Teşekkürler, çok faydalanacağımız bir girişim. Bu belgeleri ayrı bir dizinde toplamak olanaklı mı, daha hızlı ve yalnız belgeye erişim gibi.
0
marsyas
Teşekkürler, çok faydalanacağımız bir girişim. Bu belgeleri ayrı bir dizinde toplamak olanaklı mı, daha hızlı ve yalnız belgeye erişim gibi.
0
cgl
"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."
Degil mi? Zaten biz kendimiz icin yapiyoruz sayfayi, sadece kendi bilgisayarimizda kendi tercih ettigimiz tarayicidan sadece biz kullanicagizz tasarladigimiz sayfayi!
0
darkhunter
Makaleyi dikkatli okursanız, bu uyarının nedenini ve çözüm önerisini görebilirsiniz sanırım...
0
cgl
Bu uyarinin kabul dilebilir bir aciklamasi oldugunu dusunmuyorum, evet sonrasinda biki biki birseyler soylemis ama yine de burada kurdugu talihsiz cumleyi silmiyor!
0
agresif
Mükemmel bir anlatım. Çok faydalı bir kaynak olmuş. Emeği geçenlerin ellerine sağlık.
0
Satanique
+1
Görüş belirtmek için giriş yapın...

İlgili Yazılar

UNIX Dilinde Konuşma, Bölüm 1: Komut satırının gücüne hükmedin

tongucyumruk

IBM Türkiye ve Fazlamesai.net işbirliği ile dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız. Diğer makalelere buradan ulaşabilirsiniz.

Makalenin özgün haline bu adresten ulaşabilirsiniz.

UNIX Dilinde Konuşma, Bölüm 2: Daha çok değil, daha akıllı çalışma

tongucyumruk

IBM Türkiye ve Fazlamesai.net işbirliği ile dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız. Diğer makalelere buradan ulaşabilirsiniz.

Makalenin özgün haline bu adresten ulaşabilirsiniz.

Linux çalıştıran bilgisayarınızın performansını müzikal olarak gözetleyin

butch

Emre Sevinç tarafından dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız.

Makalenin özgün haline bu adresten ulaşabilirsiniz.

Sürdürmeler ve gelişmiş akış denetimi

butch

IBM Türkiye ve Fazlamesai.net işbirliği ile dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız. Diğer makalelere buradan ulaşabilirsiniz.

Makalenin özgün haline bu adresten ulaşabilirsiniz.

UNIX Dilinde Konuşma, Bölüm 4: UNIX sahiplik kuralları ve izinleri

butch

IBM Türkiye ve Fazlamesai.net işbirliği ile dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız. Diğer makalelere buradan ulaşabilirsiniz.

Makalenin özgün haline bu adresten ulaşabilirsiniz.