什麼是 AJAX 以及如何在 WordPress 中使用它（分步指南）

AJAX 是一種用於網站開發的流行技術，它允許您從後端檢索數據並刷新視圖，而無需重新加載網頁。 因此，它可以幫助您提高網站的交互性、速度和可用性。 每次您執行諸如發表評論或發布推文之類的操作時，AJAX 都會發揮作用。

在這篇文章中，我將告訴你什麼是 AJAX 以及如何在 WordPress（也稱為 WP AJAX）中使用 AJAX。 讓我們繼續閱讀吧！

什麼是 AJAX？

AJAX 代表 Asynchronous JavaScript And XML，一種允許您異步向服務器發出請求並更改我們的頁面而無需重新加載它們的技術。 AJAX 腳本請求服務器返回一些數據，然後用獲得的數據修改網頁。

例如，想像一個下拉菜單，您可以在其中選擇約會日期，而另一個下拉列表會動態顯示可供預訂的時間。 通過腳本，已向服務器詢問可用於選擇治療下拉菜單的時間。

AJAX 是如何工作的？

AJAX 的使命是充當您的網站和服務器之間的橋樑。 這種異步技術的核心是 XMLHttpRequest 對象，它允許數據交換。 以下是進行 AJAX 調用的基本步驟：

– 來源：W3Schools

• 指定要發送的信息
• 設置通話
• 使用 XMLHttpRequest 對象發送數據
• 接收並處理來自服務器的響應

好消息是這個過程可以使用 jQuery 庫來簡化。

如何在 WordPress 中使用 AJAX？

WordPress 原生支持 AJAX。 您可以在 wp-admin 文件夾中看到“admin-ajax.php” 。

它最初是為從 WordPress 管理員發出 AJAX 請求的所有函數創建的。 它也用於網絡的公共部分。

所有 WordPress AJAX 請求都必須通過 PHP 腳本。 換句話說，admin-ajax.php 應該是調用返回內容的操作的 PHP 文件。

早在 2013 年，WordPress 就引入了 WordPress Heartbeat API，該 API 提供了幾個重要的功能，例如自動保存功能、登錄過期和發布鎖定警告，而另一個用戶正在編寫或編輯 WordPress 帖子。

Heartbeat API 的兩個非常突出的特性是：

1.自動保存

當您保存帖子草稿或繼續處理它時，WordPress 會自動保存更改。 自動保存和手動保存草稿之間有明顯的區別。 查看以下顯示兩種保存類型的屏幕截圖：

- 在 WordPress 中自動保存

2.後鎖

當您嘗試編輯其他用戶已經在處理的帖子時，將出現有關該情況的彈出警告。 您可以看到三個操作。

– 在 WordPress 中發布鎖定

由於 WordPress Heartbeat API 創建了服務器和瀏覽器之間的連接以進行適當的通信和響應，因此上述功能成為可能。

WordPress Heartbeat API 生成與服務器通信的請求，並在接收數據/響應時觸發事件。 這通常會增加服務器的負載並最終減慢 WordPress 管理員的速度。

一個活生生的例子

我登錄到我的 WordPress 儀表板並開始起草一篇文章。 接下來，我將選項卡打開幾分鐘並開始瀏覽其他選項卡。 儀表板仍處於登錄狀態，您可以看到 admin-ajax 不斷發送請求。

– admin-ajax.php 向服務器發送請求

根據上面提到的票證，WordPress 中的 admin-ajax.php 每 15 秒生成一次請求。 該請求可以是與服務器的任何通信。

插件如何重載 admin-ajax.php？

WordPress 中 admin-ajax.php 中的大多數問題都可以歸因於已安裝插件發出的請求。 這些插件通過發送請求以實現特定功能（例如觸發彈出窗口或更新社交共享計數器）使 WordPress 管理員變慢。

也就是說，請求不一定會增加 admin-ajax.php 文件。 如果請求得到正確處理，並且插件開發人員遵循在他們的插件中使用 AJAX 調用的最佳實踐，那麼 admin-ajax.php 文件就可以了。 因此，在停用任何插件之前對其進行診斷也很重要。

如何診斷 WordPress 中的插件？

正確診斷插件以識別其對 admin-ajax.php 文件的影響非常重要，這可能會減慢 WordPress 管理員的速度。 為此，我們將使用兩個工具：GTmetrix 和 WebPageTest。

對於 GTmetrix，導航到其 Waterfall 選項卡以獲取完整的請求列表。 仔細查看列表後，您可以看到 admin-ajax.php 文件發出的 POST 請求。

– WordPress 中的插件診斷

就我而言，這些請求主要是由社交分享插件發出的。 這個特定的插件每 15 秒通過 API 向社交媒體帳戶發送一個 ajax 請求，以獲取更新的共享計數。

展開選項卡以獲取詳細信息。 響應選項卡顯示觸發這些請求的確切位置。

Chrome 附帶開發者工具，可以幫助分析各種插件發出的請求。 要檢查這一點，請在 Chrome 中打開網站，單擊 CTRL + Shift + I，然後單擊網絡選項卡。

– Chrome 中的 admix-ajax.php 請求

重新加載頁面並查看列表中填充了更新的請求。 在過濾器框中，鍵入 ajax 或 admin-ajax 以過濾所需的文件。 這使您可以深入了解請求的數量以及它們的頻率和請求的來源。

接下來，單擊文件以查看更多信息。 在響應選項卡中，它會為您提供一些導致此請求的插件的提示。 就我而言，這一次是由 WP Popular 插件 (WPP) 觸發的，該插件可以突出顯示特定時間段內最受歡迎的帖子。

為避免這種情況，請確保您使用的插件已更新。 如果不是，請嘗試打開支持票，以便其開發人員可以解決問題。 如果可能，您也可以將其替換為另一個已更新且不會超載 admin-ajax.php 文件的插件。

在擺脫任何插件之前進行徹底的診斷很重要，因為某些插件對您的 WordPress 網站至關重要。 這些工具可以幫助您找到根本原因並選擇最佳解決方案來解決它。

在下一節中，我們將了解如何減少這些請求並防止 admin-ajax.php 文件過載。

加速 WordPress 儀表板

為了加快 WordPress 後端的速度，最好的做法是禁用 Heartbeat API，或者至少設置更長的時間間隔，這樣它就不會每隔幾秒就訪問服務器。

安裝心跳 API 插件

登錄到您的 WordPress 管理儀表板。 導航到插件 → 添加新 → 搜索 Breeze → 安裝並激活它。

– 在 WordPress 中安裝微風

配置微風插件

導航到設置 → 微風 → 心跳 API。 在那裡，您會發現 4 個用於配置 Heartbeat 的不同選項。

1. 控制心跳：您可以切換按鈕以打開或關閉後端、帖子編輯器和前端的心跳 API。
2. Heartbeat Frontend：這將允許您更改前端的行為或完全禁用它。
3. Heartbeat Post Editor：這將允許您更改 WP Post Editor 的行為或完全禁用它。
4. Heartbeat Backend：這將允許您更改後端的行為或完全禁用它。

- 微風中的心跳 API 設置

創建多個規則

默認情況下，您會獲得 WordPress Heartbeat API 的默認頻率，但您可以根據需要創建多個規則。 例如，您可能希望在 2 分鐘（120 秒）內觸發 WordPress 後端（儀表板），但在 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 Ajax 請求來增加 WordPress 後端和前端的加載時間。

這個問題只有兩種解決方案。 您可以僅在幾個位置禁用/啟用 Heartbeat API，或者升級到可以處理請求負載並減少服務器響應時間的託管主機。

經常問的問題