AJAX Nedir?
AJAX, “Asynchronous JavaScript And XML” ‘in kısaltılmışıdır.
Ajax bir programlama yöntemidir ve 2005 yılında Google Suggest hizmetiyle popüler olmaya başlamıştır.
Ajax bir programlama dili değildir sadece mevcut programlama dillerinin yeni bir kullanım yöntemidir.

Ajax ile daha iyi, hızlı ve kullanıcı dostu internet uygulamaları geliştirebilirsiniz.
Ajax Javascript ve HTTP istekleri üzerine kurulu bir yöntemdir.
AJAX “Asynchronous JavaScript And XML” ‘in kısaltılmışıdır.
Derse başlamadan önce bilmeniz gerekenler

Derse başlamadan önce aşağıdakiler hakkında temel olarak bilgi sahibi olmanız gerekir:

* HTML / XHTML
* JavaScript

AJAX = Asynchronous JavaScript and XML

AJAX yeni bir programlama dili değildir, daha iyi, daha hızlı ve daha etkileşimli web uygulamaları geliştirmek için bir tekniktir.

AJAX ile Javascript kodunuz, XMLHttpRequest nesnesini kullanarak sunucuyla doğrudan iletişim kurabilir. Bu nesne ile javascript kodlarınız sayfa yenilenmeden bir sunucuyla veri alışverişi yapabilir.

AJAX, tarayıcı ile sunucu arasında asenkron veri iletimi (HTTP istemleri) kullanır. Bu şekilde web sayfaları sunucudan bütün sayfayı çekmek yerine küçük miktarda veriler isteyerek sayfa yenilenmesini gerektirmez.

AJAX yöntemi, internet uygulamalarını daha küçük, daha hızlı ve daha kullanıcı dostu hale getirir.

AJAX, sunucu yazılımından bağımsız bir tarayıcı teknolojisidir.
AJAX internet standartları üzerine kuruludur

AJAX aşağıdaki internet standartları üzerine kuruludur:

* JavaScript
* XML
* HTML
* CSS

AJAX ‘da kullanılan internet standartları iyi tanımlanmıştır ve bütün büyük tarayıcılar tarafından desteklenir. Ajax uygulamaları tarayıcı ve platformdan bağımsızdır.
AJAX daha iyi internet uygulamaları demektir

İnternet uygulamalarının masaüstü programlarına göre birçok üstünlüğü vardır; daha çok kullanıcıya ulaşabilirler, kurulumları, bakımı ve geliştirilmeleri daha kolaydır.

Ama internet uygulamaları her zaman geleneksel masaüstü uygulamaları kadar “zengin” ve kullanıcı dostu değildirler.

Ajax ile internet uygulamaları daha zengin ve daha kullanıcı dostu yapılabilir.
Bugün Ajax kullanmaya başlayabilirsiniz

Öğrenmeniz gereken yeni birşey yok.

AJAX mevcut standartlar üzerine kuruludur. Bu standartlar yıllardır birçok web geliştiricisi tarafından kullanılıyor.

AJAX Http İstemleri kullanır

Geleneksel JavaScript kodlarında, eğer sunucudaki bir veritabanından yada dosyadan bilgi almak isterseniz, yada sunucuya kullanıcı girdisini göndermek isterseniz bir HTML formu oluşturup GET yada POST yöntemlerinden biriyle sunucuyla veri alışverişi yaparsınız. Kullanıcı veriyi göndermek/almak için formdaki “Gönder” vb. bir düğmeyi tıklar, sunucunun yanıtını bekler ve sonuçları yeni yüklenen sayfada görür.

Kullanıcının her veri girişinde sunucunun yeni bir sayfa oluşturmasını beklemesi nedeniyle geleneksel internet uygulamaları daha yavaş çalışabilir ve daha az kullanıcı dostu olabilir.

Ajax ile, Javascript kodunuz XMLHttpRequest nesnesini kullanarak doğrudan sunucuyla iletişime geçer.

HTTP istemi kullanarak bir web sayfası, sayfayı yenilemeye gerek olmaksızın sunucuya istemde bulunup yanıt alabilir. Kullanıcı aynı sayfada kalacaktır ve arka planda gerçekleşen veri iletişimini farketmeyecektir.
XMLHttpRequest nesnesi

Bir web geliştiricisi XMLHttpRequest nesnesini kullanarak bir web sayfasını sunucudan yüklendikten sonra yeni bilgilerle güncelleyebilir!

AJAX ilk kez 2005 yılında Google tarafından (Google Suggest ile) popüler hale getirildi.

Google Suggest dinamik bir arayüz oluşturmak için XMLHttpRequest nesnesini kullanır. Google Suggest ile arama kutusuna yazmaya başladığınızda bir javascript betiği yazdığınız harfleri sunucuya gönderir ve sunucu bir tahmin listesiyle geri döner.

