Anasayfa > Dökümanlar > En sade haliyle ajax

En sade haliyle ajax

Bu konuda internette bilgi çöplüğü var. Gelen döküman talepleri üzerine bende en sade ve açıklayıcı haliyle bir döküman yazmaya karar verdim. Anlattığım şeylerde gereksiz detaylardan kaçındım.

İnternette bu konuda birçok dökümanda ya anlatım kıtlığı var ya da gereksiz bilgiler fazlasıyla yer kaplıyor. Genelde birçok döküman İngilizce sitelerden çeviri olduğundan veya bazı yerlerden derleme olduğu için böyle bilgi kirliliği ortaya çıkıyor. Bu konuda en basit, temel ve gerekli şeyleri ele alarak bir döküman yazmak istedim. Detaylandırmalara fazla girmeyeceğim. Onları siz mantığını kavradıktan sonra elde edebilir ve kolayca uygulayabilirsiniz. Fakat bu konuda birazcık Javascript ve dinamik web dili bilgisi gerekli olduğunun altını çizerim. Ajax teknolojisi işlev olarak harikalar yaratsa da teknik manada bakıldığında o kadar da abartılacak birşey değil. Bildiğiniz Javascript. Lafı fazla uzatmadan anlaşılır bir şekilde en temel haliyle anlatmaya başlıyorum.

Öncelikle Ajax dediğimiz şeyin temelinde iframe mantığındaki gibi başka bir sayfanın çağrılması yatar. İsterseniz querystring kullanarak çağırabilirsiniz, isterseniz veri post edip o şekilde çağırabilirsiniz.Ya da bunları hiç kullanmadan normal haliyle sayfanıza erişebilirsiniz.

Ajax işlemleri sanıldığının aksine çok daha basittir. Ajax işlemleri için bir nesne, istek ve cevap olmak üzere 2 fonksiyon yeterlidir.

http://www.alpgulec.com/ajaxornek.zip adresinden örneği indirip bir yandan kodlara bakıp bir yandan burdan takip ederseniz çok daha verim alırsınız.

Eğer tarayıcımız Internet Explorer ise nesnemizi

var ajax = new ActiveXObject("Microsoft.XMLHTTP");

şeklinde tanımlamamız gerekir. Mozilla için ise;

var ajax = new XMLHttpRequest();

şeklinde tanımlanır.

İlk olarak ajax işlemlerine girmeden önce bu nesnemizi yaratırız. Daha sonra sıra istek fonksiyonuna geliyor.

function ajaxistek()
{
ajax.open("post","kur.html");
ajax.onreadystatechange=ajaxcevap;
ajax.send(null);
}

Öncelikle bilgiyi talep edeceğimiz fonksiyonumuzu yazıyoruz. Bu fonksiyonumuzla kur.html dosyasındaki dolar kurunu alacağız.

ajax.open(metod,url): Hangi sayfaya erişmek istediğimizi belirtiyoruz.

metod:
İlk parametremiz get veya post olabilir. Fakat get Internet Explorer'da bazı sorunlara yol açabildiğinden her zaman post yazılmasında bir mahsur yok.

url:
Buraya hangi sayfadan veri almak, yollamak istiyorsanız oranın adresini yazıyorsunuz. Burada;

kur.html şeklinde düz bir sayfa açabilir,
doviz.php?dolar=1 şeklinde querystringle beraber yazarakta sayfayı açabilirsiniz.

Diğer satıra geçiyoruz;

ajax.onreadystatechange=ajaxcevap;

Bu cevap fonksiyonumuzun adını yazacağımız kısım. Cevap fonksiyonumuzun ismini tırnaklar olmadan ve parametre parantezleri kullanmadan düz olarak yazıyoruz.

Cevap fonksiyonunun işlevi ajax ile sayfamızı açtıktan sonra henüz sayfaya eriştik mi?, hata var mı? ve eriştiğimiz sayfanın kodlarını elde edebilmek için kullanırız.

Son olarak;

ajax.send(null): İstek talebimizi bununla gerçekleştiriyoruz. İstek fonksiyonumuzun son halkası.

Bu kısmı henüz veri post etmeyeceğimiz için null olarak bırakıyoruz. Parametreyi veri post edeceksek kullanıyoruz. Dökümanın ilerleyen kısımlarında ona değineceğim. Şu an kafanızı karıştırmak istemiyorum.

