Ajax Nedir? Ne İşe Yarar?

Kullanıcı Alanı

Kategoriler

Arama

Çevrimiçi Kullanıcılar

(1 Misafir) Toplam: 1

Son Kaydolan Kullanıcı: korsan_132

Yazar Kadrosu

Yazar	Ders Sayısı
Erkan Coşu	30
Semih Coşu	16

Anasayfa » Ajax » Ajax Nedir? Ne İşe Yarar?

Yazan: Semih Coşu
Tarih: 21-01-2010 14:47
Okunma: 261

Ajax Nedir? Ne İşe Yarar?

AJAX tek başına bir dil değildir. Açılımı: Asynchronous JavaScript and XML'dir. Türkçesi Asenkron JavaScript ve XML'dir. AJAX'ı bir web sayfasının içinde kullanabiliriz. Örnek olarak sayfanın sadece istenen bir kısmını değiştirerek, tüm sayfanın yeniden yüklenmesini engellemiş oluruz.Böylece hem Trafik (Bandwidth) sorunu azalmış olur hemde yüklenme süresi kısalmış olur. Ajax'ı javascript bilmesek de hazır sınıflar sayesinde sayfalarımıza ekleyebiliriz. Bunun için prototype.js, Jquery gibi hazır dosyaları kullanabiliriz.

Aşağıdaki örnekte sayfa değişmeden metin1.txt dosyasını çağırıp, metin.txt dosyasıyla değiştirebileceğiz.

Yazıyı Değiştirmek İçin Butonlara Tıklayın

Kod:



<script type="text/javascript">
// <![CDATA[ function loadXMLDoc(url) { 
if (window.XMLHttpRequest)   {
// code for IE7+, Firefox, Chrome, Opera, Safari 
 xmlhttp=new XMLHttpRequest(); 
 } else   {
// code for IE6, IE5 
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
 } 
xmlhttp.open("GET",url,false);
 xmlhttp.send(null); 
document.getElementById('test').innerHTML=xmlhttp.responseText; 
} // ]]>
</script> 
<table style="background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: white; width: 80%; background-position: initial initial; border: 1px solid #d4d4d4;" border="0" cellspacing="0" cellpadding="3"> <tbody> <tr> <td> <div id="test"> 
<h2>Yazıyı Değiştirmek İçin Butonlara Tıklayın</h2>
 </div> </td> </tr> </tbody> </table> 
 
<button onclick="loadXMLDoc('metin.txt')">metin.txt</button> 
<button onclick="loadXMLDoc('metin1.txt')">metin1.txt</button>

Burada yukarıda söz ettiğim prototype.js veya jquery kullanılmamıştır. Böyle basit şeyler için bu yöntem kullanılabilir fakat onları kullanarak bir sayfaya POST veya GET veri gönderebilir, animasyonlu değişmeler veya Sürükle Bırak yöntemiyle düzenlemeler yapabilirsiniz.

Sonraki derste görüşmek üzere. Hoşçakalın...

Sadece üyelerimiz yorum yapabilir... Eğer üye iseniz lütfen giriş yapınız. Değilseniz hemen Buraya tıklayarak ücretsiz üye olabilirsiniz.