XMLHttpRequest nesnesi Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, ve Netscape 7 tarayıcılarında desteklenmektedir.

İlk AJAX uygulamanız

Ajax ‘ın nasıl çalıştığını anlamak için küçük bir ajax uygulaması oluşturacağız.

İlk önce, username ve time adında iki metin girişi bulunan standart bir HTML formu oluşturacağız. username alanı kullanıcı tarafından doldurulacak ve time alanı AJAX tarafından doldurulacak.

Oluşturduğumuz HTML dosyasının adı “testAjax.htm” olsun (bu formda gönder tuşunun olmadığına dikkat edin!):

PLAIN TEXT
HTML:
  3.  
  4. <form name=”myForm”>
  5. Name: <input type=”text” name=”username” />
  6.  
  7. Time: <input type=”text” name=”time” />
  8. </form>
  9.  
  10. </body>
  11. </html>

AJAX - Tarayıcı Desteği

AJAX ‘ın temeli XMLHttpRequest nesnesidir.

Farklı tarayıcılar XMLHttpRequest nesnesini yaratmak için farklı işlevler kullanırlar.

Internet Explorer bir ActiveXObject kullanırken, diğer tarayıcılar XMLHttpRequest adı verilen Javascript nesnesini kullanırlar.

Bu projeyi oluşturmak ve farklı tarayıcılarla başa çıkmak için bir “try - catch” ifadesi kullanacağız.

Önceden oluşturduğumuz “testAjax.htm” dosyamızı XMLHttpRequest nesnesini oluşturan Javascript kodumuzla güncelleyelim.:

PLAIN TEXT
HTML:
  2.  
  4.  
  5. <script type=”text/javascript”>
  6. function ajaxFunction()
  7. {
  8. var xmlHttp;
  9. try
  10. {
  11. // Firefox, Opera 8.0+, Safari
  12. xmlHttp=new XMLHttpRequest();
  13. }
  14. catch (e)
  15. {
  16. // Internet Explorer
  17. try
  18. {
  19. xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”);
  20. }
  21. catch (e)
  22. {
  23. try
  24. {
  25. xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”);
  26. }
  27. catch (e)
  28. {
  29. alert(”Your browser does not support AJAX!”);
  30. return false;
  31. }
  32. }
  33. }
  34. }
  35. </script>
  36.  
  37. <form name=”myForm”>
  38. Name: <input type=”text” name=”username” />
  39. Time: <input type=”text” name=”time” />
  40.  
  41. </form>
  42.  
  43. </body>
  44. </html>

Kod açıklaması: Önce, XMLHttpRequest nesnesini tutan xmlHttp değişkenimizi oluşturalım.

Sonra nesneyi XMLHttp=new XMLHttpRequest() ifadesiyle oluşturmayı deneyelim. Bu ifade Firefox, Opera, ve Safari tarayıcıları için geçerlidir. Eğer bu ifade başarısız olursa xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”) ifadesini dene. Bu ifade Internet Explorer 6.0+ tarayıcıları için geçerlidir. Bu ifade de çalışmazsa xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”) ifadesini deneriz. Bu ifade ise Internet Explorer 5.5+ tarayıcıları için uygundur.

Bu üç yöntemin hiçbiri işe yaramazsa kullanıcı çok eski bir tarayıcı kullanıyor demektir. Bu durumda kullanıcı, tarayıcısının AJAX ‘ı desteklemediğine dair bir uyarı iletisi alacaktır.

Not: Yukarıdaki tarayıcıya özel kod uzun ve yeterince karmaşıktır. Ama bu kodu bir XMLHttpRequest nesnesi yaratmanız gerektiği her zaman kullanabilirsiniz. Yani bu kodu kopyala-yapıştır yaparak gerektiğinde kullanabilirsiniz. Yukarıdaki kod bütün meşhur tarayıcılarla uyumludur: Internet Explorer, Opera, Firefox ve Safari.

Sonraki konu XMLHttpRequest nesnesinin sunucuyla iletişime geçmek için nasıl kullanıldığını göstermektedir.

AJAX - XMLHttpRequest nesnesi hakkında

Sunucuya veri göndermeden önce, XMLHttpRequest nesnesinin üç önemli özelliğini açıklamamız gerekiyor.
onreadystatechange özelliği

Sunucuya bir istek gönderilmesinden sonra, sunucudan dönen veriyi alabilecek bir işleve ihtiyacımız var.

onreadystatechange özelliği sunucunun yanıtını işleyecek olan fonksiyonu tutar. Aşağıdaki kod boş bir fonksiyon tanımlar ve aynı zamanda onreadystatechange özelliğini ayarlar:

PLAIN TEXT
JavaScript:
  1. xmlHttp.onreadystatechange=function()
  2. {
  3. // Buraya kod yazacağız
  4. }

readyState özelliği

