Konular

30 Saniyede Ajax.

Eburhanın yazmış olduğu ajax'i anlamak ve ibrahim'in ajax'in ne olduğuna değindiği ajax seminer notlarım yazılarından sonra sanırım ajax hakkında genel olarak fikir sahibi olduk. Bu yazımla kodlara ilk adımımızı atacağız ve ajax'in çekirdeği olan xmlhttprequest nesnesinin kullanımını göreceğiz.

30 Saniyede Ajax.Konuyu daha somut olması açısından bir örnekle anlatacağım. Örneğimizde bir kutu ve buton bulunuyor. Kutuya girilen isim eğer "ajax-tr" ise sonuç "Tamam" değilse "Hata!" olacaktır.

XMLHTTPREQUEST nesnesini çağırma

Önce en basit haliyle XMLHTTPREQUEST nesnesinin çağırılışını görelim.
(Birinci yöntem)

PHP:
  1. nesne = new XMLHttpRequest();

Normal şartlarda bu nesneyi çağırmak gördüğünüz gibi oldukça basit ve açık. Tabi internet explorer yine bize gıcıklık yapıyor ve bu kullanımı tanımayabiliyor. Fakat çözümü yok değil tabiki. İnternet explorer için de nesnemizi şöyle çağırabiliyoruz.
(İkinci yöntem)

PHP:
  1. nesne = new ActiveXObject("Microsoft.XMLHTTP");

Şimdi bu iki çağırma şeklinden faydalanarak tüm tarayıcılarda çalışabilecek bir fonksiyon yazalım. Bu fonksiyon sayfayı ziyaret eden kişinin tarayıcısını kontrol eden ve tarayıcı firefox, opera, safari gibi bir tarayıcı ise birinci yöntemi, internet explorer'da ise ikinci yöntemi kullanan bir fonksiyon olmalı.

PHP:
  1. function nesneyarat() {
  2.     var nesne;
  3.     var tarayici = navigator.appName;
  4.     if(tarayici == "Microsoft Internet Explorer"){
  5.         nesne = new ActiveXObject("Microsoft.XMLHTTP");
  6.     }else{
  7.         nesne = new XMLHttpRequest();
  8.     }
  9.     return nesne;
  10. }
  11.  
  12. var http = nesneyarat();

Bu fonksiyon ile XMLHTTPREQUEST nesnemiz çağırılıyor ve http değişkenine atanarak sitede kullanılabilecek duruma geliyor. Bu nesneyi çağırmanın bir çok farklı yolu mevcut. En basitinden buna bir hata yakalama kodları da eklenebilirdi veya eski tip nesne çağırılabilirdi ama bu işi yeni öğrenenler için o kadar zorlamak ve kodu karmaşıklaştırmak istemiyorum. Sonraki örneklerimizde daha gelişmiş fonksiyonlar kullanarak daha tutarlı uygulamalar yapacağız.

İşlem fonksiyonu ve XMLHTTPREQUEST metodları

Sıra geldi işlem yapacak olan fonksiyonumuza. İşlem derken formdan gelen değerleri yani kullanıcının girdiği bilgileri alıp sunucuya gönderip cevap isteyen fonksiyondan bahsediyorum. Örneğimiz için aşağıdaki gibi kısa bir fonksiyon bize yetecektir.

PHP:
  1. function islemkutu() {
  2.     var deger = document.erhan.isim.value;
  3.     http.open('get', 'kontrol.php?degisken=' + deger);
  4.     http.onreadystatechange = cevapFonksiyonu;
  5.     http.send(null);
  6. }

Güncelleme 24 Temmuz 2007
ASP kullananlar yukarıdaki kod yerine şunu kullanacaklardır.

PHP:
  1. function islemkutu() {
  2.     var deger = document.erhan.isim.value;
  3.     http.open('get', 'kontrol.asp?degisken=' + encodeURI(deger));
  4.     http.onreadystatechange = cevapFonksiyonu;
  5.     http.send(null);
  6. }

Yukarıdaki fonksiyonda open ile get metodu kullanarak kontrol.php dosyasına bilgiyi gönderiyoruz. Buradaki satırların başında http olmasının sebebi benim nesneyi en başta http değişkenine atamış olmam. onreadystatechange ise XMLHTTPREQUEST nesnesinin bir metodudur ve çağırdığımız nesnenin durumunun değişmesi durumunda (örneğin cevap gelirse değişmiş olur) işlem yapar. Burada cevapFonksiyonu 'nu çağırmak için kullandık. XMLHTTPREQUEST nesnesinin metodlarını biraz açacak olursak:

abort(): Geçerli isteği iptal eder.
getAllResponseHeaders(): Tüm karşılık başlık etiketilerini ve değerlerini string olarak elde eder.
getResponseHeader("başlıkEtiketi"): Verilen başlık etiketinin taşıdığı değeri string olarak elde eder.
open("metod", "Adres"[, asyncFlag[,"userName"[, "password"]]]): Sorgu gönderilmeden önce, sorgunun gönderileceği adresi, gönderi metodunu ve diğer seçime bağlı netilkleri belirler.
send(içerik): Sorguyu gönderir. Seçime bağlı olarak gönderilebilen verileri ve DOM ile yaratılmış verileri de gönderebilir.
setRequestHeader("etiket", "değer"): Gönderilen sorguya bir etiket/değer başlığını iliştirir.

Sunucudan cevabın alınması

Örneğimize kaldığımız yerden devam ediyoruz. cevapFonksiyonu ismini verdiğimiz fonksiyon sunucudan cevap geldiğinde yapmak istediğimiz işlemi belirlediğimiz fonksiyondur. Tabiki fonksiyonun ismi size kalmış. Onu da örneğimiz için şöyle oluşturalım.

PHP:
  1. function cevapFonksiyonu() {
  2. if(http.readyState == 4){
  3.    document.getElementById('yer').innerHTML = http.responseText;
  4. }
  5. }

Burada nesnemizin readyState metodundan faydalanıyoruz. Bu metodun alabileceği değerler ve karşılıkları şu şekildedir.

0 = başlatılamadı
1 = yükleniyor
2 = yüklendi
3 = etkileşimli
4 = tamamlandı

Burada 1 ve 4 sayılarının dikkatinizi çekmesini istiyorum. 1 durumunu ekrana yükleniyor yazmak istediğimizde kullanırız. 4'ü ise işlemimiz tamamlandığında (başarılı bir şekilde gerçekleştiğinde) kullanırız. Elbette ileri düzey uygulamalarda (özellikle hata yakalamalarda) diğer durumlar da önemli olacaktır. Örneğimizde de 4 olup olmadığını yani işlemin başarılı bir şekilde gerçekleştirilip gerçekleştirilmediğini kontrol ediyoruz. Eğer başarılı ise sayfamızda yer id'sine sahip unsurun değeri sunucudan gelen cevap (responseText) olacaktır.

Sonuç

Bu anlattıklarımı toparlayarak tek bir dosya haline getirelim ve ismine index.htm diyelim. İçeriği de şu şekilde toparlayalım.

HTML:
  1. <title>Yakuter'den XMLHTTPREQUEST</title>
  2. <script type="text/javascript">
  3. function nesneyarat() {
  4.     var nesne;
  5.     var tarayici = navigator.appName;
  6.     if(tarayici == "Microsoft Internet Explorer"){
  7.         nesne = new ActiveXObject("Microsoft.XMLHTTP");
  8.     }else{
  9.         nesne = new XMLHttpRequest();
  10.     }
  11.     return nesne;
  12. }
  13.  
  14. var http = nesneyarat();
  15.  
  16. function islemkutu() {
  17.     var deger = document.erhan.isim.value;
  18.     http.open('get', 'kontrol.php?degisken=' + deger);
  19.     http.onreadystatechange = cevapFonksiyonu;
  20.     http.send(null);
  21. }
  22.  
  23. function cevapFonksiyonu() {
  24.     if(http.readyState == 4){
  25.         document.getElementById('yer').innerHTML = http.responseText;
  26.     }
  27. }
  28. </script>
  29.  
  30. </head>
  31.  
  32.  
  33. <form name="erhan" action="javascript:void(0)" method="get">
  34.     <input type="text" name="isim">
  35.     <input type="button" name="yap" onclick="islemkutu();" value="Tamam">
  36. </form>
  37.  
  38. <div id="yer"></div>
  39.  
  40. </body>
  41. </html>

Sunucuda iletişime geçmek istediğimiz dosyanın da ismine kontrol.php diyelim ve içine şu kodları yazalım.

PHP:
  1. <?php  
  2.     if ($_GET['degisken']=="ajax-tr")  
  3.         { echo "Tamam"; }
  4.     else
  5.         { echo "Hata!";}
  6. ?>

Güncelleme 24 Temmuz 2007
ASP kullananlar yukarıdaki kod yerine şunu kullanacaklardır.

PHP:
  1. <%
  2.  If Request.QueryString("degisken") = "ajax-tr" Then
  3.   Response.Write("Tebrikler, dogru yazdiniz.")
  4.  Else
  5.   Response.Write("Hata, yanlis yazdiniz.")
  6.  End If
  7. %>

