用 AJAX 與 WordPress 是一個常見的組合，網(wǎng)頁開發(fā)人員通常用它來創(chuàng)建動態(tài)和互動的網(wǎng)頁內(nèi)容。通過 AJAX，可以在不刷新整個頁面的情況下，更新網(wǎng)頁的特定部分。網(wǎng)站訪客在前端是察覺不到的。

從本質(zhì)上講，AJAX 結(jié)合了多種技術(shù)，包括 JavaScript、XML 和 XMLHttpRequest 對象。這些技術(shù)協(xié)同工作，異步地在網(wǎng)頁瀏覽器和服務(wù)器之間發(fā)送和接收數(shù)據(jù)。

在本文中，我們會更詳細(xì)地探討 AJAX，包括它是如何工作的以及為什么它在 WordPress 中如此有用。還提供逐步指南，教你如何在 WordPress 網(wǎng)站上實(shí)現(xiàn) AJAX，以增強(qiáng)網(wǎng)站的功能。

AJAX 簡要概述

AJAX 代表異步 JavaScript 和 XML，是一種技術(shù)，可以異步請求服務(wù)器，并在不重新加載頁面的情況下對頁面進(jìn)行更改。AJAX 腳本請求服務(wù)器返回一些數(shù)據(jù)，然后使用獲得的數(shù)據(jù)修改網(wǎng)頁。

例如，假設(shè)有一個下拉菜單，選擇預(yù)約日期，另一個下拉列表動態(tài)顯示可預(yù)訂的時間。通過 AJAX 腳本，服務(wù)器被請求提供可選的預(yù)約時間，以便更新項(xiàng)目的下拉列表。

AJAX 與 REST API 對比

AJAX 和 REST API 經(jīng)常被比較，因?yàn)樗鼈兌加糜诰W(wǎng)頁開發(fā)中，以提升用戶體驗(yàn)。讓我們來看看它們的主要區(qū)別！

AJAX	REST API
一組技術(shù)，用于提供更豐富的網(wǎng)頁體驗(yàn)	一種處理 HTTP 請求的架構(gòu)風(fēng)格
異步更新頁面	以資源為中心
可以發(fā)送 RESTful 請求	可以通過 AJAX 客戶端訪問

AJAX 是如何工作的？

AJAX 是一組網(wǎng)頁開發(fā)技術(shù)，能在網(wǎng)頁瀏覽器和服務(wù)器之間進(jìn)行異步數(shù)據(jù)交換。它使得網(wǎng)頁可以動態(tài)更新，而無需重新加載整個頁面。

從技術(shù)角度來看，AJAX 通過結(jié)合 JavaScript、XML（雖然現(xiàn)在 JSON 等其他格式也被廣泛使用）和 XMLHttpRequest 對象來實(shí)現(xiàn)。以下是其典型的工作流程：

1. 事件觸發(fā)：用戶觸發(fā)某個事件，如點(diǎn)擊按鈕或提交表單，從而啟動 AJAX 請求。

2. XMLHttpRequest 對象：JavaScript 創(chuàng)建 XMLHttpRequest 對象的實(shí)例，作為瀏覽器和服務(wù)器之間的中介。

3. 異步請求：XMLHttpRequest 對象（第 2 步）向服務(wù)器發(fā)送異步請求，不會干擾或阻止用戶與網(wǎng)頁的互動。

4. 服務(wù)器通信：請求被發(fā)送到服務(wù)器，服務(wù)器處理請求并生成響應(yīng)。

5. 數(shù)據(jù)獲取：服務(wù)器完成處理后，將響應(yīng)數(shù)據(jù)返回給瀏覽器。

6. 動態(tài)更新：瀏覽器使用 JavaScript 操作文檔對象模型（DOM），根據(jù)收到的響應(yīng)更新網(wǎng)頁內(nèi)容，而無需重新加載整個頁面。

AJAX 請求流程圖

通過使用 AJAX，網(wǎng)頁開發(fā)人員可以創(chuàng)建更具互動性和響應(yīng)性的網(wǎng)頁應(yīng)用程序。AJAX 使得實(shí)時更新、動態(tài)內(nèi)容加載、表單驗(yàn)證等變得可能，極大地改善了用戶體驗(yàn)。

它通過減少完全重新加載頁面的需求，促進(jìn)了瀏覽器與服務(wù)器之間更流暢、更快速和更高效的數(shù)據(jù)交換，使網(wǎng)頁交互變得更順暢。

為什么 AJAX 有用？

AJAX 在多種情況下很有用。下面讓我們看看編輯時候最常用到的自動保存WordPress 中的草稿功能。

AJAX 自動保存 WordPress 草稿
AJAX 在 WordPress 中實(shí)現(xiàn)了自動保存草稿的功能。這有助于防止數(shù)據(jù)丟失，并為 WordPress 用戶提供無縫的寫作體驗(yàn)。

