AJAX - XMLHttpRequest

XMLHttpRequest object ใช้สำหรับการแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์

ส่งคำขอสู่เซิร์ฟเวอร์

ถ้าคุณต้องการส่งคำขอสู่เซิร์ฟเวอร์ เราใช้ XMLHttpRequest object ของ 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);

การส่งขอความร่วมมือทางอัตโนมัติเป็นปฏิวัติใหญ่สำหรับนักพัฒนาเว็บ หลายงานที่ทำงานบนเซิร์ฟเวอร์มีเวลาใช้เวลามาก ก่อน AJAX การดังกล่าวอาจทำให้โปรแกรมหยุดหรือหยุดทำงาน

ด้วยการส่งข้อมูลทางอัตโนมัติ JavaScript จะไม่ต้องรอคำตอบจากเซิร์ฟเวอร์ แต่สามารถ

  • ปฎิบัติสุดท้ายในขณะรอคำตอบจากเซิร์ฟเวอร์
  • จัดการคำตอบเมื่อเตรียมพร้อม

อาทิตย์ onreadystatechange

ผ่าน XMLHttpRequest object คุณสามารถกำหนดฟังก์ชันที่จะทำงานเมื่อการขอความร่วมมือได้รับคำตอบ

ฟังก์ชันนี้จะถูกประกาศใน XMLHttpResponse object 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 ใช้เพื่อทดสอบรวดเร็ว คุณยังจะพบคำขอที่เป็นเวลายืนยันในโค้ด JavaScript ที่เก่าแก่

เนื่องจากโค้ดจะรอเซิร์ฟเวอร์เสร็จ ดังนั้นไม่จำเป็นต้องมีฟังก์ชัน onreadystatechange

ตัวอย่าง

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

ทดสอบเอง

เราไม่แนะนำการใช้ XMLHttpRequest ที่เป็นเวลายืนยัน (async = false) เพราะ JavaScript จะหยุดทำงานจนกว่าเซิร์ฟเวอร์จะตอบกลับเสร็จ ถ้าเซิร์ฟเวอร์มีปัญหาหรือช้า โปรแกรมอาจหยุดทำงานหรือหยุด

XMLHttpRequest ที่เป็นเวลายืนยันกำลังถูกถอดออกจากมาตราฐานเว็บ แต่กระบวนการนี้อาจต้องใช้เวลาหลายปี

เครื่องมือพัฒนาที่สมัยใหม่สนับสนุนให้มีคำเตือนเกี่ยวกับการใช้คำขอที่เป็นเวลายืนยัน และเมื่อเกิดสถานการณ์นี้ อาจทิ้งความผิดพลาด InvalidAccessError