Kodunu yazmış olduğumuz bu örneğin nasıl çalıştığını görmek için
buraya, örneğin dosyalarını indirmek için ise buraya tıklayınız.

Son sözler

Bugün yazdığım makalede konuyu çok yaymamak için AJAX'in sadece javascript yanını kullandım. Diğer önemli unsur olan XML kısmına değinmedim. Bir sonraki makalelerimizde size XML ile örnekler de hazırlayacağız.

Bu vermiş olduğum örnek çok basit bir uygulama olduğu için eksikleri mutlaka vardır ve daha tutarlı kodlar yazmak mümkün. Konuyu anlatmak için bazen böyle kodlardan fedakarlık edilebiliyor ;)

Yazıyı ASP programcıları için güncellememize yardım eden "slyther" dostumuza gönülden teşekkürler.

Kaynaklar

Rasmus' 30 second AJAX Tutorial
Nothingrows AJAX
30 Saniyede AJAX Öğrenin
XMLHttpRequest Vikipedi
Ajax Nasıl?
XMLHttpRequest Nedir? Ne iş yapar?

Kaynak ajax-tr.com/30-saniyede-ajax/

Yorumunuzu Ekleyin
30 Saniyede Ajax. Yorumları +2 Yorum
  • Kasım
    1
    Kasım
    Güzel Programlama Dersleri Sitemizi Ziyaret edebilirsiniz.
    17 Ocak 2016 18:03:54, Pazar
  • http://www.afyonhayat.com
    1
    http://www.afyonhayat.com
    Güzel yazı olmuş Teşekkürler.
    27 Ocak 2018 14:28:10, Cumartesi

Ajax Nedir?

Geride bıraktığımız 2005-2006 yıllarında hakkında en çok konuşulan web olaylarından birisi ajax oldu. Dünya çapında ün sahibi olmuş sitelerin kendi servislerinde ajax isimli tekniği etkin bir şekilde kullanması sonucu pek çok kişinin dikkati ajax üzerine yoğunlaştı. Fakat kişilerin yaptığı ilk yanlış, ajax tekniğini başlı başına yeni bir programlama dili olarak görmeleriydi. Ajax tekniği, daha önceden zaten var olan javascript ve xml dillerinin, web tarayıcısında hazır bulunan xmlhttprequest nesnesi etrafında birlikte kullanılmasından ibarettir.

33,773 Okunma 1 Yorum 05/05/2007 01:39:51

Ajax Nedir?

Bu yazımda web uygulamalarında gün geçtikçe daha yoğun bir şekilde kullanılan bir teknikten bahsedeceğim.

28,311 Okunma Henüz yorum yapılmamış 04/01/2008 02:23:57

Javascript Ve Ajax İle Zamanuyumsuz İstekler Oluşturma.

Web uygulamalarının çoğu, sunucudan tüm html sayfasını alan bir istek/yanıt modelini kullanır. Sonuçta kullanıcı bir düğmeyi tıklatır, sunucuyu bekler, başka bir düğmeyi tıklatır ve biraz daha bekler. Ajax ve xmlhttprequest nesnesiyle, kullanıcıların sunucu yanıtını beklemelerine hiçbir zaman gerek bırakmayan bir istek/yanıt modeli kullanabilirsiniz. Bu makalede, brett mclaughlin, çapraz tarayıcı yöntemiyle xmlhttprequest örneklerinin nasıl oluşturulacağını, isteklerin oluşturulmasını ve gönderilmesini ve sunucuya yanıt verilmesini gösteriyor.

22,144 Okunma Henüz yorum yapılmamış 03/05/2007 01:44:17

Ajax'a Giriş

Ajax (asynchronous javascript and xml); web tabanlı uygulamalarda, zengin kullanıcı arayüzü ve güçlü arka plan uygulamaları bütünleştiren bir yaklaşım ve geliştirme ortamıdır.

21,079 Okunma Henüz yorum yapılmamış 22/06/2007 01:26:25

Ajax Nedir? Ajaxı Oluşturan Bileşenler Nelerdir?

Ajax, terimolojik olarak asynchronous javascript and xml; yani javascript ve xml'in eş zamanlı olmayan hareketlerle icra ettiği faaliyete verilen ?simdir.

19,896 Okunma Henüz yorum yapılmamış 03/05/2007 01:45:22

Ajax Nedir?

"ajax;ne Bir Dil,ne De Bir Kütüphane De?ildir. Ajax Sadece Bir Yöntemdir."

16,183 Okunma Henüz yorum yapılmamış 26/04/2007 17:43:57

Yükleniyor...