AJAX - XMLHttpRequest

XMLHttpRequest ເປັນວັດຖຸທີ່ໃຊ້ເພື່ອສົ່ງຂໍ້ມູນຕາມກັບທີ່ສຳນັກງານ.

ສົ່ງຂໍ້ມູນໄປຫາທີ່ສຳນັກງານ

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

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
ການໃຊ້ ການອະທິບາຍ
open(method, url, async)

ກົດລະບຽບຮູບແບບການສະເໜີ

  • method:ຮູບແບບຂອງການສະເໜີ: GET ຫຼື POST
  • url:ທີ່ຕັ້ງຂອງທີ່ສຳນັກງານ (ເອກະສານ)
  • async:true (ການໂດຍບໍ່ລ່ວງ) ຫຼື false (ການໂດຍລະບຽບ)
send() ສົ່ງຂໍ້ມູນໄປຫາທີ່ສຳນັກງານ (ສຳນັກງານ GET)
send(string) ສົ່ງຂໍ້ມູນໄປຫາທີ່ສຳນັກງານ (ສຳນັກງານ POST)

GET ຫຼື POST?

GET ມີຄວາມງ່າຍ ແລະ ບໍ່ຫຼາຍຫຼາຍກວ່າ POST, ສາມາດໃຊ້ໃນການຫຼາຍຫຼາຍຄັ້ງ.

ແຕ່ພຽງແຕ່ກະຈາຍ POST ໃນການທີ່ກ່າວຫຼັງນັ້ນ:

  • ສາຍການເບິ່ງບັນນາທິດບໍ່ໄດ້ເປັນການເລືອກ (ການປັບປຸງບັນນາທິດ ຫຼື ຖານຂໍ້ມູນໃນທີ່ສຳນັກງານ)
  • ສົ່ງຂໍ້ມູນຫຼາຍຫາຍໃຫ້ໃຫ້ທີ່ສຳນັກງານ (POST ບໍ່ມີຄວາມຄຸມຂະໜາດ)
  • ສົ່ງຂໍ້ມູນທີ່ນັກບັນທຶກ (ສາມາດມີຄວັນຊັກຄັບ) POST ມີພະລັງແຮງຫຼາຍ ແລະ ປອດໄພຫຼາຍກວ່າ GET

ການສະເໜີ GET

ການສະເໜີ GET ເດີມຄວາມ:

ຄວາມນັບເຄົາ

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

ການທົດລອງດ້ວຍຕົວຕົນ

ໃນຄຳນວຍຄວາມທີ່ກ່າວກ່ອນ, ທ່ານອາດຄົບຄອບຄັບພົບຜົນຮັບຄະແນນຮອງ. ເພື່ອຫຼີກລ່ຽງຄວາມດັ່ງກ່າວ, ກະຈາຍ ID ທີ່ມີຄວາມຈິງພຽງຢູ່ URL:

ຄວາມນັບເຄົາ

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

ການທົດລອງດ້ວຍຕົວຕົນ

ຖ້າທ່ານຕ້ອງສົ່ງຂໍ້ມູນທີ່ GET, ກະຈາຍເຂົ້າຄູ່ມູນດັ່ງກ່າວໃນ URL:

ຄວາມນັບເຄົາ

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

ການທົດລອງດ້ວຍຕົວຕົນ

ການສະເໜີ POST

ການສະເໜີ POST ເດີມຄວາມ:

ຄວາມນັບເຄົາ

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

ການທົດລອງດ້ວຍຕົວຕົນ

ຖ້າທ່ານຕ້ອງ POST ຂໍ້ມູນເປັນຮູບແບບ HTML ຟອມ, ກະຈາຍ setRequestHeader() ເພີ່ມ HTTP ເປັນຫົວ. ກະຈາຍ send() ກົດລະບຽບວ່າທີ່ທ່ານຕ້ອງສົ່ງຂໍ້ມູນ:

ຄວາມນັບເຄົາ

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

ການທົດລອງດ້ວຍຕົວຕົນ

ການໃຊ້ ການອະທິບາຍ
setRequestHeader(header, value)

ການເພີ່ມຫົວຂໍ້ HTTP ກັບຂໍ້ມູນຂໍ້ມູນ

  • header：ການຈະປະຕິບັດຄວາມສົມບູນ
  • value：ການຈະປະຕິບັດຄວາມສົມບູນ

url - ບັນດາເອກະສານທີ່ຢູ່ທີ່ຜູ້ບໍລິຫານ

ການໃຊ້ open() url ຄວາມຕ້ອງການຕ້ອງໄດ້ກວດສອບ

xhttp.open("GET", "ajax_test.asp", true);

