AJAX เป็นความฝันของนักพัฒนาเพราะคุณสามารถ:
- อัพเดทหน้าเว็บโดยไม่ต้องโหลดหน้าเว็บ
- ขอข้อมูลจากเซิร์ฟเวอร์ - หลังจากที่มีการโหลดหน้า
- ได้รับข้อมูลจากเซิร์ฟเวอร์ - หลังจากที่มีการโหลดหน้า
- ส่งข้อมูลไปยังเซิร์ฟเวอร์ - ในพื้นหลัง
ลองตัวเองตัวอย่างในทุกบท
ในทุกบทคุณสามารถแก้ไขตัวอย่างออนไลน์และคลิกที่ปุ่มเพื่อดูผลลัพธ์
AJAX ตัวอย่างอธิบาย
HTML หน้า
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadDoc()">Change Content</button>
</body>
</html>
หน้า HTML มี <div> ส่วนและ <button>
<div> ส่วนที่ใช้ในการแสดงข้อมูลจากเซิร์ฟเวอร์
<button> เรียกฟังก์ชั่น (ถ้ามีการคลิก)
ฟังก์ชั่นการร้องขอข้อมูลจากเว็บเซิร์ฟเวอร์และแสดง:
loadDoc ฟังก์ชั่น ()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
เริ่มต้นเรียนรู้ AJAX ในขณะนี้!