Gelelim cevap fonksiyonumuza :)

Yaptığımız işlem, kur.html sayfasında yazan değeri almak. Ajax ile neyi elde etmek istiyorsak sadece onu yazdırıyoruz. kur.html sayfasında tek yazan şey "1,5 TL" Herhangi bir html kodu yok. Unutmayın içinde ne yazıyorsa dönen değerle onu elde ederiz. Eğer içerisinde "<b>1.5 TL</b>" yazıyor ise onu döndürür. Sadece yazı varsa onu.

İşte bu yüzden ajax işlemleri çok hızlı bir şekilde gerçekleşir. Gereksiz bilgilere yer yoktur. Sadece neyi talep ettiysek ona erişiriz. Talep edilen dosyada html kodları kullanarak daha komplike şeylerde getirebiliriz. Örneğin renkli bir tablonun kodunu kur.html içerisine yazar ve o şekilde talep edersek tabloyu dahi o halde getirebiliriz. Devamı sizin hayal gücünüze kalmış :)

Evet şimdi cevap fonksiyonumuza devam edelim.

function ajaxcevap()
{
if(ajax.readyState==4)
{
document.getElementById('yazi').innerHTML=ajax.responseText;
}
}

Yukarda hatırlatırsam ajax.onreadystatechange=ajaxcevap; demiştik. Yani bu fonksiyonu işaret etmiştik.

Bu fonksiyonda gördüğünüz üzere ajax.readyState değerini 4 ile karşılaştırmışız. readyState değeri 4 ise başarıyla sayfaya erişmişiz. 1 ise yüklenmesine devam ediyor. Bu kadarı bizim için yeterli.

Daha sonra ise document.getElementById('yazi').innerHTML=ajax.responseText; satırı ile dönen değerimizi "yazi" id li span'in html koduna atamış olduk.

Örneğin asıl sayfamızdaki <span id="yazi"><b>Kalın yazı</b></span> kodu böyle diyelim.

document.getElementById('yazi').innerHTML=ajax.responseText;

innerHTML ine yaptığımız atamayla html koduna müdahale etmiş oluyoruz ve

<span id="yazi"><u>Altı çizili yazı</u></span>  oluyor.

ajax.responseText bu durumda "<u>Altı çizili yazı</u>" değerini içermiş oluyor. Yani bilgi talep ettiğimiz sayfada

sadece "<u>Altı çizili yazı</u>" yazıyormuş.

ajax.responseText:

Ajaxla açtığımız sayfada ne gördüyse onu getirir. Onun için ajaxla bilgi talep edeceğiniz sayfaya ne yazdırdığınıza dikkat etmeniz gereklidir. Sayfada talep ettiğimiz bilgi dışında gereksiz html kodları varsa onları da getirir ve iş sıkıntıya girebilir. Sadece gerekli şeyleri yazdırır ve ajax.responseText ile bu veriyi elde ederiz. Ne kadar sade veri gelirse o kadar hızlı erişmiş olacağımızdan büyük oranda performans artışı sağlar.

İlk örneğimiz bu kadar :)

Kodları webserverda çalıştırarak deneyebilir. Dinamik web dilleriyle pratik yapabilirsiniz.

ornek1.html
----------------

<script>
if(window.ActiveXObject)
var ajax = new ActiveXObject("Microsoft.XMLHTTP"); //IE ise bunu yarat
else if(window.XMLHttpRequest)
var ajax = new XMLHttpRequest(); //Mozilla ise bunu

function ajaxistek()
{
ajax.open("post","kur.html");
ajax.onreadystatechange=ajaxcevap;
ajax.send(null);
}

function ajaxcevap()
{
if(ajax.readyState==4)
{
document.getElementById('yazi').innerHTML=ajax.responseText;
}
}
</script>

Dolar:<span id="yazi">1,3 TL</span><br>
<input type="button" onclick="ajaxistek();" value="Bilgiyi al">

--------

kur.html

--------

1,5 TL

--------

Kodlarımız bu kadar :)

Son olarak veriyi post etmekten bahsedelim. Bu yine aynı kolaylıkta olmasına rağmen biraz daha komplike gözüktüğünden sona saklamak istedim. Yine yaptığımız herşey aynı. İstek ve cevap fonksiyonlarımız var.

