บทนำ 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_info.txt" ที่ใช้ในตัวอย่างข้างต้น เป็นไฟล์ข้อความธรรมดาและมีลักษณะดังนี้:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
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