示例：在撰寫博客文章或創(chuàng)建頁面時，AJAX 可以定期將內(nèi)容發(fā)送到服務(wù)器并在后臺保存為草稿，無需手動保存或重新加載頁面。

AJAX 自動保存草稿

通過在 WordPress 開發(fā)中利用 AJAX 技術(shù)，用戶可以創(chuàng)建更具動態(tài)性、互動性和響應(yīng)性的網(wǎng)頁。

在 WordPress 中使用 AJAX

WordPress 本身原生支持 AJAX?？梢栽?wp-admin 文件夾中看到 “admin-ajax.php” 文件。它最初是為所有從 WordPress 后臺發(fā)起 AJAX 請求的功能創(chuàng)建的，后來也被用于網(wǎng)站的前端部分。

所有的 WordPress AJAX 請求都必須通過 PHP 腳本處理。換句話說，admin-ajax.php 應(yīng)該是通過它調(diào)用返回內(nèi)容的操作的 PHP 文件。

早在 2013 年，WordPress 引入了 WordPress Heartbeat API，該 API 提供了幾個重要功能，如自動保存功能、登錄過期提醒、以及當(dāng)另一個用戶正在撰寫或編輯 WordPress 文章時，給出文章鎖定警告。

文章鎖定

當(dāng)你嘗試編輯另一位用戶正在編輯的文章時，會彈出一個警告提示你當(dāng)前的情況。你將看到三個可操作選項(xiàng)：所有文章、預(yù)覽、和 接管文章。

接管文章

上述功能得益于 WordPress Heartbeat API，它連接了服務(wù)器和瀏覽器，確保適當(dāng)?shù)耐ㄐ藕晚憫?yīng)。

WordPress Heartbeat API 會生成請求與服務(wù)器進(jìn)行通信，并在收到數(shù)據(jù)/響應(yīng)時觸發(fā)事件。這通常會增加服務(wù)器的負(fù)載，最終可能會導(dǎo)致 WordPress 后臺變慢。

示例

我登錄到我的 WordPress 后臺并開始撰寫一篇文章。接著，打開了多個標(biāo)簽頁，瀏覽其他內(nèi)容。盡管如此，后臺仍然保持登錄狀態(tài)，并且可以看到 admin-ajax.php 持續(xù)向服務(wù)器發(fā)送請求。

根據(jù)上述問題，WordPress 中的 admin-ajax.php 每 15 秒會生成一次請求。該請求可以是與服務(wù)器的任何通信。

WordPress 中的 AJAX 請求由位于wp-admin 文件夾中的admin-ajax.php文件處理。它是后端和面向用戶的 AJAX 功能的指定文件。

要啟動 AJAX 請求，必須使用GET或POST方法在請求數(shù)據(jù)中包含操作參數(shù)。

這個動作參數(shù)決定了在admin-ajax.php文件中要觸發(fā)的具體鉤子。

這些鉤子被命名為wp_ajax_my_action和wp_ajax_nopriv_my_action，其中my_action 對應(yīng)于 GET 或 POST 請求中 action 參數(shù)的值。

讓我們看看如何在 WordPress 中使用它。如果是 WordPress 新手或不懂技術(shù)，可能很難理解。重要的是要對 JavaScript 有很好的理解（jQuery 就足夠了）以及 HTML、CSS 和 PHP 的知識。

• 使用wp_enqueue_script()函數(shù)將負(fù)責(zé)處理 AJAX 請求的 JavaScript 文件加入隊(duì)列。確保將其正確加入隊(duì)列，例如在主題的functions.php或自定義插件文件中。
• 利用wp_localize_script()函數(shù)本地化 AJAX 腳本。這允許您將數(shù)據(jù)從 PHP 代碼傳遞到腳本，使其可在 JavaScript 中訪問。
• 使用 WordPress 的wp_send_json()或wp_send_json_success()和wp_send_json_error()函數(shù)將響應(yīng)數(shù)據(jù)發(fā)送回客戶端 JavaScript。您可以在響應(yīng)中包含所需的數(shù)據(jù)或錯誤消息。
• 可以使用jQuery.ajax()方法或簡寫jQuery.post()或jQuery.get()方法將 AJAX 請求發(fā)送到服務(wù)器。

這些示例展示了如何在 WordPress 的不同場景中使用 AJAX 來增強(qiáng)用戶交互、提高性能并提供無縫的用戶體驗(yàn)。

分析 admin-ajax.php 請求

插件請求會導(dǎo)致 WordPress 中的 admin-ajax.php 文件出現(xiàn)許多問題。這些插件可能會通過請求特定的功能，如彈窗或社交分享計(jì)數(shù)更新，導(dǎo)致 WordPress 后臺變慢。然而，并非所有請求都會使 admin-ajax.php 文件超載。

