AJAX - Sunucu yanıtı

Kurs tavsiyesi:

readyState onreadystatechange özelliği

onreadystatechange özellik XMLHttpRequest'nin durumunu tutar.

status özellik, readyState değiştiğinde yürütülecek fonksiyonu tanımlar. Http Mesaj Referans Kılavuzu Özellik ve

Özellik Açıklama
onreadystatechange Özellik, XMLHttpRequest nesnesinin durumunu tutar.
readyState

readyState özelliği değiştiğinde çağrılacak fonksiyonu tanımlar.

  • XMLHttpRequest'nin durumunu kaydeder.
  • 0: İstek henüz başlatılmamış
  • 1: Sunucu bağlantısı kurulmuş
  • 2: İstek alınmış
  • 3: İstek işleniyor
status
  • 4: İstek tamamlanmış ve yanıt hazır
  • 200: "OK"
  • 403: "Yasaklı"

404: "Sayfa bulunamadı" Tam liste için ziyaret edin

Http Mesaj Referans Kılavuzu statusText

dönüş durum metni döndürür (örneğin "OK" veya "Not Found") Her zaman

readyState değişdiğinde onreadystatechange fonksiyonu çağrılır. readyState için 4vestatus için 200 içindeyken, yanıt hazır hale gelir:

Örnek

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(); 
}; 

Kendi Kendine Deneyin

Açıklama:onreadystatechange beş kez tetiklenir (0-4), her seferinde readyState tümü değişiyor.

Geri çağrı fonksiyonlarını kullanarak

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

Eğer web sitenizde birden fazla AJAX görevi varsa, bir XMLHttpRequest nesnesi oluşturmak için bir fonksiyon ve her AJAX görevi için bir geri çağrı fonksiyonu oluşturmalısınız.

Bu fonksiyon, URL'yi ve yanıtı alındığında çağrılacak fonksiyonu içermelidir.

Örnek

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    };
  };
  xhttp.open("GET", url, true);
  xhttp.send();
};
function myFunction1(xhttp) {
  // Burada eylem yapılır
 }; 
function myFunction2(xhttp) {
  // Burada eylem yapılır
 }; 

Kendi Kendine Deneyin

Sunucu yanıtı özellikleri

Özellik Açıklama
responseText Dizgi biçimindeki yanıtı almak
responseXML XML veri biçimindeki yanıtı almak

Sunucu yanıtı yöntemi

Yöntem Açıklama
getResponseHeader() Sunucudan belirli başlık bilgilerini döndürür
getAllResponseHeaders() Sunucudan tüm başlık bilgilerini döndürür

responseText özelliği

responseText Özellik, yanıtı JavaScript stringi olarak döndürür, bu yüzden böyle kullanabilirsiniz:

Örnek

document.getElementById("demo").innerHTML = xhttp.responseText;

Kendi Kendine Deneyin

responseXML özelliği

XMLHttpRequest nesnesi bir yerleşik XML ayrıştırıcıya sahiptir.

ResponseXML Özellik, yanıtı XML DOM nesnesi olarak döndürebilir.

Bu özelliği kullanarak, yanıtı XML DOM nesnesi olarak döndürebilirsiniz:解析 etmeXML DOM nesnesi için:

Örnek

istek dosyası music_list.xmlve yanıtı解析 etme:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  };
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "music_list.xml", true);
xhttp.send();

Kendi Kendine Deneyin

Bu eğitim bölümünde XML DOM hakkında daha fazla bilgi öğreneceksiniz.

getAllResponseHeaders() Methodu

getAllResponseHeaders() Method, sunucudan gelen yanıtta tüm başlık bilgilerini döndürür.

Örnek

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  };
};

Kendi Kendine Deneyin

getResponseHeader() Methodu

getResponseHeader() Method, sunucudan gelen yanıtta belirli başlık bilgilerini döndürür.

Örnek

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

Kendi Kendine Deneyin