XML HttpRequest
เบราว์เซอร์ที่ทันสมัยทั้งหมดมีวัตถุ XMLHttpRequest ในตัวเพื่อขอข้อมูลจากเซิร์ฟเวอร์
วัตถุ XMLHttpRequest
สามารถใช้วัตถุ XMLHttpRequest เพื่อขอข้อมูลจากเว็บเซิร์ฟเวอร์
ออบเจ็กต์ XMLHttpRequest เป็นความฝันของนักพัฒนาเนื่องจากคุณสามารถ:
- อัปเดตหน้าเว็บโดยไม่ต้องโหลดหน้าซ้ำ
- ขอข้อมูลจากเซิร์ฟเวอร์ - หลังจากโหลดหน้าแล้ว
- รับข้อมูลจากเซิฟเวอร์ - หลังจากโหลดเพจแล้ว
- ส่งข้อมูลไปยังเซิร์ฟเวอร์ - ในพื้นหลัง
XMLHttpRequest ตัวอย่าง
เมื่อคุณพิมพ์อักขระในช่องป้อนข้อมูลด้านล่าง XMLHttpRequest จะถูกส่งไปยังเซิร์ฟเวอร์ และข้อเสนอแนะบางชื่อจะถูกส่งกลับ (จากเซิร์ฟเวอร์):
ตัวอย่าง
ตัวอย่างข้างต้นได้อธิบายไว้ในบท AJAX ของบทช่วยสอนนี้
การส่ง XMLHttpRequest
ไวยากรณ์ JavaScript ทั่วไปสำหรับการใช้วัตถุ XMLHttpRequest มีลักษณะดังนี้:
ตัวอย่าง
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
ตัวอย่างที่อธิบาย
บรรทัดแรกในตัวอย่างด้านบนสร้าง อ็อบเจ็กต์ XMLHttpRequest :
var xhttp = new XMLHttpRequest();
คุณสมบัติonreadystatechangeระบุฟังก์ชันที่จะดำเนินการทุกครั้งที่สถานะของวัตถุ XMLHttpRequest เปลี่ยนแปลง:
xhttp.onreadystatechange = function()
เมื่อ คุณสมบัติ readyStateเป็น 4 และ คุณสมบัติ สถานะ คือ 200 การตอบกลับจะพร้อม:
if (this.readyState == 4 && this.status == 200)
คุณสมบัติresponseTextส่งกลับการตอบกลับของเซิร์ฟเวอร์เป็นสตริงข้อความ
สตริงข้อความสามารถใช้เพื่ออัปเดตหน้าเว็บ:
document.getElementById("demo").innerHTML = xhttp.responseText;
คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับอ็อบเจ็กต์ XMLHttpRequest ในบท AJAX ของบทช่วยสอนนี้
Internet Explorer เวอร์ชันเก่า (IE5 และ IE6)
Internet Explorer เวอร์ชันเก่า (IE5 และ IE6) ไม่สนับสนุนอ็อบเจ็กต์ XMLHttpRequest
ในการจัดการ IE5 และ IE6 ให้ตรวจสอบว่าเบราว์เซอร์รองรับวัตถุ XMLHttpRequest หรือไม่ หรือสร้าง ActiveXObject:
ตัวอย่าง
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}