如果請求得當(dāng)處理，并且插件開發(fā)人員遵循最佳實(shí)踐來使用 AJAX 調(diào)用，admin-ajax.php 文件應(yīng)該能正常工作。

接下來，讓我們看看一些檢查導(dǎo)致網(wǎng)站變慢的 admin-ajax.php 請求的最佳方法。

1. 啟用調(diào)試模式

通過在網(wǎng)站的 wp-config.php 文件中添加以下代碼來啟用 WordPress 調(diào)試模式：

phpCopy codedefine('WP_DEBUG', true);

2. 監(jiān)控網(wǎng)絡(luò)請求

在瀏覽器中加載你的站點(diǎn)并進(jìn)入 “檢查” > “網(wǎng)絡(luò)”（Inspect > Network）。按下 Ctrl + R 并找到 admin-ajax.php 文件。在網(wǎng)絡(luò)請求列表中選擇 admin-ajax.php 請求，以查看其詳細(xì)信息。

注意請求方法（GET 或 POST）、請求參數(shù)和響應(yīng)時間。比較不同請求的響應(yīng)時間，找出任何明顯的差異。

3. 禁用插件

逐個禁用插件，首先從那些最有可能與 admin-ajax.php 交互的插件開始，比如緩存插件或優(yōu)化插件。

禁用每個插件后，重新加載頁面并監(jiān)控網(wǎng)絡(luò)請求。記錄響應(yīng)時間或請求大小的任何變化。

4. 確定問題插件

當(dāng)你注意到響應(yīng)時間顯著改善或 admin-ajax.php 請求的大小減少時，就可以找到導(dǎo)致問題的插件或請求。

加速 WordPress 后臺

為了加速 WordPress 后臺，最佳做法是禁用 Heartbeat API，或者至少設(shè)置更長的時間間隔，這樣它就不會每隔幾秒鐘就向服務(wù)器發(fā)送請求。

所以，需要安裝 Breeze 插件。

登錄到網(wǎng)站 WordPress 后臺。導(dǎo)航到 “插件” → “添加新插件” → 搜索 “Breeze” → 安裝并激活插件。

導(dǎo)航到 設(shè)置 → Breeze → Heartbeat API。在這里，會看到四個不同的選項(xiàng)，用于配置 Heartbeat API。

1. 控制 Heartbeat：可以切換按鈕，開啟或關(guān)閉后臺、文章編輯器和前端的 Heartbeat API。
2. 前端 Heartbeat：這個選項(xiàng)允許更改前端的行為或完全禁用它。
3. 文章編輯器 Heartbeat：這個選項(xiàng)可以更改 WordPress 文章編輯器的行為或完全禁用它。
4. 后臺 Heartbeat：這個選項(xiàng)能更改后臺的行為或完全禁用它。

在這里，需要創(chuàng)建多個規(guī)則：

默認(rèn)情況下，WordPress Heartbeat API 使用默認(rèn)的頻率，但可以根據(jù)需要創(chuàng)建多個規(guī)則。

例如，想要 WordPress 后臺（儀表盤）每 2 分鐘（120 秒）觸發(fā)一次，而文章編輯器每 3 分鐘（180 秒）觸發(fā)一次。

因此，必須創(chuàng)建兩個規(guī)則：一個用于 WordPress 后臺，另一個用于文章編輯器。將它們的觸發(fā)頻率分別設(shè)置為 2 分鐘和 3 分鐘。

AJAX 安全考慮事項(xiàng)

在處理 AJAX 時，有一些安全方面需要特別注意。以下是幾個重要的安全考慮：

1. AJAX 應(yīng)用易受跨站腳本攻擊（XSS）：這意味著如果沒有適當(dāng)?shù)尿?yàn)證和編碼，AJAX 代碼很容易被操控。結(jié)果，攻擊者可以輕松竊取信息、篡改內(nèi)容并執(zhí)行惡意操作。
2. AJAX 函數(shù)調(diào)用以明文方式發(fā)送到服務(wù)器：如果沒有正確的協(xié)議，任何人都可以提取敏感信息。這基本上將數(shù)據(jù)庫置于惡意攻擊者的控制之下。
3. AJAX 可能與某些互聯(lián)網(wǎng)瀏覽器不兼容：不同的瀏覽器可能處理 AJAX 請求的方式不同，導(dǎo)致兼容性問題。

總結(jié)

現(xiàn)在，已經(jīng)了解了什么是 AJAX，以及它如何通過異步更新和刷新屏幕來改善 Web 應(yīng)用程序的用戶體驗(yàn)。我們還看到了如何在 WordPress 中使用 AJAX，既包括前端也包括后臺。

通過 WordPress AJAX，可以創(chuàng)建更具動態(tài)性和響應(yīng)性的站點(diǎn)，在不重新加載頁面的情況下與服務(wù)器進(jìn)行交互。希望這篇文章對你們有幫助并提供了有用的信息。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息