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 หรืออย่างน้อยก็กำหนดช่วงเวลาให้นานขึ้นเพื่อไม่ให้เซิร์ฟเวอร์โดนทุกสองสามวินาที

ติดตั้งปลั๊กอินควบคุมการเต้นของหัวใจ

– ปลั๊กอินควบคุมการเต้นของหัวใจ

เข้าสู่ระบบแดชบอร์ดผู้ดูแลระบบ WordPress ของคุณ นำทางไปยังปลั๊กอิน → เพิ่มใหม่ ค้นหาการควบคุมการเต้นของหัวใจ ติดตั้งและเปิดใช้งาน

– ติดตั้ง Heartbeat Control ใน WordPress

กำหนดค่าปลั๊กอินควบคุมการเต้นของหัวใจ

ไปที่การตั้งค่า → การตั้งค่าการควบคุมการเต้นของหัวใจ คุณจะพบเมนูแบบเลื่อนลงสามเมนูสำหรับกำหนดค่าปลั๊กอิน

1. อนุญาตการเต้นของหัวใจ

คุณสามารถเลือกพื้นที่ที่ Heartbeat API จะทำงาน มีสามตัวเลือกให้เลือก:

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

– อนุญาตให้ Heartbeat ของการควบคุมการเต้นของหัวใจ

2. ปิดการใช้งาน Heartbeat

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

อย่างไรก็ตาม หากไซต์ของคุณมีผู้ใช้มากกว่าหนึ่งรายที่มีส่วนร่วมเป็นประจำ ฉันขอแนะนำให้คุณอนุญาต Heartbeat API เฉพาะในหน้าแก้ไขโพสต์เท่านั้น

– ปิดการใช้งาน Heartbeat ในการควบคุมการเต้นของหัวใจ

3. ปรับเปลี่ยนการเต้นของหัวใจ

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

– ปรับเปลี่ยน Heartbeat ในการควบคุมการเต้นของหัวใจ

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

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

ตรวจหาปลั๊กอินที่ใช้ 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/เปิดใช้งานได้ในบางตำแหน่งเท่านั้น หรืออัปเกรดเป็นโฮสติ้งที่มีการจัดการซึ่งสามารถรองรับโหลดของคำขอและยังช่วยลดเวลาตอบสนองของเซิร์ฟเวอร์อีกด้วย