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 JavaScript 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 ทำการปฏิบัติตามที่ถูกต้อง (เช่น ปรับปรุงหน้าเว็บ)