Sadece istek fonksiyonumuz birazcık daha değişik.

function mesajgonder()

{

var gonderilen="mesaj="+encodeURIComponent(document.getElementById("msjkutusu").value);

ajax.open("post","mesajgonder.php?mesajgonder=1",true);

ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

ajax.setRequestHeader("Content-length", gonderilen.length);

ajax.setRequestHeader("Connection", "close");

ajax.onreadystatechange=mesajcevap;

ajax.send(gonderilen);

}

Buradaki karmaşık gibi gözüken detaylara takılmayın. İlk satırdan itibaren anlatmaya başlıyorum.

var gonderilen="mesaj="+encodeURIComponent(document.getElementById("msjkutusu").value);

Şimdi arkadaşlar bu satırda gonderilen diye bir değişkenimiz var. Bu post edeceğimiz veriyi tutacak. Fakat formatı şu şekilde olmak zorunda. Aynen bir querystring gibi.

Göndereceğimiz post elemanının adı mesaj olacaksa "mesaj="+veri   şeklinde tanımlamalıyız.

Birden fazla veri gönderiyorsak. Örneğin;

"mesaj=merhaba&gonderen=alp"

şeklinde olur. Aynen tarayıcı satırından querystring gönderiyormuş gibi bu değişkeni formatlıyoruz.

Şimdi anlatmaya devam edersek;

gonderilene "mesaj="+encodeURIComponent(document.getElementById("msjkutusu").value)  şeklinde bir atama yapmışız.

document.getElementById("msjkutusu").value  ile msjkutusu idli textareanın içindeki veriyi almışız daha sonra

encodeURIComponent fonksiyonu ile encode etmişiz.

encodeURIComponent(veri) fonksiyonu:

Bunu size ekstra püf noktası olarak veriyorum. Eğer bunu

yapmazsanız + % gibi karakterler otomatik olarak gönderdiğiniz yazıdan çıkartılacak. Çünkü o karakterler

rezerve edilmiş olup arkaplanda kullanılmaktadır.

İlk satırı anlattıktan sonra ikinci satıra geçiyoruz.

ajax.open("post","mesajgonder.php?mesajgonder=1",true);

Gördüğünüz üzere ilk örnekteki gibi bir kullanım var. Fakat dikkat edin! true parametresini veri post
ederken eklememiz gerekiyor.

ve sıradaki;

ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Burayı kullanmamız gerekiyor. Fakat burayla ilgili kafanızı karıştırmanıza gerek yok.

Diğer satırımızda;

ajax.setRequestHeader("Content-length", gonderilen.length);

var. Burada göndereceğimiz değişkenin boyutunu bildirmemiz gerekiyor. Gerekli yere degiskenadi.length yazmanız yeterli.

Daha fazla birşey yapmanıza gerek yok.

ajax.setRequestHeader("Connection", "close");

Son header satırımızda üstteki gibi. Buna da takılmamıza gerek yok. Fakat kullanmamız şart.

ajax.onreadystatechange=mesajcevap;

Burası olması gerektiği gibi. mesajcevap fonksiyonumuz cevap fonksiyonumuz olsun istiyoruz.

Sonra olarak ise

ajax.send(gonderilen);

diyoruz. Dikkat ederseniz send kısmına null yerine göndereceğimiz değişkenin adını yazdık.

ve çalıştığında gonderilen isimli verimiz post edilmiş olacak.

mesajcevap fonksiyonu için ise ekstra birşey yok. Yine diğer örneğin tamamen aynısı.

En sade ve bilinmesi gereken detaylarla anlatacaklarım bu kadar. Burada yazanlara ekstra birşey öğrenmeden her türlü işinizi görebilirsiniz. Gerisi sizin javascript ve dinamik web programlama dili bilginize kalmış. Umarım faydalı olmuştur. Saygılarımla.

Ek olarak Ballettin isimli Ajax forum projemin kodlarını alttaki konudan indirip Ajax fonksiyonlarına gözatabilirsiniz.

http://www1.tahribat.com/Forum-Ballettin-Forum-Scripti-104904/

Yazar: FireX

Reklamlar
Kategoriler:Dökümanlar Etiketler:, , , ,
  1. Henüz yorum yapılmamış.
  1. No trackbacks yet.

Bir Yanıt Bırakın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: