AJAX คืออะไรและใช้งานอย่างไรใน WordPress (คำแนะนำทีละขั้นตอน)

AJAX เป็นเทคโนโลยียอดนิยมที่ใช้ในการพัฒนาเว็บไซต์ที่ให้คุณดึงข้อมูลจากแบ็กเอนด์และรีเฟรชมุมมองโดยไม่ต้องโหลดหน้าเว็บซ้ำ ดังนั้นจึงช่วยปรับปรุงการโต้ตอบ ความเร็ว และความสามารถในการใช้งานเว็บไซต์ของคุณ AJAX จะทำงานทุกครั้งที่คุณดำเนินการต่างๆ เช่น แสดงความคิดเห็นหรือโพสต์ทวีต

ในบทความนี้ ผมจะบอกคุณว่า AJAX คืออะไรและใช้งาน AJAX บน WordPress ได้อย่างไร (หรือที่เรียกว่า WP AJAX) ไปอ่านกันเลย!

AJAX คืออะไร?

AJAX ย่อมาจาก Asynchronous JavaScript And XML ซึ่งเป็นเทคโนโลยีที่อนุญาตให้คุณส่งคำขอไปยังเซิร์ฟเวอร์แบบอะซิงโครนัส และทำการเปลี่ยนแปลงในหน้าของเราโดยไม่ต้องโหลดซ้ำ สคริปต์ AJAX ร้องขอให้เซิร์ฟเวอร์ส่งคืนข้อมูลบางส่วนแล้วแก้ไขหน้าเว็บด้วยข้อมูลที่ได้รับ

ตัวอย่างเช่น ลองนึกภาพเมนูดรอปดาวน์หนึ่งเมนูที่คุณเลือกวันที่นัดหมาย และรายการดรอปดาวน์อื่นจะแสดงชั่วโมงที่สามารถจองได้แบบไดนามิก ผ่านสคริปต์ เซิร์ฟเวอร์ถูกถามถึงชั่วโมงที่สามารถเลือกเมนูดร็อปดาวน์การรักษาได้

AJAX ทำงานอย่างไร

ภารกิจของ AJAX คือการทำหน้าที่เป็นสะพานเชื่อมระหว่างเว็บไซต์ของคุณกับเซิร์ฟเวอร์ แกนหลักของเทคโนโลยีแบบอะซิงโครนัสนี้คืออ็อบเจ็กต์ XMLHttpRequest ซึ่งช่วยให้สามารถแลกเปลี่ยนข้อมูลได้ เหล่านี้เป็นขั้นตอนพื้นฐานในการโทร AJAX:

– ที่มา: W3Schools

• ระบุข้อมูลที่จะส่ง
• ตั้งค่าการโทร
• ใช้วัตถุ XMLHttpRequest เพื่อส่งข้อมูล
• รับและประมวลผลการตอบกลับจากเซิร์ฟเวอร์

สิ่งที่ดีคือกระบวนการนี้สามารถทำให้ง่ายขึ้นได้โดยใช้ไลบรารี jQuery

วิธีการใช้ AJAX ใน WordPress?

WordPress รองรับ AJAX โดยกำเนิด คุณจะเห็น “admin-ajax.php” ในโฟลเดอร์ wp-admin

เริ่มแรกสร้างขึ้นสำหรับฟังก์ชันทั้งหมดที่ส่งคำขอ AJAX จากผู้ดูแลระบบ WordPress นอกจากนี้ยังใช้สำหรับส่วนสาธารณะของเว็บ

คำขอ WordPress AJAX ทั้งหมดต้องผ่านสคริปต์ PHP กล่าวอีกนัยหนึ่ง admin-ajax.php ควรเป็นไฟล์ PHP ซึ่งเรียกใช้การดำเนินการที่ส่งคืนเนื้อหา

ย้อนกลับไปในปี 2013 WordPress ได้เปิดตัว WordPress Heartbeat API ที่มีฟังก์ชันการทำงานที่สำคัญหลายอย่าง เช่น คุณสมบัติการบันทึกอัตโนมัติ การหมดอายุการเข้าสู่ระบบ และคำเตือนการล็อกโพสต์ ในขณะที่ผู้ใช้รายอื่นกำลังเขียนหรือแก้ไขโพสต์ WordPress