ບັນດາເອກະສານສາມາດເປັນແບບໃດກໍ່ໄດ້ທີ່ .txt ແລະ .xml ຫຼື ບັນດາເອກະສານຫົວໜ້າຜູ້ບໍລິຫານ ເຊັ່ນ .asp ແລະ .php (ພວກມັນສາມາດດຳເນີນການໃນຜູ້ບໍລິຫານກ່ອນຈະຖືກສົ່ງຄຳຕອບຄັດໃຫ້)

ບໍ່ຕ້ອງລໍຖ້າຄວາມສົມບູນ - true ຫຼື false?

ສຳລັບການສົ່ງຂໍ້ມູນອັດຕະໂນມັດopen() ຂອງການໃຊ້ async ຄວາມຕ້ອງການຕ້ອງໄດ້ກວດສອບ true:

xhttp.open("GET", "ajax_test.asp", true);

ການສົ່ງຂໍ້ມູນອັດຕະໂນມັດທີ່ບໍ່ຕ້ອງລໍຖ້າຄວາມສົມບູນຈາກຜູ້ບໍລິຫານແມ່ນຄວາມກ້າວໜ້າຫຼາຍຫຼາຍສຳລັບນັກພັດທະນາເວັບໄຊ

ຜ່ານການສົ່ງຂໍ້ມູນອັດຕະໂນມັດທີ່ບໍ່ຕ້ອງລໍຖ້າຄວາມສົມບູນຈາກຜູ້ບໍລິຫານ

  • ຈະດຳເນີນການສັນຍານອື່ນໆໃນຂະນະທີ່ພະເຊີນຢູ່ການຄວາມສົມບູນຈາກຜູ້ບໍລິຫານ
  • ຈະປະຕິບັດຄວາມສົມບູນເມື່ອມີຄວາມສົມບູນ

onreadystatechange

ຜ່ານ XMLHttpRequest ທີ່ທ່ານສາມາດກໍານົດການຈະປະຕິບັດພວກມັນເມື່ອການຂໍຂໍ້ມູນຮັບຄວາມສົມບູນ

ການຈະປະຕິບັດພວກມັນແມ່ນພາຍໃນ XMLHttpResponse onreadystatechange ບັນດານະໂຍບາຍທີ່ກໍານົດໄວ້:

ຄວາມນັບເຄົາ

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 ໃນຫຼັກວັດທະນະທີ່ຕໍ່ມາ

ການຂໍຂໍ້ມູນສະພາບນິວັນຈັນ

ສຳລັບການດຳເນີນການຂໍຂໍ້ມູນສະພາບນິວັນຈັນ open() ການກວດສອບສະເພາະຂອງຫົວຫຼັກ false:

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

ບາງຄັ້ງ async = false ໃຊ້ເພື່ອການທົດລອງທີ່ວ່າຄືນ. ພວກເຈົ້າຈະພົບການສະເໝີທີ່ເປັນການສະເໝີທີ່ສະໄໝນີ້.

ຍ້ອນວ່າລະບຽບຈະລໍຖ້າຈົນກວ່າຜູ້ບໍລິຫານໄດ້ຮັບຄຳຕອບ ບໍ່ຕ້ອງມີຫົວຫຼັກ onreadystatechange:

ຄວາມນັບເຄົາ

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

ການທົດລອງດ້ວຍຕົວຕົນ

ພວກເຮົາບໍ່ອະນຸຍາດ XMLHttpRequst (async = false) ຍ້ອນ JavaScript ຈະຢຸດການດຳເນີນຈົນກວ່າຜູ້ບໍລິຫານໄດ້ຮັບຄຳຕອບ. ຖ້າຜູ້ບໍລິຫານຫຼາຍຫຼືຫຼີກຫຼາຍ ຄອັງຄາບຈະຢຸດການດຳເນີນຫຼືຢຸດການດຳເນີນ.

XMLHttpRequest ທີ່ສະເໝີແມ່ນກຳລັງຖືກເພີກຖອນຈາກມາດຕະຖານວຽກໄອ້ພີມ ແຕ່ຂະບວນການນີ້ອາດຈະຕ້ອງຫຼາຍປີ.

ອຸປະກອນພັດທະນາສະໄໝນີ້ ໄດ້ຮັບການກະຕຸ້ນທີ່ຈະແຈ້ງເຕືອນການນໍາໃຊ້ຂໍ້ສານການຮັບຮອງທີ່ເປັນການສະເໝີ ແລະ ເມື່ອມັນເກີດຂຶ້ນ ອາດປະກອບຂຶ້ນຂໍ້ບັນຫາ InvalidAccessError.