บทนำของ AJAX

สารบัญ

    แสดงสารบัญ

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

  • อ่านข้อมูลจากเว็บเซิร์ฟเวอร์ - หลังจากโหลดเพจแล้ว

  • อัปเดตหน้าเว็บโดยไม่ต้องโหลดหน้าซ้ำ

  • ส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ - ในพื้นหลัง

ตัวอย่าง AJAX

ให้ AJAX เปลี่ยนข้อความนี้



ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

อธิบายตัวอย่าง 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> ส่วนที่ใช้เพื่อแสดงข้อมูลจากเซิร์ฟเวอร์

<ปุ่ม> เรียกใช้ฟังก์ชัน (หากมีการคลิก)

ฟังก์ชั่นขอข้อมูลจากเว็บ เซิร์ฟเวอร์และแสดง:

ฟังก์ชั่น 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=Aซิงโครนัส JavaScript And Xมล.

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 การดึงข้อมูลก็สามารถทำได้ด้วยวิธีเดียวกันที่ง่ายกว่า