AJAX'a Giriş

İçindekiler

AJAX bir geliştiricinin hayalidir çünkü şunları yapabilirsiniz:

Sayfa yüklendikten sonra web sunucusundaki verileri okuyun
Bir web sayfasını sayfayı yeniden yüklemeden güncelleme
Verileri arka planda bir web sunucusuna gönderin

AJAX Örneği

AJAX'ın bu metni değiştirmesine izin ver

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

AJAX Örneği Açıklaması

HTML Sayfası

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>	<button type="button" onclick="loadDoc()">Change Content</button>
 </div>

</body>
</html>

HTML sayfası bir <div> bölümü ve bir <button> içerir.

<div> bölümü bir sunucudan gelen bilgileri görüntülemek için kullanılır.

<button> bir işlevi çağırır (eğer tıklanırsa).

İşlev bir web'den veri ister sunucu ve onu görüntüler:

LoadDoc() işlevi

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    
document.getElementById("demo").innerHTML = this.responseText;
    }
  xhttp.open("GET", "ajax_info.txt", true);
  
xhttp.send();
}

AJAX nedir?

AJAX=Eeşzamanlı JavaScript Ave XML.

AJAX bir programlama dili değildir.

AJAX yalnızca aşağıdakilerin bir kombinasyonunu kullanır:

Tarayıcının yerleşik bir XMLHttpRequest nesnesi (bir web sunucusundan veri istemek için)
JavaScript ve HTML DOM (verileri görüntülemek veya kullanmak için)

AJAX yanıltıcı bir isimdir. AJAX uygulamaları verileri taşımak için XML kullanabilir, ancak verilerin düz metin veya JSON metni olarak taşınması da aynı derecede yaygındır.

AJAX, arka planda bir web sunucusuyla veri alışverişi yaparak web sayfalarının eşzamansız olarak güncellenmesine olanak tanır. Bu, bir web sayfasının bazı kısımlarını, tüm sayfayı yeniden yüklemeden güncellemenin mümkün olduğu anlamına gelir.

AJAX Nasıl Çalışır?

1. Bir web sayfasında bir olay meydana gelir (sayfa yüklenir, bir düğmeye tıklanır)
2. Bir XMLHttpRequest nesnesi JavaScript tarafından oluşturulur
3. XMLHttpRequest nesnesi bir web sunucusuna istek gönderir
4. Sunucu isteği işler
5. Sunucu web sayfasına bir yanıt gönderir
6. Yanıt JavaScript tarafından okunur
7. Doğru eylem (sayfa güncelleme gibi) JavaScript tarafından gerçekleştirilir

Modern Tarayıcılar (Getirme API'si)

Modern Tarayıcılar, XMLHttpRequest Nesnesi yerine Fetch API'yi kullanabilir.

Fetch API arayüzü, web tarayıcısının web sunucularına HTTP istekleri yapmasına olanak tanır.

XMLHttpRequest Nesnesini kullanırsanız Fetch aynı şeyi daha basit bir şekilde yapabilir.