AJAX - XMLHttpRequest 对象

XMLHTTPRequest ໂອອວຄູມແມ່ນພື້ນຖານຂອງ AJAX.

  1. 创建 XMLHttpRequest 对象
  2. 定义回调函数
  3. ເປີດ XMLHTTPRequest ໂອອວຄູມ
  4. ສົ່ງຂໍ້ຫາໃຫ້ບັນຊີທະນາຄານ

XMLHttpRequest 对象

ທຸກຄອມພິວເຕີຕ່າງໆທີ່ມີຢູ່ປັດຈຸບັນທັງໝົດສາມາດສະໜັບສະໜູນ. XMLHttpRequest 对象。

XMLHttpRequest ໂອອວຄູມປະກອບສາມາດນຳໃຊ້ເພື່ອປ່ຽນປ່ຽນຂໍ້ມູນກັບ Web ເຊີເວຍ. ນີ້ຫວັງວ່າສາມາດປ່ຽນແປງສ່ວນຫນື່ງຂອງເວັບໄຊທີ່ບໍ່ຕ້ອງຂັບຂວາງບັນຊີທັງໝົດ.

创建 XMLHttpRequest 对象

所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都有内置的 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable = new XMLHttpRequest();

定义回调函数

ວິທີກັບການໂຕ້ວາງທີ່ຈະເຮັດຫນັງທີ່ຂໍ້ມູນພ້ອມກັບ

ຫນັງວິທີກັບການໂຕ້ວາງທີ່ຈະເຮັດຫນັງທີ່ຂໍ້ມູນພ້ອມກັບ

xhttp.onload = function() {
  // ທີ່ຈະເຮັດຫນັງທີ່ຂໍ້ມູນພ້ອມກັບ
}

ສົ່ງຂໍ້ມູນ

ຖ້າທ່ານຕ້ອງສົ່ງຂໍ້ມູນໄປຫາສະຖານນີທີ່ໃຊ້ XMLHTTPRequest ທີ່ໃຊ້ open() ແລະ send() ວິທີການ：

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

ບົດສະຫຼຸບ

// ສ້າງ XMLHTTPRequest ອັນເທິງຄັນໃໝ່
const xhttp = new XMLHttpRequest();
// ການອະທິບາຍຫົວວິທີກັບການໂຕ້ວາງ
xhttp.onload = function() {
  // ທ່ານສາມາດໃຊ້ຂໍ້ມູນທີ່ນັ້ນຢູ່ບ່ອນນີ້
}
// ສົ່ງຂໍ້ມູນຂອງການຂໍ້ມູນ
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

ທຳການທີ່ເປັນຕົວຕົນ

ການເຂົ້າເຖິງອີກຢ່າງຫນັງຫນົງຂອງອີກຂອບເຂດ

ຍ້ອນເຫດການຄວາມປອດໄພໃນປະຈຸບັນການເບິ່ງຄືນຂອງສະຖານນີອື່ນບໍ່ອະນຸຍາດການເຂົ້າເຖິງອີກຢ່າງຫນັງຫນົງ。

ນີ້ຫມາຍຄວາມວ່າເວັບໄຊແລະເອມເລກ XML ທີ່ທ່ານພະຍາຍາມດັງຂໍ້ມູນຕ້ອງຢູ່ໃນສະຖານນີດຽວກັນ。

ຕົວຢ່າງທີ່ມີໃນ CodeW3C.com ແມ່ນເປັນ XML ທີ່ເປີດຢູ່ໃນຂອບເຂດ CodeW3C.com。

ຖ້າທ່ານຕ້ອງມາໃຊ້ຕົວຢ່າງຂອງພວກເຮົາໃນໜຶ່ງໃນເວັບໄຊຂອງທ່ານ，ເອມເລກ XML ທີ່ທ່ານເອົາມານັ້ນຕ້ອງຢູ່ໃນສະຖານນີຂອງທ່ານ。

XMLHTTPRequest ອັນເທິງຄັນໃໝ່

ວິທີການ ການອະທິບາຍ
new XMLHttpRequest() ສ້າງ XMLHTTPRequest ອັນເທິງຄັນໃໝ່。
abort() ຍົກເລີກຂໍ້ມູນຂອງການຂໍ້ມູນປະຈຸບັນ。
getAllResponseHeaders() ກັບຄືນຂໍ້ມູນຫນັງ
getResponseHeader() ກັບຄືນຂໍ້ມູນຫນັງທີ່ສະເພາະ
open(method, url, async, user, psw)

ກຳນົດຂໍ້ມູນຂອງການຂໍ້ມູນ。

  • method：ຊະນິດຂໍ້ມູນ GET ຫລື POST
  • url：ທີ່ຕັ້ງຂອງບັນຊີ
  • async：true (ການເຮັດງານທີ່ບໍ່ຕ້ອງການ) ຫລື false (ການເຮັດງານທີ່ຕ້ອງການ)
  • user：ຊື່ຜູ້ນຳໃຊ້
  • psw：ຄວາມປອດໄພ
send() ສົ່ງຂໍ້ມູນໄປຫາສະຖານນີທີ່ໃຊ້ສຳລັບການຂໍ້ມູນ GET。
send(string) ສົ່ງຂໍ້ມູນໄປຫາສະຖານນີທີ່ໃຊ້ສຳລັບການຂໍ້ມູນ POST。
setRequestHeader() ເພີ່ມຕົວອອກ/ຄູ່ມູນໄວ້ໃນຫົວຂໍ້ຫົວຫນັງທີ່ຈະສົ່ງໄປສົ່ງມູນ。

ທະວີບ XMLHTTPRequest

