ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
 

AJAXเกี่ยวกับการสอน


AJAX เป็นความฝันของนักพัฒนาเพราะคุณสามารถ:

  • อัพเดทหน้าเว็บโดยไม่ต้องโหลดหน้าเว็บ
  • ขอข้อมูลจากเซิร์ฟเวอร์ - หลังจากที่มีการโหลดหน้า
  • ได้รับข้อมูลจากเซิร์ฟเวอร์ - หลังจากที่มีการโหลดหน้า
  • ส่งข้อมูลไปยังเซิร์ฟเวอร์ - ในพื้นหลัง

ลองตัวเองตัวอย่างในทุกบท

ในทุกบทคุณสามารถแก้ไขตัวอย่างออนไลน์และคลิกที่ปุ่มเพื่อดูผลลัพธ์

ตัวอย่าง AJAX

Let AJAX change this text

ลองตัวเอง»


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 ในขณะนี้!