readyState özelliği sunucu yanıtının durumunu tutar. readyState her değiştiğinde onreadystatechange fonksiyonu çalıştırılır.

readyState özelliği için mümkün olan değerler şunlardır:

Durum Açıklama
0 istek başlatılmadı
1 istek ayarlandı
2 istek gönderildi
3 istek işlemde
4 istek tamamlandı

Sunucudan gelen yanıtın tamamlandığını (veriyi alabileceğimiz durumu) kontrol etmek için onreadystatechange işlevimize bir If ifadesi ekleyeceğiz:

PLAIN TEXT
JavaScript:
  1. xmlHttp.onreadystatechange=function()
  2. {
  3. if(xmlHttp.readyState==4)
  4. {
  5. // Veriyi sunucu yanıtından al
  6. }
  7. }

responseText özelliği

Sunucudan gelen veri responseText özelliği ile alınabilir.

Kodumuzda “time” form değişkenimizin değerini responseText değerine eşitleyeceğiz:

PLAIN TEXT
JavaScript:
  1. xmlHttp.onreadystatechange=function()
  2. {
  3. if(xmlHttp.readyState==4)
  4. {
  5. document.myForm.time.value=xmlHttp.responseTe
  6. t;
  7. }
  8. }

AJAX - Sunucuya istek göndermek

Sunucuya bir istek göndermek için open() ve send() işlevlerini kullanırız.

open() işlevi üç parametre alır. İlk parametre istekte bulunurken hangi yöntemin kullanılacağını belirtir (GET yada POST). İkinci parametre sunucudaki betiğin url adresini belirtir. Üçüncü parametre ise isteğin asenkron (eşzamansız) olarak ele alınacağını belirtir. send() işlevi isteği sunucuya gönderir. Eğer HTML ve (eğer sunucuda PHP dilini kullanıyorsak) PHP dosyalarının aynı dizinde olduğunu varsayarsak kod şöyle olacaktır:

PLAIN TEXT
PHP:
  1. xmlHttp.open(”GET”,”time.php”,true);
  2. xmlHttp.send(null);

Şimdi, AJAX işlevimizin ne zaman çalıştırılacağına karar vermeliyiz. Kullanıcı, formdaki username metin alanına birşey yazdığında işlevimizin çalışmasını sağlayalım:

PLAIN TEXT
HTML:
  1. <form name=”myForm”>
  2. Name: <input type=”text”
  3. onkeyup=”ajaxFunction();” name=”username” />
  4.  
  5. Time: <input type=”text” name=”time” />
  6. </form>

“testAjax.htm” dosyamızın yeni hali:

PLAIN TEXT
HTML:
  3.  
  4. <script type=”text/javascript”>
  5. function ajaxFunction()
  6. {
  7. var xmlHttp;
  8. try
  9. {
  10. // Firefox, Opera 8.0+, Safari
  11. xmlHttp=new XMLHttpRequest();
  12. }
  13. catch (e)
  14. {
  15. // Internet Explorer
  16. try
  17. {
  18. xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”);
  19. }
  20. catch (e)
  21. {
  22. try
  23. {
  24. xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”);
  25. }
  26. catch (e)
  27. {
  28. alert(”Your browser does not support AJAX!”);
  29. return false;
  30. }
  31. }
  32. }
  33. xmlHttp.onreadystatechange=function()
  34. {
  35. if(xmlHttp.readyState==4)
  36. {
  37. document.myForm.time.value=xmlHttp.responseTe
  38. t;
  39. }
  40. }
  41. xmlHttp.open(”GET”,”time.php”,true);
  42. xmlHttp.send(null);
  43. }
  44. </script>
  45.  
  46. <form name=”myForm”>
  47. Name: <input type=”text”
  48. onkeyup=”ajaxFunction();” name=”username” />
  49. Time: <input type=”text” name=”time” />
  50.  
  51. </form>
  52.  
  53. </body>
  54. </html>

“time.php” dosyamızı oluşturarak AJAX uygulamamız sonraki konu ile tamamlanıyor.

AJAX - Sunucudaki PHP betiği

Şimdi, sunucudaki mevcut zamanı gösteren betiği oluşturacağız.

responseText özelliği ( Üst tarafta anlattım:) ) sunucudan dönen veriyi tutacak. Burada mevcut zamanı dönmek istiyoruz. “time.php” dosyasındaki kod şöyle olabilir:

PLAIN TEXT
PHP:
  1. <?php
  2. echo date(’H:i:s’);
  3. ?>

Favorilerinize Ekleyin.
  • BlinkList
  • del.icio.us
  • Digg
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blogmarks
  • Blue Dot
  • Furl
  • Netscape
  • NewsVine
  • Reddit
  • Shadows
  • Technorati
  • YahooMyWeb
  • Fark
  • feedmelinks
  • Fleck
  • kick.ie
  • LinkaGoGo
  • Linkter
  • MyShare
  • Spurl
  • Webride