AJAX - 服务器响应

Atribut onreadystatechange

readyState Atribut yang menampung status XMLHttpRequest.

onreadystatechange Atribut yang mendefinisikan fungsi yang dieksekusi saat readyState berubah.

status Atribut dan statusText Atribut yang menampung status objek XMLHttpRequest.

Properti Deskripsi
onreadystatechange Didefiniskan fungsi yang dipanggil saat atribut readyState berubah.
readyState

menyimpan status XMLHttpRequest.

  • 0: Permintaan belum diinisialisasi
  • 1: Koneksi server sudah dibangun
  • 2: Permintaan telah diterima
  • 3: Sedang memproses permintaan
  • 4: Permintaan selesai dan respons siap
status
  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Page not found"

Untuk daftar penuh, silakan kunjungi Panduan Pesan HTTP
statusText mengembalikan teks status (contoh "OK" atau "Not Found")

setiap kali readyState berubah, fungsi onreadystatechange akan dipanggil.

ketika readyState untuk 4,status untuk 200 pada saat, respons siap:

实例

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

亲自试一试

Keterangan:onreadystatechange diaktifkan lima kali (0-4), setiap kali readyState semua berubah.

Penggunaan fungsi kembalian

Fungsi kembalian adalah fungsi yang dihantar sebagai parameter ke fungsi lain.

Jika laman web anda mempunyai beberapa tugas AJAX, anda seharusnya membuat fungsi untuk menjalankan objek XMLHttpRequest serta fungsi kembalian untuk setiap tugas AJAX.

Fungsi ini harus mengandung URL serta fungsi yang dipanggil saat respons siap.

实例

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) {
  // Tindakan disini
 } 
function myFunction2(xhttp) {
  // Tindakan disini
 }

亲自试一试

Properti respons server

Properti Deskripsi
responseText Dapatkan data respons dalam bentuk string
responseXML Dapatkan data respons dalam bentuk XML

Metode respons server

Metode Deskripsi
getResponseHeader() Kembalikan informasi header khusus dari server
getAllResponseHeaders() Kembalikan semua informasi header dari server

Properti responseText

responseText Properti ini mengembalikan respons server dalam bentuk string JavaScript, jadi anda dapat menggunakannya seperti ini:

实例

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

亲自试一试

Properti responseXML

Objek XML HttpRequest memiliki parser XML bawaan.

ResponseXML dengan mengembalikan objek XML DOM ke server respons.

Dengan properti ini, anda dapat mengembalikan responsAnalisisuntuk objek XML DOM:

实例

permintaan berkas music_list.xml，dan analisiskan responsnya:

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

亲自试一试

Anda akan belajar lebih banyak tentang XML DOM di bab DOM ini tutorial ini.

getAllResponseHeaders() 方法

getAllResponseHeaders() 方法返回所有来自服务器响应的头部信息。

实例

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

亲自试一试

getResponseHeader() 方法

getResponseHeader() 方法返回来自服务器响应的特定头部信息。

实例

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

亲自试一试