AJAX นิยาย

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

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

AJAX ตัวอย่าง

คลิกที่ปุ่มด้านล่างเพื่อให้ Ajax เปลี่ยนข้อความนี้:

ทดลองด้วยตัวเอง

อุดมการณ์ AJAX และอธิบาย

เว็บเพจ HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>ให้ AJAX เปลี่ยนข้อความนี้</h2>
  <button type="button" onclick="loadDoc()">เปลี่ยนข้อความ</button>
</div>
</body>
</html>

เว็บเพจนี้มี <div> และ <button>

<div>ใช้ในการแสดงข้อมูลจากเซิร์ฟเวอร์

<button>เรียกฟังก์ชัน (เมื่อมันถูกคลิก)

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

Function 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?

AJAX = Asynchronous JvaScript And XML.

AJAX ไม่ใช่ภาษาเขียนแคมเพิล

AJAX รวมถึง

  • XMLHttpRequest สิ่งที่มีในตัวตนของเบราเซอร์ (ขอข้อมูลจากเซิร์ฟเวอร์เว็บ)
  • JavaScript และ HTML DOM (แสดงหรือใช้ข้อมูล)

Ajax มีชื่อที่ทำให้เข้าใจผิด โปรแกรม Ajax อาจใช้ XML ในการส่งข้อมูล แต่การส่งข้อมูลเป็นข้อความสากลหรือ JSON ก็เป็นไปได้

Ajax อนุญาตให้ปรับปรุงส่วนบางส่วนของหน้าเว็บโดยไม่ต้องโหลดหน้าเว็บทั้งหมด นี้หมายความว่าสามารถปรับปรุงส่วนบางส่วนของหน้าเว็บได้โดยไม่ต้องโหลดหน้าเว็บทั้งหมด

หลักการทำงานของ AJAX

AJAX
  1. เกิดเหตุการณ์ในหน้าเว็บ (การโหลดหน้าเว็บ การกดปุ่ม)
  2. สร้าง XMLHttpRequest โดย JavaScript
  3. XMLHttpRequest สิ่งส่งคำขอไปยังเซิร์ฟเวอร์เว็บ
  4. เซิร์ฟเวอร์จัดการคำขอ
  5. เซิร์ฟเวอร์ส่งคำตอบกลับมายังหน้าเว็บ
  6. อ่านคำตอบโดย JavaScript
  7. ทำการปฏิบัติการที่ถูกต้องโดย JavaScript (เช่น ปรับปรุงหน้าเว็บ)