AJAX - Respon Server

Rekomendasi kursus:

readyState atribut onreadystatechange

onreadystatechange atribut menyimpan status XMLHttpRequest.

status atribut mendefinisikan fungsi yang dieksekusi saat readyState berubah. Panduan pesan HTTP atribut dan

Properti Deskripsi
onreadystatechange atribut yang menyimpan status objek XMLHttpRequest.
readyState

mendefinisikan fungsi yang dipanggil saat atribut readyState berubah.

  • menyimpan status XMLHttpRequest.
  • 0: Permintaan belum diinisialisasi
  • 1: Koneksi server sudah dibangun
  • 2: Permintaan telah diterima
  • 3: Sedang menangani permintaan
status
  • 4: Permintaan selesai dan tanggapan siap
  • 200: "OK"
  • 403: "Dilarang"

404: "Halaman tidak ditemukan" Untuk daftar lengkap, kunjungi
Panduan pesan HTTP statusText

kembalikan status teks (contoh "OK" atau "Not Found") setiap

ketika readyState berubah, fungsi onreadystatechange akan dipanggil. readyState untuk 4,status untuk 200 jika, tanggapan siap:

Contoh

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

Coba Sendiri

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

Menggunakan fungsi balik

Fungsi balik adalah fungsi yang dipassing sebagai parameter ke fungsi lain.

Jika situs web Anda memiliki beberapa tugas AJAX, Anda seharusnya membuat fungsi untuk menjalankan objek XMLHttpRequest serta fungsi balik untuk setiap tugas AJAX.

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

Contoh

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

Coba Sendiri

Properti tanggapan server

Properti Deskripsi
responseText Mengambil data tanggapan dalam bentuk string
responseXML Mengambil data tanggapan dalam bentuk XML

Metode tanggapan server

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

Properti responseText

responseText Properti ini mengembalikan tanggapan server dalam bentuk string JavaScript, jadi Anda dapat menggunakannya seperti ini:

Contoh

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

Coba Sendiri

Properti responseXML

Objek XML HttpRequest memiliki parser XML bawaan.

ResponseXML dengan mengembalikan objek XML DOM tanggapan server.

Dengan properti ini, Anda dapat membalikkan tanggapanAnalisisuntuk objek XML DOM:

Contoh

Permintaan berkas music_list.xml，dan analisis tanggapan:

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

Coba Sendiri

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

Method getAllResponseHeaders()

getAllResponseHeaders() Method mengembalikan semua informasi header dari tanggapan server.

Contoh

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

Coba Sendiri

Method getResponseHeader()

getResponseHeader() Method mengembalikan informasi header khusus dari tanggapan server.

Contoh

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

Coba Sendiri