เปรียบเทียบ JavaScript Fetch กับ jQuery AJAX

jQuery AJAX เป็นวิธีเก่าที่ต้องใช้ jQuery library และอาศัย XMLHttpRequest กับ callback ในการจัดการผลลัพธ์ ส่วน JavaScript Fetch เป็น API สมัยใหม่ ที่มีอยู่ในเบราว์เซอร์โดยตรง ใช้ Promise และรองรับ async/await ทำให้โค้ดอ่านง่ายและเบากว่า

ตารางเปรียบเทียบ jQuery AJAX vs JavaScript Fetch

ตัวอย่าง

jQuery AJAX

$.ajax({
  url: "https://api.example.com/data",
  method: "GET",
  success: function(data) {
    console.log("Data:", data);
  },
  error: function(err) {
    console.error("Error:", err);
  }
});

JavaScript Fetch

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log("Data:", data))
  .catch(err => console.error("Error:", err));

JavaScript Fetch แบบใช้ async/await

async function getData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log("Data:", data);
  } catch (err) {
    console.error("Error:", err);
  }
}
getData();

ข้อสังเกตุ

• ถ้าโปรเจกต์ยังใช้ jQuery อยู่แล้ว → ใช้ $.ajax ก็สะดวก
• ถ้าเริ่มโปรเจกต์ใหม่ → ควรใช้ fetch() เพราะเป็นมาตรฐานสมัยใหม่, โค้ดอ่านง่าย, และไม่ต้องโหลด library เพิ่ม