AJAX คืออะไร?
AJAX เป็นความฝันของนักพัฒนา เพราะคุณสามารถ:
- อ่านข้อมูลจากเว็บเซิร์ฟเวอร์ - หลังจากโหลดหน้าเว็บแล้ว
- อัปเดตหน้าเว็บโดยไม่ต้องโหลดหน้าซ้ำ
- ส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ - ในพื้นหลัง
ตัวอย่าง AJAX
Let AJAX change this text
อธิบายตัวอย่าง AJAX
หน้า HTML
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
หน้า HTML ประกอบด้วยส่วน <div> และ <ปุ่ม>
ส่วน <div> ใช้เพื่อแสดงข้อมูลจากเซิร์ฟเวอร์
<button> เรียกใช้ฟังก์ชัน (หากมีการคลิก)
ฟังก์ชันร้องขอข้อมูลจากเว็บเซิร์ฟเวอร์และแสดงข้อมูลดังกล่าว:
ฟังก์ชัน loadDoc()
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();
}
AJAX คืออะไร?
AJAX = J avaScript A และX ML แบบ ซิงโครนัส
AJAX ไม่ใช่ภาษาโปรแกรม
AJAX ใช้การรวมกันของ:
- ออบเจ็กต์ XMLHttpRequest ในตัวของเบราว์เซอร์ (เพื่อขอข้อมูลจากเว็บเซิร์ฟเวอร์)
- JavaScript และ HTML DOM (เพื่อแสดงหรือใช้ข้อมูล)
AJAX เป็นชื่อที่ทำให้เข้าใจผิด แอปพลิเคชัน AJAX อาจใช้ XML ในการขนส่งข้อมูล แต่การส่งข้อมูลเป็นข้อความธรรมดาหรือข้อความ JSON ก็เป็นเรื่องปกติ
AJAX อนุญาตให้อัปเดตหน้าเว็บแบบอะซิงโครนัสโดยการแลกเปลี่ยนข้อมูลกับเว็บเซิร์ฟเวอร์เบื้องหลัง ซึ่งหมายความว่าสามารถอัปเดตบางส่วนของหน้าเว็บได้โดยไม่ต้องโหลดซ้ำทั้งหน้า
AJAX ทำงานอย่างไร
- 1. เหตุการณ์เกิดขึ้นในหน้าเว็บ (โหลดหน้าแล้วคลิกปุ่ม)
- 2. วัตถุ XMLHttpRequest ถูกสร้างขึ้นโดย JavaScript
- 3. ออบเจ็กต์ XMLHttpRequest ส่งคำขอไปยังเว็บเซิร์ฟเวอร์
- 4. เซิร์ฟเวอร์ประมวลผลคำขอ
- 5. เซิฟเวอร์ส่งคำตอบกลับมาที่หน้าเว็บ
- 6. การตอบสนองถูกอ่านโดย JavaScript
- 7. การดำเนินการที่เหมาะสม (เช่น การอัปเดตหน้า) ดำเนินการโดย JavaScript
บทช่วยสอน AJAX แบบเต็ม
นี่เป็นคำอธิบายสั้นๆ ของ AJAX
สำหรับบท ช่วยสอน AJAX แบบเต็ม ให้ไปที่W3Schools AJAX Tutorial
สำหรับตัวอย่าง AJAX เพิ่มเติม ให้ไปที่W3Schools AJAX Examples