คุณสมบัติเด่นสองประการของ Heartbeat API คือ:

1. บันทึกอัตโนมัติ

เมื่อคุณบันทึกฉบับร่างของโพสต์หรือทำงานต่อ WordPress จะบันทึกการเปลี่ยนแปลงโดยอัตโนมัติ มีความแตกต่างที่ชัดเจนระหว่างการบันทึกอัตโนมัติและการบันทึกแบบร่างด้วยตนเอง ดูภาพหน้าจอต่อไปนี้ที่แสดงการบันทึกทั้งสองประเภท:

– บันทึกอัตโนมัติใน WordPress

2. โพสต์ล็อค

เมื่อคุณพยายามแก้ไขโพสต์ที่ผู้ใช้รายอื่นกำลังทำงานอยู่ ป๊อปอัปคำเตือนเกี่ยวกับสถานการณ์จะปรากฏขึ้น มีสามการกระทำที่มองเห็นได้สำหรับคุณ

– โพสต์ล็อคใน WordPress

คุณลักษณะที่กล่าวถึงข้างต้นเกิดขึ้นได้เนื่องจาก WordPress Heartbeat API ที่สร้างการเชื่อมต่อระหว่างเซิร์ฟเวอร์และเบราว์เซอร์เพื่อการสื่อสารและการตอบสนองที่เหมาะสม

WordPress Heartbeat API สร้างคำขอสำหรับการสื่อสารกับเซิร์ฟเวอร์และทริกเกอร์เหตุการณ์ในการรับข้อมูล/การตอบสนอง ซึ่งมักจะเพิ่มภาระงานบนเซิร์ฟเวอร์และทำให้ผู้ดูแลระบบ WordPress ช้าลงในที่สุด

ตัวอย่างสด

ฉันลงชื่อเข้าใช้แดชบอร์ด WordPress และเริ่มร่างโพสต์ ต่อไป ฉันเปิดแท็บทิ้งไว้หลายนาทีและเริ่มเรียกดูแท็บอื่นๆ แดชบอร์ดยังคงเข้าสู่ระบบอยู่ และคุณจะเห็นว่า admin-ajax กำลังส่งคำขออย่างต่อเนื่อง

– admin-ajax.php ส่งคำขอไปยังเซิร์ฟเวอร์

ตามตั๋วที่กล่าวไว้ข้างต้น admin-ajax.php ใน WordPress จะสร้างคำขอทุกๆ 15 วินาที คำขอสามารถเป็นการสื่อสารใด ๆ กับเซิร์ฟเวอร์

ปลั๊กอินโอเวอร์โหลด admin-ajax.php อย่างไร?

ปัญหาส่วนใหญ่ใน admin-ajax.php ใน WordPress อาจเกิดจากคำขอของปลั๊กอินที่ติดตั้งไว้ ปลั๊กอินเหล่านี้ทำให้ผู้ดูแลระบบ WordPress ทำงานช้าลงโดยส่งคำขอเพื่อเข้าถึงฟังก์ชันบางอย่าง เช่น เปิดป๊อปอัปหรืออัปเดตตัวนับการแชร์ทางสังคม

ที่กล่าวว่าคำขอไม่จำเป็นต้องขัดขวางไฟล์ admin-ajax.php หากคำขอได้รับการจัดการอย่างเหมาะสม และนักพัฒนาปลั๊กอินปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในการใช้การเรียก AJAX ในปลั๊กอิน ไฟล์ admin-ajax.php ก็ใช้ได้ ดังนั้นจึงเป็นสิ่งสำคัญที่จะวินิจฉัยปลั๊กอินก่อนที่จะปิดใช้งาน

วิธีการวินิจฉัยปลั๊กอินใน WordPress?

สิ่งสำคัญคือต้องวิเคราะห์ปลั๊กอินอย่างถูกต้องเพื่อระบุผลกระทบต่อไฟล์ admin-ajax.php ซึ่งอาจทำให้ผู้ดูแลระบบ WordPress ทำงานช้าลง ในการดำเนินการดังกล่าว เราจะใช้เครื่องมือสองอย่าง: GTmetrix และ WebPageTest

ในกรณีของ GTmetrix ให้ไปที่แท็บ Waterfall เพื่อดูรายการคำขอทั้งหมด เมื่อดูรายการอย่างใกล้ชิด คุณจะเห็นคำขอ POST ที่สร้างโดยไฟล์ admin-ajax.php

