AJAX - XMLHttpRequest Nesnesi

XMLHttpRequest nesnesi AJAX'in temelidir.

  1. XMLHttpRequest nesnesi oluşturma
  2. Geri çağrı fonksiyonunu tanımlayın
  3. XMLHttpRequest nesnesi açma
  4. Sunucuya istek gönderme

XMLHttpRequest nesnesi

Tüm modern tarayıcılar destekler. XMLHttpRequest nesnesi.

XMLHttpRequest nesnesi, arka planda Web sunucusu ile veri alışverişinde kullanılabilir. Bu, web sayfasının tüm içeriğini yeniden yüklemek zorunda kalmadan kısmen güncellenebileceği anlamına gelir.

XMLHttpRequest nesnesi oluşturma

Tüm modern tarayıcılar (Chrome, Firefox, IE, Edge, Safari, Opera) 内 yerleşik XMLHttpRequest nesnesi.

XMLHttpRequest nesnesi oluşturma dilbilgisi:

variable = new XMLHttpRequest();

Geri çağrı fonksiyonunu tanımlayın

Geri çağrı fonksiyonu, bir başka fonksiyona parametre olarak geçirilen bir fonksiyondur.

Bu durumda, geri çağrı fonksiyonu, yanıt hazır olduğunda çalıştırılacak kodu içermelidir.

xhttp.onload = function() {
  // Yanıt hazır olduğunda ne yapılacağını belirleyin
}

İstek gönderme

Sunucuya istek göndermek için, XMLHttpRequest nesnesinin open() ve send() Yöntem:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Örnek

// XMLHttpRequest nesnesi oluşturun
const xhttp = new XMLHttpRequest();
// Geri çağrı fonksiyonunu tanımlayın
xhttp.onload = function() {
  // Burada verileri kullanabilirsiniz
}
// İstek gönderme
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Kişisel Deneyimleyin

Çapraz alan erişimi (Access Across Domains)

Güvenlik nedenlerinden ötürü, modern tarayıcılar çapraz alan erişimini izin vermez.

Bu, web sayfası ve yüklemeye çalıştığı XML dosyasının aynı sunucuda olması anlamına gelir.

CodeW3C.com üzerindeki örnekler, CodeW3C.com alanında bulunan XML dosyalarını açar.

Eğer yukarıdaki örneği kendi web sayfanızdan biri üzerinde kullanmak istiyorsanız, yüklediğiniz XML dosyası kendi sunucunuzda olmalıdır.

XMLHttpRequest nesnesi yöntemleri

Yöntem Açıklama
new XMLHttpRequest() Yeni bir XMLHttpRequest nesnesi oluşturur.
abort() Geçerli istekyi iptal eder.
getAllResponseHeaders() Başlık bilgilerini döndürür.
getResponseHeader() Belirli başlık bilgilerini döndürür.
open(method, url, async, user, psw)

İstek belirler.

  • methodİstek türü GET veya POST
  • urlDosya konumu
  • asynctrue (asenkron) veya false (senkron)
  • userOpsiyonel kullanıcı adı
  • pswOpsiyonel şifre
send() GET istekleri için sunucuya istek göndermek için kullanılır.
send(string) POST istekleri için sunucuya istek göndermek için kullanılır.
setRequestHeader() Gönderilecek başlıklara etiket/değer çifti ekler.

XMLHttpRequest nesnesi özellikleri

Özellik Açıklama
onload İstek (yüklenme) alındığında çağrılacak fonksiyonu tanımlar.
onreadystatechange readyState özelliği değiştiğinde çağrılacak fonksiyonu tanımlar.
readyState

XMLHttpRequest durumunu kaydet

  • 0: İstek başlatılmamış
  • 1: Sunucu bağlantısı kurulmuş
  • 2: İstek alınmış
  • 3: İstek işleniyor
  • 4: İstek tamamlanmış ve yanıt hazır
responseText String olarak yanıt veri döndürür
responseXML XML verileri olarak yanıt veri döndürür
durum

İstek durumunu döndüren numara

  • 200: "Tamam"
  • 403: "Yasaklı"
  • 404: "Bulunamadı"

Tam liste için ziyaret edin Http Mesaj Referans Kılavuzu
statusText Durum metnini döndürür (örneğin "Tamam" veya "Bulunamadı")

onload özelliği

XMLHttpRequest kullanırken, yanıt alındığında çalışacak bir geri çağrı fonksiyonu tanımlayabilirsiniz

XMLHttpRequest nesnesinin onload Bu fonksiyonu tanımlayan özellikte

Örnek

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

Kişisel Deneyimleyin

Çoklu geri çağrı fonksiyonları

Web sitesinde birden fazla AJAX görevi varsa, bir XMLHttpRequest nesnesi çalıştıran bir fonksiyon oluşturulmalı ve her AJAX görevi için bir geri çağrı fonksiyonu oluşturulmalıdır

Fonksiyon çağrısı, URL ve yanıt hazır olduğunda çağrılacak fonksiyonu içermelidir

Örnek

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // Burada eylem
}
function myFunction2(xhttp) {
  // Burada eylem
}

onreadystatechange özelliği

readyState Özellik, XMLHttpRequest'in durumunu kaydeder

onreadystatechange Özellik, readyState değiştiğinde çalışacak bir geri çağrı fonksiyonu tanımlar

durum Özellik ve statusText Özellik, XMLHttpRequest nesnesinin durumunu kaydeder

Özellik Açıklama
onreadystatechange readyState özelliği değiştiğinde çağrılacak fonksiyonu tanımlar
readyState

XMLHttpRequest durumunu kaydet

  • 0: İstek başlatılmamış
  • 1: Sunucu bağlantısı kurulmuş
  • 2: İstek alınmış
  • 3: İstek işleniyor
  • 4: İstek tamamlanmış ve yanıt hazır
durum

İstek durumunu döndüren numara

  • 200: "Tamam"
  • 403: "Yasaklı"
  • 404: "Bulunamadı"

Tam liste için ziyaret edin Http Mesaj Referans Kılavuzu
statusText statusText

Dönüşüm statü metnini döndürür (örneğin "OK" veya "Bulunamadı").

her readyState değişiminde onreadystatechange fonksiyonu çağrılır. 4 ve status 200 için, yanıt hazır:

Örnek

function loadDoc() {
  const 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");
  xhttp.send();
}

Kişisel Deneyimleyin

onreadystatechange olayı dört kez (1-4) tetiklendi, her seferinde readyState bir kez değişti.