ປະສົງ ການອະທິບາຍ
onload ການອະທິບາຍຫົວວິທີທີ່ຈະເວັບໃຊ້ເມື່ອການຮັບຂໍ້ມູນຂອງການບັນທຶກ。
onreadystatechange ການອະທິບາຍຫົວຂໍ້ຂອງຫົວວິທີທີ່ຈະເວັບໃຊ້ເມື່ອຄວາມສະຫງົບ readyState ທີ່ປ່ຽນແປງ。
readyState

ການຮັກສາສະຖານະຂອງ XMLHttpRequest

  • 0: ການຮຽກຮ້ອງຍັງບໍ່ໄດ້ກຳນົດ
  • 1: ສາຍການເຊື່ອມຕໍ່ທີ່ສະຖານະຖານນີ້ໄດ້ສ້າງຂຶ້ນ
  • 2: ການຮຽກຮ້ອງໄດ້ຮັບ
  • 3: ກຳລັງກຳນົດການຮຽກຮ້ອງ
  • 4: ການຮຽກຮ້ອງໄດ້ສຳເລັດແລະການຕອບຮັບໄດ້ກຽມພ້ອມ
responseText ກັບຂໍ້ມູນໃນຮູບແບບສະເພາະ
responseXML ກັບຂໍ້ມູນ XML
status

ການກັບຄືນລະດັບສະຖານະຂອງການຮຽກຮ້ອງ

  • 200: "OK"
  • 403: "ຫວງຫ້າມ"
  • 404: "ບໍ່ພົບ"

ສຳລັບລາຍການທັງໝົດຫາການຢ້ຽມ ການອອກນິວວັດ HTTP
statusText ກັບຄຳຕອບສະຖານະ (ເປັນຕົວຢ່າງ "OK" ຫຼື "ບໍ່ພົບ")

onload

ຖ້າຈະໃຊ້ XMLHttpRequest ທ່ານສາມາດກໍານົດຫົວຫຼັກກັບການກະທຳຕອນທີ່ການຮຽກຮ້ອງຈະຮັບຄຳຕອບ

ກະວຍດັງ XMLHttpRequest onload ການກໍານົດຫົວຫຼັກນີ້

ບົດສະຫຼຸບ

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

ທຳການທີ່ເປັນຕົວຕົນ

ຫົວຫຼັກກັບການຄວບຄຸມ

ຖ້າມີການຄວບຄຸມ AJAX ຫຼາຍຫຼັງໃນເວັບໄຊຫນັງການສ້າງຫົວຫຼັກທີ່ຈະກຳນົດ XMLHttpRequest ແລະສ້າງຫົວຫຼັກກັບການຄວບຄຸມ AJAX ທຸກຫຼັງ

ການເອິ້ນຫົວຫຼັກຄວນບັນຈຸ URL ແລະຫົວຫຼັກທີ່ຈະເອິ້ນເມື່ອການຕອບຮັບຈະກຽມພ້ອມ

ບົດສະຫຼຸບ

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) {
  // ນີ້ແມ່ນການກະທຳ
}
function myFunction2(xhttp) {
  // ນີ້ແມ່ນການກະທຳ
}

onreadystatechange

readyState ປະສົງການຮັກສາສະຖານະຂອງ XMLHttpRequest

onreadystatechange ປະສົງການກໍານົດຫົວຫຼັກທີ່ຈະເອິ້ນຕອນທີ່ readyState ປ່ຽນແປງ

status ປະສົງ ແລະ statusText ປະສົງການຮັກສາສະຖານະຂອງ XMLHttpRequest

ປະສົງ ການອະທິບາຍ
onreadystatechange ການກໍານົດຫົວຫຼັກທີ່ຈະເອິ້ນຕອນທີ່ readyState 属性ປ່ຽນແປງ
readyState

ການຮັກສາສະຖານະຂອງ XMLHttpRequest

  • 0: ການຮຽກຮ້ອງຍັງບໍ່ໄດ້ກຳນົດ
  • 1: ສາຍການເຊື່ອມຕໍ່ທີ່ສະຖານະຖານນີ້ໄດ້ສ້າງຂຶ້ນ
  • 2: ການຮຽກຮ້ອງໄດ້ຮັບ
  • 3: ກຳລັງກຳນົດການຮຽກຮ້ອງ
  • 4: ການຮຽກຮ້ອງໄດ້ສຳເລັດແລະການຕອບຮັບໄດ້ກຽມພ້ອມ
status

ການກັບຄືນລະດັບສະຖານະຂອງການຮຽກຮ້ອງ

  • 200: "OK"
  • 403: "ຫວງຫ້າມ"
  • 404: "ບໍ່ພົບ"

ສຳລັບລາຍການທັງໝົດຫາການຢ້ຽມ ການອອກນິວວັດ HTTP
statusText statusText

ກັບຂໍ້ຄວາມສະພາບ (ອີງຕາມ "OK" ຫຼື "Not Found").

ເມື່ອ readyState ປ່ຽນແປງ, onreadystatechange ຈະຖືກເອິ້ນຕອບຮັບຄັ້ງຫນຶ່ງ. 4 ແລະ status ຈະເປັນ: 200 ເມື່ອ, ການຕອບຮັບຈະຖືກກະຕຸ້ນ:

ບົດສະຫຼຸບ

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

ທຳການທີ່ເປັນຕົວຕົນ

onreadystatechange ເຫດການຖືກກະຕຸ້ນສີ່ຄັ້ງ(1-4), ແຕ່ລະຄັ້ງກະຕຸ້ນ readyState ຄັ້ງຫນຶ່ງ.