AJAX - Server Response

ຄວາມ onreadystatechange

readyState ຄວາມສະຖານະ XMLHTTPRequest.

onreadystatechange ບັນທຶກຫົວຫນ້າທີ່ຈະຖືກເອິ້ນເມື່ອ readyState ປ່ຽນແປງ.

status ຄວາມ statusText ຄວາມສະຖານະ XMLHTTPRequest.

Attribute ການອະທິບາຍ
onreadystatechange ບັນທຶກຫົວຫນ້າທີ່ຈະຖືກເອິ້ນເມື່ອ readyState 属性ປ່ຽນແປງ.
readyState

ບັນທຶກຄວາມສະຖານະ XMLHttpRequest.

  • 0: ການຮຽກຮ້ອງຍັງບໍ່ຖືກຈັດຕັ້ງ.
  • 1: ການຄວາມກັບຄືນກັບທະນາຄານໄດ້ຖືກຈັດຕັ້ງ.
  • 2: ການຮຽກຮ້ອງໄດ້ຖືກຮັບຮອງ.
  • 3: ການດໍາເນີນການຮຽກຮ້ອງກຳນົດການ.
  • 4: ການຮຽກຮ້ອງໄດ້ສຳເລັດ ແລະຄວາມສະຖານະທີ່ຈະບໍ່ຖືກນຳໃຊ້ອີກ.
status
  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Page not found"

ສຳຫຼັບລາຍການທັງໝົດ, ຂໍ້ສະເໜີ ການຫົວຫນ້າຂອງຂໍ້ຄວາມ HTTP
statusText ກັບຄືນທີ່ກຳນົດຄວາມສະຖານະ (ອີງຕາມ "OK" ຫຼື "Not Found")

ກັບຄືນ ບໍ່ວ່າ

ບໍ່ວ່າ readyState ປ່ຽນແປງ, ຫົວຫນ້າການ onreadystatechange ຈະຖືກເອິ້ນ. readyState ສຳຫຼັບ 4,status ສຳຫຼັບ 200 ເມື່ອມີການປ່ຽນແປງ readyState:

ຄວາມປະສົງ

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

ພະຍາຍາມດຽວນຳ

ລົງສັນຍາ:onreadystatechange ຖືກຈຸດສະນະຫ້າຄັ້ງ(0-4), ແຕ່ລະຄັ້ງ readyState ທັງໝົດເປັນການປ່ຽນແປງ.

ນຳໃຊ້ຫົວຫນ້າການກັບຄືນ

ຫົວຫນ້າການກັບຄືນແມ່ນຫົວຫນ້າການທີ່ຖືກສົ່ງເຂົ້າໃຫ້ຫົວຫນ້າການອື່ນ.

ຖ້າທີ່ເວັບໄຊຂອງທ່ານມີຫຼາຍບັນຫາ AJAX, ທ່ານຄວນສ້າງຫົວຫນ້າການດໍາເນີນ XMLHttpRequest ແລະຫົວຫນ້າການກັບຄືນສຳຫຼັບບັນຫາ AJAX ທຸກຢ່າງ.

ກົນລະຍຸດຂອງຕົວອອກທີ່ຕ້ອງມີ URL ແລະກົນລະຍຸດທີ່ຈະເລື່ອງຫຼັງຈາກການຕອບຮັບຈະຈະຕອບຮັບ.

ຄວາມປະສົງ

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) {
  // Action here
 }; 
function myFunction2(xhttp) {
  // Action here
 };

ພະຍາຍາມດຽວນຳ

Attribute ການຕອບຮັບຂອງພະນັກງານ

Attribute ການອະທິບາຍ
responseText ການຮຽກຮ້ອງບັນດາຂໍ້ມູນທີ່ມີຮູບແບບ string:
responseXML ການຮຽກຮ້ອງບັນດາຂໍ້ມູນທີ່ມີຮູບແບບ XML:

Method ການຕອບຮັບຂອງພະນັກງານ

ກົນລະຍຸດ ການອະທິບາຍ
getResponseHeader() ສິ່ງຂໍ້ມູນຫົວຂໍ້ພາຍໃນພະນັກງານ:
getAllResponseHeaders() ສິ່ງຂໍ້ມູນຫົວຂໍ້ຂອງພະນັກງານທີ່ກັບຄືນຈາກພະນັກງານ:

responseText attribute

responseText attribute ທີ່ບອກກັບ JavaScript string format ຂອງການຕອບຮັບຂອງພະນັກງານ, ເຊິ່ງທ່ານສາມາດນຳໃຊ້ນັ້ນແບບນີ້:

ຄວາມປະສົງ

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

ພະຍາຍາມດຽວນຳ

responseXML attribute

XML HttpRequest Object ມີ XML parser ທີ່ຢູ່ໃນການບໍລິຫານ.

ResponseXML ປະສົມປະກອບ

ນຳໃຊ້ປະສົມປະກອບນີ້ເພື່ອສາມາດທີ່ຈະຕອບຮັບຂອງການຕອບຮັບຈາກ XML DOM Object.ການກວດສອບສຳລັບ XML DOM Object:

ຄວາມປະສົງ

ການຮຽກຮ້ອງບັນດາສະໜາມ: music_list.xmlທີ່ມີຄວາມຕາຍຫຼາຍຂອງການຕອບຮັບຂອງພະນັກງານ:

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

ພະຍາຍາມດຽວນຳ

ທ່ານຈະຮຽນຫຼາຍກວ່າຫຼາຍຂອງ XML DOM ໃນຫົວຂໍ້ DOM ຂອງການສອນນີ້。

getAllResponseHeaders() ການກັບຄືນ getAllResponseHeaders()

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

ພະຍາຍາມດຽວນຳ