– การวินิจฉัยปลั๊กอินใน WordPress

ในกรณีของฉัน คำขอเหล่านี้ส่วนใหญ่สร้างโดยปลั๊กอินการแบ่งปันทางสังคม ปลั๊กอินเฉพาะนี้ส่งคำขอ ajax ไปยังบัญชีโซเชียลมีเดียผ่าน API ทุก ๆ 15 วินาทีเพื่อดึงจำนวนการแชร์ที่อัปเดต

ขยายแท็บเพื่อดูข้อมูลโดยละเอียด แท็บการตอบสนองจะแสดงจุดที่แน่นอนที่ทริกเกอร์คำขอเหล่านี้

Chrome มาพร้อมกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่สามารถช่วยวิเคราะห์คำขอของปลั๊กอินต่างๆ หากต้องการตรวจสอบ ให้เปิดเว็บไซต์ใน Chrome คลิก CTRL + Shift + I แล้วคลิกแท็บเครือข่าย

– admix-ajax.php คำขอใน Chrome

โหลดหน้าซ้ำและดูรายการที่มีการเติมด้วยคำขอที่อัปเดต ในกล่องตัวกรอง พิมพ์ ajax หรือ admin-ajax เพื่อกรองไฟล์ที่ต้องการ ข้อมูลนี้จะให้ข้อมูลเชิงลึกแก่คุณเกี่ยวกับจำนวนคำขอ ความถี่และแหล่งที่มาของคำขอ

ถัดไป คลิกที่ไฟล์เพื่อดูข้อมูลเพิ่มเติม ในแท็บตอบกลับ จะให้คำแนะนำเกี่ยวกับปลั๊กอินที่ทำให้เกิดคำขอนี้ ในกรณีของฉัน คราวนี้มันถูกเรียกใช้โดยปลั๊กอิน WP Popular (WPP) ซึ่งเป็นปลั๊กอินที่เน้นโพสต์ยอดนิยมในช่วงเวลาหนึ่ง

เพื่อหลีกเลี่ยงปัญหานี้ ตรวจสอบให้แน่ใจว่าได้อัปเดตปลั๊กอินที่คุณใช้อยู่ หากไม่เป็นเช่นนั้น ให้ลองเปิดตั๋วสนับสนุนเพื่อให้นักพัฒนาสามารถแก้ไขปัญหาได้ หากเป็นไปได้ คุณยังสามารถแทนที่ด้วยปลั๊กอินอื่นที่ได้รับการอัปเดตและไม่ทำให้ไฟล์ admin-ajax.php โอเวอร์โหลด

การเรียกใช้การวิเคราะห์อย่างละเอียดเป็นสิ่งสำคัญก่อนที่จะกำจัดปลั๊กอินใดๆ เนื่องจากปลั๊กอินบางตัวมีความสำคัญสำหรับไซต์ WordPress ของคุณ เครื่องมือเหล่านี้จะช่วยคุณในการค้นหาสาเหตุที่แท้จริงและเลือกวิธีแก้ไขที่ดีที่สุดเท่าที่เป็นไปได้

ในหัวข้อถัดไป เราจะมาดูกันว่าเราสามารถลดคำขอเหล่านี้และป้องกันไม่ให้ไฟล์ admin-ajax.php ทำงานหนักเกินไปได้อย่างไร

เพิ่มความเร็ว WordPress Dashboard

เพื่อเพิ่มความเร็วให้กับแบ็กเอนด์ของ WordPress แนวทางปฏิบัติที่ดีที่สุดคือปิดการใช้งาน Heartbeat API หรืออย่างน้อยก็กำหนดช่วงเวลาให้นานขึ้นเพื่อไม่ให้เซิร์ฟเวอร์โดนทุกสองสามวินาที

ติดตั้งปลั๊กอิน Heartbeat API

เข้าสู่ระบบแดชบอร์ดผู้ดูแลระบบ WordPress ของคุณ ไปที่ Plugins → Add New → ค้นหา Breeze → ติดตั้งและเปิดใช้งาน

– ติดตั้ง Breeze ใน WordPress

กำหนดค่าปลั๊กอิน Breeze

