Go Dilinde Concurrency

2,314 More

Projedeki Git Dosyaları Nasıl Silinir?

1 7,916 More

yTheme

4 2,694 More

Sunucu Güvenliği | SSH (Secure Shell) Kullanımı

2 2,170 More

Truemag

  • PHP
  • Golang
  • Laravel
  • Linux
  • SQL
  • SEO
  • WordPress
  • Diğer
    • Yazılım
    • Javascript
    • Css/XHtml/W3C
    • Genel
    • Tanıtım
    • Ajax
  • Home
  • ANASAYFA
  • HAKKIMDA
  • SPONSORLUK
  • ARŞİV
  • İLETİŞİM
  • BENİMLE ÇALIŞMAK İSTER MİSİNİZ?

30 Saniyede Ajax Öğrenin

Bu yazımda size Ajax’ın temeli veya başka bir deyişle çekirdeği olan XMLHTTPREQUEST nesnesinin kullanımını anlatacağım. Aslında Ajax, Ajax olmadan önce de bu nesne mevcuttu fakat meşhur değildi. Bu nesnenin kullanımını öprendikten sonra sitelerinizde, sunucu ile iletişimi form yenilenmeden yapabileceksiniz. Üstelik bunu yaparken ihtiyacınız olmayan fonksiyonları barındıran prototype gibi hazır javascript sınıflarını kullanmanıza gerek kalmayacak.


Önce basit bir şekilde XMLHTTPREQUEST nesnesinin çağırılışını görelim.

PHP
1
nesne = new XMLHttpRequest();

Gördüğünüz gibi temelde oldukça basit ve açık. Tabi internet explorer yine bize gıcıklık yapıyor ve bu kullanımı tanımayabiliyor. Bu yüzden internet explorer için nesnemizi şöyle çağırabiliyoruz.

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

Şimdi bu iki çağırma şeklinden faydalanarak tüm tarayıcılarda çalışabilecek fonksiyonumuzu yazalım. Bunun için tarayıcıyı kontrol eden ve internet explorer ise onda ikinci yöntemi, internet explorer değilse (mozilla veya safari gibi tarayıcılar ise) birinci yöntemi kullanan bir fonksiyon kullanalım.

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

Bu kod ile sayfamız açıldığı anda nesnemiz çağırılmış olacak ve http değişkeni nesnemiz olacak. 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.

Sıra geldi işlem yapacak olan fonksiyonumuza. İşlem derken formdan gelen değerleri yani kullanıcının girdiği değerleri alıp sunucuya gönderip cevap isteyen fonksiyondan bahsediyorum. Sakın anlatıma bakıp gözünüzü korkutmayın. Aşağıdaki fonksiyon bize yetecektir.

PHP
1
2
3
4
5
function islemlink(deger) {
    http.open('get', 'test.php?degisken=' + deger);
    http.onreadystatechange = cevapFonksiyonu;
    http.send(null);
}

Yukarıdaki fonksiyonda open ile Get metodu kullanarak test.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 metodu olup çağırdığımız nesnenin durumunun değişmesi durumunda (örneğin cevap gelirse değişmiş olur), cevapFonksiyonu ‘nu çağırıyor.

cevapFonksiyonu‘muz da sunucudan cevap geldiğinde yapmak istediğimiz işlemi belirlediğimiz fonksiyondur. Onu da şöyle oluşturalım.

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

Burada nesnemizin readyState özelliğinin 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ı

Demek ki 4 olduğunda işlemimiz başarılı bir şekilde gerçekleştirilmiştir. Sonuç olarak da sayfamızda yer id’sine sahip yerde sunucudan gelen cevap (responseText) görüntülenecektir.

Bu anlattıklarımı toparlayarak tek bir dosya haline getirecek olursak deneme.htm dosyamız şu şekilde olacaktır.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<title>Yakuter'de XMLHTTPREQUEST</title>
<script type="text/javascript" >
function nesneyarat() {
    var nesne;
    var tarayici = navigator.appName;
    if(tarayici == "Microsoft Internet Explorer"){
        nesne = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        nesne = new XMLHttpRequest();
    }
    return nesne;
}
 
var http = nesneyarat();
 
function islemlink(deger) {
    http.open('get', 'test.php?degisken=' + deger);
    http.onreadystatechange = cevapFonksiyonu;
    http.send(null);
}
 
function cevapFonksiyonu() {
    if(http.readyState == 4){
        document.getElementById('yer').innerHTML = http.responseText;
}
}
</script>
 
</head>
 
<body>
 
<a href="javascript:islemlink('Merhaba Dunya')" >Tıkla</a><br /><br /><br />
 
<div id="yer"></div>
 
</body>
</html>

Sunucuda iletişime geçmek istediğimiz dosya test.php olsun ve içini şöyle hazırlayalım.

PHP
1
< ?php echo  $_GET['degisken']; ?>

Sonuç olarak ekranda Merhaba Dunya görüyorsanız başarmışsınız demektir…

Kolay gelsin…

Bu makaleyi yazarken özellikle Rasmus’ 30 second AJAX Tutorial başlıklı yazısından faydalandım.

Konu hakkında daha fazla bilgi edinmek için şu makaleleri okuyabilirsiniz.

XMLHttpRequest Vikipedi
Ajax Nasıl?
Ajax
XMLHttpRequest Nedir? Ne iş yapar?

Dec 20, 2006Erhan Yakut
Cloud Sunucu


hosting

Wordpress Yorum URL Kontrolu 1.0Netvibes Türkiye Yayında!
You Might Also Like
 
Javascript Silme İşlemini Doğrulama
 
Pratik WordPress Çözümleri
Erhan Yakut
14 years ago 10 Comments AjaxAjax, Javascript, programlama, XML5,863
Sponsorlar

sponsor

sponsor

sponsor

sponsor
Bağlantılar
  • Beyazıt Kölemen
  • Domatessuyu
  • Lezzetli Robot Tarifleri
  • Ofizzo
  • PHP Dersleri
  • Wordpress Hosting
Random Posts
WooCommerce Sepete İki Defa Ürün Eklenmesi Sorunu
HTML Listeleme Etiketine Görsel Eklemek
Merhaba Alexa İlk 100,000
Spor Temalı Websitesi
Sprite’tan Acımasız Gerçekler
sdafasdf
Hakkımda

Bilişim Teknolojileri alanında içerik üretmek üzere oluşturulmuş olan Yakuter.com 2006 yılında Erhan Yakut tarafından hayata geçirilmiştir. devamını okuyun…

CLOUD SUNUCU DESTEĞİ
2006-2020 © Yakuter