AJAX Tanıtımı

AJAX, geliştiricilerin hayali, çünkü:

  • Sayfayı yenilemeden web sayfasını güncelleme
  • Sayfa yüklendikten sonra sunucudan veri talep etme
  • Sayfa yüklendikten sonra sunucudan veri alın
  • Arka planda sunucuya veri gönderme

AJAX Örneği

Aşağıdaki düğmeyi tıklayarak Ajax'ın bu metni değiştirmesini sağlayın:

Deneyin

AJAX Örneği Açıklaması

HTML Sayfası

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>AJAX ile Bu Metni Değiştir</h2>
  <button type="button" onclick="loadDoc()">Metni Değiştir</button>
</div>
</body>
</html>

Bu HTML sayfası bir <div> ve bir <button> içerir.

<div> Sunucudan gelen bilgileri göstermek için kullanılır.

<button> Fonksiyonu çağır (tıklanırsa).

Bu fonksiyon web sunucusundan veri alır ve gösterir:

Function loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

AJAX nedir?

AJAX = Asynchronous JvaScript And XML.

AJAX bir programlama dili değildir.

AJAX yalnızca şu unsurları bir araya getirir:

  • Tarayıcıya önceden yüklenmiş XMLHttpRequest nesnesi (web sunucusundan veri talep etme)
  • JavaScript ve HTML DOM (verileri gösterme veya kullanma)

Ajax, yanıltıcı bir addır. Ajax uygulaması verileri XML ile iletebilir, ancak verileri temiz metin veya JSON metni olarak iletmek de yaygındır.

Ajax, arka planda Web sunucusu ile veri alışverişini yaparak web sayfasını asenkron olarak güncellemeyi sağlar. Bu, web sayfasının bir kısmını güncellemek için tüm sayfanın yeniden yüklenmesini gerektirmez.

AJAX nasıl çalışır

AJAX
  1. Web sayfasında bir olay meydana gelir (sayfa yüklenmesi, düğme tıklanması)
  2. JavaScript tarafından XMLHttpRequest nesnesi oluşturulur
  3. XMLHttpRequest nesnesi web sunucusuna istek gönderir
  4. Sunucu bu istek işler
  5. Sunucu yanıtın web sayfasına gönderir
  6. JavaScript tarafından yanıt okunur
  7. JavaScript tarafından doğru eylemler gerçekleştirir (örneğin, sayfa güncellemesi)