ไปที่การตั้งค่า → สายลม → Heartbeat API คุณจะพบ 4 ตัวเลือกที่แตกต่างกันสำหรับการกำหนดค่า Heartbeat

1. ควบคุมการเต้นของหัวใจ: คุณสามารถสลับปุ่มเพื่อเปิดหรือปิด Heartbeat API สำหรับแบ็กเอนด์ ตัวแก้ไขโพสต์ และส่วนหน้า
2. Heartbeat Frontend: สิ่งนี้จะช่วยให้คุณเปลี่ยนพฤติกรรมของ Front-end ของคุณหรือปิดการใช้งานอย่างสมบูรณ์
3. Heartbeat Post Editor: สิ่งนี้จะช่วยให้คุณเปลี่ยนการทำงานของ WP Post Editor ของคุณหรือปิดการใช้งานอย่างสมบูรณ์
4. Heartbeat Backend: สิ่งนี้จะช่วยให้คุณเปลี่ยนพฤติกรรมของแบ็กเอนด์ของคุณหรือปิดการใช้งานอย่างสมบูรณ์

– การตั้งค่า Heartbeat API ใน Breeze

สร้างกฎหลายข้อ

โดยค่าเริ่มต้น คุณจะได้รับความถี่เริ่มต้นของ WordPress Heartbeat API แต่คุณสามารถสร้างกฎได้หลายกฎตามความต้องการของคุณ ตัวอย่างเช่น คุณอาจต้องการให้ WordPress Backend (แดชบอร์ด) ทำงานภายใน 2 นาที (120 วินาที) แต่ Post Editor จะทำงานภายใน 3 นาที (180 วินาที) ในการดำเนินการนี้ คุณต้องสร้างกฎสองข้อ: กฎหนึ่งสำหรับแดชบอร์ด WordPress และอีกกฎหนึ่งสำหรับเครื่องมือแก้ไขโพสต์ ตั้งความถี่เป็น 2 และ 3 นาทีตามลำดับ

ตรวจหาปลั๊กอินที่ใช้ Heartbeat API

เมื่อคุณได้ตั้งค่าทุกอย่างแล้ว ก็ถึงเวลาตรวจสอบว่าปลั๊กอินใดใช้ไฟล์ admin-ajax.php และทำให้เว็บไซต์ช้าลง

ไปที่ GTmetrix และป้อน URL ของเว็บไซต์ของคุณ จะใช้เวลาสักครู่ในการวิเคราะห์ไซต์ เมื่อเสร็จแล้ว ไปที่แท็บ Waterfall และคุณจะเห็นว่าไฟล์ใช้เวลาในการเชื่อมต่อและตอบสนองนานเท่าใด เลื่อนลงมาเล็กน้อย และดูว่ามีรายการสำหรับ POST admin-ajax.php หรือไม่ ถ้าใช่ ให้ขยายและไปที่แท็บโพสต์ จากที่นี่ คุณสามารถระบุปลั๊กอินผู้กระทำผิดได้

ในกรณีของฉัน ปลั๊กอิน "เดสก์ท็อปสวิตช์" กำลังใช้ไฟล์ admin-ajax.php และส่งคำขอไปยังเซิร์ฟเวอร์อย่างต่อเนื่อง นี่คือเวลาที่ต้องตัดสินใจ แทนที่ด้วยปลั๊กอินอื่นหรือข้ามนิ้วของคุณ

– โพสต์ admin-ajax.php

สรุป

เมื่อพิจารณาจากชุดคุณลักษณะแล้ว Heartbeat API จะมีประโยชน์มากบนเว็บไซต์ WordPress ของคุณ อย่างไรก็ตาม หากใช้ไม่ถูกต้อง สามารถเพิ่มเวลาในการโหลดของแบ็กเอนด์ WordPress และส่วนหน้าโดยส่งคำขอ WordPress Ajax ไปๆ มาๆ

มีเพียงสองวิธีแก้ไขปัญหานี้ คุณสามารถปิดใช้งาน Heartbeat API/เปิดใช้งานได้ในบางตำแหน่งเท่านั้น – หรือ – อัปเกรดเป็นโฮสต์ที่มีการจัดการที่สามารถรองรับโหลดของคำขอ และลดเวลาตอบสนองของเซิร์ฟเวอร์

คำถามที่พบบ่อย