## 什么是Ajax？ Ajax是Asynchronous JavaScript And XML的縮寫。 XML是數據交換格式，UX是用戶體驗的軟件開發人員簡寫。 Ajax是一種互聯網通信技術，允許用戶瀏覽器中顯示的網頁從服務器請求特定信息，并將該新信息顯示在同一頁面上，而無需重新加載整個頁面。您可以想象如何改善用戶體驗。 雖然XML是使用的傳統數據交換格式，但交換實際上可以是任何方便的格式。當使用PHP代碼時，許多開發人員贊成JSON，因為從傳輸的數據流創建的內部數據結構更容易接口。 要查看Ajax的行動，請轉到您的WordPress管理區域并添加一個類別或標簽。當您點擊添加新按鈕時，請注意頁面更改，但實際上不會重新加載。不相信檢查瀏覽器的后臺歷史記錄，如果頁面已重新加載，您將看到該頁面的兩個條目。 Ajax甚至不需要用戶操作。 Google文檔每隔幾分鐘就可以自動保存您的文檔，而無需啟動保存操作。 ## 為什么要使用Ajax？ 顯然，它改善了用戶體驗。 Ajax不是提供一個無聊的靜態頁面，而是讓您呈現一個動態，響應敏捷，用戶友好的體驗。用戶可以立即獲得反饋，表明他們采取的一些行動是對還是錯。在發現一個領域有錯誤之前，不需要提交整個表格。一旦輸入數據，就可以驗證重要字段。或者可以根據用戶類型進行建議。 Ajax可以顯著減少數據來回流動的數量。只有相關數據需要交換，而不是所有的頁面內容，這是當頁面重新加載時會發生什么。 與WordPress插件特別相關，Ajax是獨立于WordPress內容的最佳方式。如果你以前編程過PHP，你可能會簡單地鏈接到一個新的PHP頁面。鏈接后的用戶啟動該過程。問題在于，當您鏈接到新的外部PHP頁面時，您無法訪問任何WordPress功能。過去，開發人員通過在其新的PHP頁面上包含核心文件wp-load.php來訪問WordPress功能。這樣做的問題是您不可能知道該文件的正確路徑。 WordPress架構現在足夠靈活，可以將/ wp-content /和您的插件文件從其常規位置移動到安裝根目錄的一個級別。你不知道wp-load.php相對于你的插件文件的位置，你也不知道安裝文件夾的絕對路徑。 您可以知道的是發送Ajax請求的地方，因為它在全局JavaScript變量中定義。您的PHP Ajax處理程序腳本實際上是一個動作鉤子，所以所有WordPress函數都可以自動使用，與外部PHP文件不同。 ## 如何使用Ajax？ 如果您是新來的WordPress，但在其他環境中使用Ajax的經驗，您將需要重新學習一些東西。 WordPress實現Ajax的方式最有可能與您以前使用的方式不同。如果一切都是新的，沒問題。你將在這里學習基礎知識。一旦開發了一個基本的Ajax交換機，那么在這個基礎上進行擴展就可以開發出一個令人敬畏的用戶界面的殺手級應用程序！ WordPress中任何Ajax交換都有兩個主要組件。客戶端JavaScript或jQuery和服務器端PHP。所有Ajax交易所遵循以下事件順序。 某些頁面事件會啟動JavaScript或jQuery函數。該函數從頁面收集一些數據，并通過HTTP請求將其發送到服務器。由于使用JavaScript處理HTTP請求是尷尬的，并且jQuery已經捆綁到WordPress中，我們將僅關注來自這里的jQuery代碼。具有直接JavaScript的Ajax是可行的，但在jQuery可用時不值得。 服務器接收請求并對數據執行某些操作。它可以組合相關數據，并以HTTP響應的形式將其發送回客戶端瀏覽器。這不是一個要求，但是由于保持用戶了解發生了什么是可取的，所以很少發送某種響應。 發送初始Ajax請求的jQuery函數接收服務器響應并執行一些操作。它可以通過某些方式更新頁面上的內容和/或向用戶呈現消息。 ## 使用Ajax與jQuery 現在我們將在jQuery文章中的代碼段中定義“do stuff”部分。 我們將使用$ .post（）方法，它需要3個參數：發送POST請求的URL，要發送的數據，以及一個回調函數來處理服務器響應。 在我們這樣做之前，我們有一些先進的計劃來擺脫困境。 我們在回調函數中稍后執行以下作業。 回調部分的目的將會更加明顯。 ``` var this2 = this; ``` ## 網址 所有WordPress Ajax請求都必須發送到wp-admin / admin-ajax.php。 正確的，完整的URL需要來自PHP，jQuery無法自行確定此值，您無法對jQuery代碼中的URL進行硬編碼，并希望其他人在其網站上使用您的插件。 如果頁面來自管理區域，WordPress將在全局JavaScript變量ajaxurl中設置正確的URL。 對于公共區域的頁面，您需要自己建立正確的URL，并使用wp_localize_script()將其傳遞給jQuery。 這將在PHP部分中更詳細地介紹。 因為現在只需知道可以在前端和后端工作的URL作為您將在PHP段中定義的全局對象的屬性。 在jQuery中，它被引用為： ``` my_ajax_obj.ajax_url ``` ## 數據 需要發送到服務器的所有數據都包含在數據數組中。 除了應用程序所需的任何數據外，還必須發送一個動作參數。 對于可能導致數據庫更改的請求，您需要發送隨機數，以便服務器知道請求來自合法來源。 我們提供給.post()方法的示例數據數組如下所示： ``` {_ajax_nonce: my_ajax_obj.nonce, //nonce action: "my_tag_count", //action title: this.value //data } ``` 每個組件如下所述。 ##隨機 Nonce是“使用ONCE”的portmanteau。 它本質上是分配給任何形式的每個實例的唯一的十六進制序列號。 nonce是用PHP腳本建立的，并以與URL相同的方式傳遞給jQuery，作為全局對象中的屬性。 在這種情況下，它被引用為my_ajax_obj.nonce。 >[warning] 注意：每次使用一個真實的隨機數需要刷新，所以下一個Ajax調用有一個新的，未使用的隨機數作為驗證發送。 事實上，WordPress的nonce實現不是一個真正的隨機數。 在24小時內可以根據需要多次使用相同的隨機數。 生成具有相同種子短語的隨機數將始終產生相同的數字，持續12小時，之后將最終生成新的數字。 如果您的應用程序需要嚴格的安全性，請實施一個真正的隨機系統，其中服務器發送一個新的，新的隨機數，以響應Ajax請求，用于驗證下一個請求。 如果您將這個隨機數值鍵入_ajax_nonce，最簡單。 如果與驗證隨機數的PHP代碼進行協調，則可以使用其他鍵，但使用默認值更容易，而不用擔心協調。 這是鍵值對的聲明出現的方式： ``` _ajax_nonce: my_ajax_obj.nonce ``` ## Action 所有WordPress Ajax請求都必須在數據中包含一個動作參數。 該值是一個任意字符串，部分用于構建用于掛接Ajax處理程序代碼的操作標簽。 這個值對Ajax調用的目的是一個很簡單的描述。 毫不奇怪，這個價值的關鍵是“行動”。 在這個例子中，我們將使用“my_tag_count”作為動作值。 該鍵值對的聲明如下所示： ``` action: "my_tag_count" ``` 這個數組中還包括服務器需要完成任務的任何其他數據。 如果有很多字段要傳輸，有兩種通用格式將數據字段組合成一個字符串，以便更方便的傳輸，XML和JSON。 使用這些格式是可選的，但無論您做什么，都需要與服務器端的PHP腳本進行協調。 有關這些格式的更多信息，請參見以下回調部分。 以這種格式接收數據比發送數據更常見，但它可以同時工作。 在我們的示例中，服務器只需要一個值，即所選書名的單個字符串，因此我們將使用關鍵字'title'。 在jQuery中，觸發事件的對象總是包含在變量this中。 因此，所選元素的值為this.value。 我們對這個鍵值對的聲明如下： ``` title: this.value ``` ## Callback 回調處理程序是在請求完成后響應從服務器返回時執行的功能。 再次，我們通常在這里看到一個匿名的功能。 該函數傳遞一個參數，服務器響應。 響應可能是從是或否到巨大的XML數據庫。 JSON格式的數據也是數據的有用格式。 回復甚至不需要。 如果沒有，則不需要指定回調。 為了UX的利益，讓用戶知道任何請求發生了什么，總是一個好主意，因此建議始終回應并提供一些發生的事情。 在我們的示例中，我們將無線電輸入之后的當前文本替換為服務器響應，其中包括由書標題標記的帖子數。 這是我們的匿名回調函數： ``` function(data) { this2.nextSibling.remove(); $(this2).after(data); } ``` 數據包含整個服務器響應。 之前我們分配給this2觸發更改事件的對象（引用為這樣），使用行var this2 = this; 這是因為閉包中的變量范圍只能擴展一個層次。 通過在事件處理程序（最初剛剛包含“/ * do stuff * /”的部分）中分配this2，我們可以在回調中使用它，因為這將超出范圍。 服務器響應可以采用任何形式。 大量的數據應該被編碼成數據流，以便于處理。 XML和JSON是兩種常見的編碼方案。 ## XML XML是Ajax的經典數據交換格式。 這是Ajax畢竟是'X'。 它仍然是一種可行的交換格式，即使使用本機PHP函數可能很困難。 許多PHP程序員因此而喜歡使用JSON交換格式。 如果您使用XML，解析方法取決于正在使用的瀏覽器。 將Microsoft.XMLDOM ActiveX用于Internet Explorer，并使用DOMParser進行其他操作。 ## JSON 通常，JSON的重量輕且易于使用，因此常常受益。 你可以使用eval()來解析JSON，但不要這樣做！ 使用eval()具有重大的安全隱患。 相反，使用一個專門的解析器，這也更快。 使用解析器對象JSON的全局實例。 為了確保它可用，請確保它與頁面上的其他腳本一起排隊。 有關入隊的更多信息將在PHP部分稍后介紹。 ## Other 只要數據格式與PHP處理程序協調一致，它可以是任何您喜歡的格式，例如逗號分隔，制表符分隔或任何適合您的結構。 ## 客戶端摘要 現在我們已將我們的回調函數添加為$post()函數的最終參數，我們已經完成了我們的jQuery Ajax腳本。 所有的部分放在一起看起來像這樣： ``` jQuery(document).ready(function($) { //wrapper $(".pref").change(function() { //event var this2 = this; //use in callback $.post(my_ajax_obj.ajax_url, { //POST request _ajax_nonce: my_ajax_obj.nonce, //nonce action: "my_tag_count", //action title: this.value //data }, function(data) { //callback this2.nextSibling.remove(); //remove current title $(this2).after(data); //insert server response }); }); }); ``` 該腳本可以輸出到網頁上的一個塊中，也可以包含在自己的文件中。 該文件可以駐留在互聯網上的任何地方，但大多數插件開發人員將其放置在插件主文件夾的/ js /子文件夾中。 除非你有理由去做，否則你也可以遵守慣例。 在這個例子中，我們將命名我們的文件myjquery.js