ป้ายกำกับ: Ajax

ในฐานะ Senior Architect การพัฒนาเว็บไซต์ที่เน้นประสิทธิภาพ (Performance) ถือเป็นหัวใจสำคัญ การดึงข้อมูล (Data Fetching) จากหลายแหล่งพร้อมกันโดยที่หน้าเว็บไม่เกิดอาการค้าง (Blocking) คือโจทย์ที่นักพัฒนาต้องเจอเสมอ หากเราต้องดึงข้อมูลที่เกี่ยวข้องจากหลายตารางหรือหลาย API Endpoint การใช้ Ajax แบบเรียงลำดับ (Sequential) จะทำให้ผู้ใช้ต้องรอจนกว่าทุกไฟล์จะโหลดเสร็จสิ้น ซึ่งส่งผลเสียต่อประสบการณ์ผู้ใช้ (UX) อย่างมาก

🚀 หลักการโหลด Ajax แบบขนาน (Parallel Ajax Loading)

การโหลด Ajax หลายไฟล์พร้อมกัน หมายถึงการส่งคำขอ (Request) ไปยังเซิร์ฟเวอร์หลายตัว (หรือหลาย Endpoint) ในเวลาเดียวกัน แทนที่จะรอให้คำขอแรกเสร็จก่อนจึงจะเริ่มคำขอที่สอง หลักการนี้ช่วยลดเวลาในการรอคอยโดยรวม (Total Latency) ได้อย่างมหาศาล

ในบริบทของระบบที่ใช้ PostgreSQL เป็นฐานข้อมูลหลัก เราอาจมีข้อมูลที่ต้องดึงจากหลายส่วน เช่น ข้อมูลโปรโมชั่น (Endpoint 1), ข้อมูลส่วนลด (Endpoint 2), และข้อมูลผู้ใช้ (Endpoint 3) การเรียกใช้พร้อมกันจึงเป็นทางออกที่ดีที่สุด

💡 การใช้งาน jQuery และ Promises

jQuery มีฟังก์ชันที่ทรงพลังในการจัดการ Asynchronous Operation ซึ่งเราสามารถใช้ร่วมกับ JavaScript Promises เพื่อให้การเรียก Ajax หลายครั้งทำงานแบบขนาน (Concurrent) ได้อย่างมีประสิทธิภาพ

JavaScript

// สมมติว่าเราต้องการโหลดข้อมูล 3 ส่วนพร้อมกัน
const loadData = async () => {
  try {
    // สร้าง Promise สำหรับแต่ละการเรียก Ajax
    const promise1 = $.ajax({ url: '/api/promo', type: 'GET' });
    const promise2 = $.ajax({ url: '/api/discounts', type: 'GET' });
    const promise3 = $.ajax({ url: '/api/user-data', type: 'GET' });

    // ใช้ Promise.all() เพื่อรอให้ทุก Promise เสร็จพร้อมกัน
    const [promoData, discountData, userData] = await Promise.all([
      promise1,
      promise2,
      promise3
    ]);

    // เมื่อทุกข้อมูลมาถึงแล้ว จึงนำไปประมวลผลต่อ
    console.log('✅ โหลดข้อมูลทั้งหมดสำเร็จ:', { 
      promo: promoData, 
      discount: discountData, 
      user: userData 
    });

  } catch (error) {
    console.error('❌ มีข้อผิดพลาดในการโหลดข้อมูล:', error);
  }
};

loadData();

⚙️ ตัวอย่าง Backend (PostgreSQL Concept)

แม้ว่าโค้ดข้างต้นจะเป็น JavaScript แต่เบื้องหลังแต่ละ Endpoint จะต้องมีการเรียกใช้ PostgreSQL เพื่อดึงข้อมูลอย่างเหมาะสม ตัวอย่างเช่น Endpoint สำหรับข้อมูลส่วนลดอาจใช้คำสั่ง SQL ดังนี้:

SQL

-- ตัวอย่าง SQL สำหรับ Endpoint /api/discounts
SELECT 
    d.discount_id, 
    d.product_id, 
    d.rate, 
    d.start_date, 
    d.end_date
FROM 
    discounts d
JOIN 
    products p ON d.product_id = p.id
WHERE 
    d.is_active = TRUE
    AND d.start_date <= CURRENT_DATE
    AND d.end_date >= CURRENT_DATE;

✨ สรุปและข้อควรระวัง

การใช้เทคนิค Parallel Ajax Loading ด้วย jQuery และ Promises เป็น Best Practice ในการพัฒนาเว็บยุคใหม่ เพราะมันช่วยให้แอปพลิเคชันของคุณมีประสิทธิภาพสูง ตอบสนองรวดเร็ว และมอบประสบการณ์ที่ดีเยี่ยมให้กับผู้ใช้งาน

ข้อควรระวังที่สำคัญคือ การจัดการ Error Handling (เช่น การใช้ `try…catch` หรือ `.catch()` ใน Promise) ต้องทำอย่างรอบคอบ เพื่อให้แน่ใจว่าหาก Endpoint ใด Endpoint หนึ่งล้มเหลว ระบบจะไม่หยุดทำงานทั้งหมด