บทนำ 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() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
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
เบราว์เซอร์สมัยใหม่ (Fetch API)
เบราว์เซอร์สมัยใหม่สามารถใช้ Fetch API แทน XMLHttpRequest Object
อินเทอร์เฟซ Fetch API ช่วยให้เว็บเบราว์เซอร์ส่งคำขอ HTTP ไปยังเว็บเซิร์ฟเวอร์ได้
หากคุณใช้อ็อบเจ็กต์ XMLHttpRequest การดึงข้อมูลก็สามารถทำได้เช่นเดียวกันในวิธีที่ง่ายกว่า