編輯“WordPress在插件中使用AJAX”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>導(dǎo)航:</strong> [[WordPress插件及插件開發(fā)資源|上一頁]] | {{Template:WordPress導(dǎo)航}}</span>
<div style="clear:both;"></div>
==簡介==
[http://www.wordpress.la/codex-AJAX.html Ajax]（異步JavaScript與[[XML]]）是一種允許網(wǎng)頁在沒有完全重新加載的情況下更新某些信息的技術(shù)。WordPress管理面板用[[Ajax]]來自動保存日志、添加新分類等。一些WordPress插件也用AJAX來計算日志投票數(shù)和鏡像更新。
這篇文章向插件開發(fā)人員介紹了怎樣在插件中添加Ajax。繼續(xù)閱讀前，最好對下面這些內(nèi)容有所了解：

*[http://www.wordpress.la/codex-AJAX.html Ajax]——Ajax技術(shù)簡介   
*[http://www.wordpress.la/codex-%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91.html 插件開發(fā)]——插件編寫方法     
*[http://www.wordpress.la/codex-%E6%8F%92%E4%BB%B6API.html 插件API]—介紹過濾器鉤子和動作鉤子及其用法     
怎樣在適當(dāng)?shù)腤ordPress頁面、日志或界面中添加HTML代碼——例如，如果希望在自己創(chuàng)建的管理界面上加入Ajax，首先需要了解怎樣[http://www.wordpress.la/codex-%E5%AE%9A%E5%88%B6%E6%8F%92%E4%BB%B6%E7%AE%A1%E7%90%86%E8%8F%9C%E5%8D%95.html 為WordPress添加管理菜單]；如果需要用Ajax來顯示某篇特殊日志，則必須要學(xué)會用適當(dāng)?shù)倪^濾器函數(shù)和動作函數(shù)將[[HTML]]添加到訪問者正瀏覽的[[博客]]頁面上。本文不涉及此類內(nèi)容。     
*要在WordPress中使用Ajax，還需要熟悉客戶端的[[Javascript]]、[[PHP]]和HTML編程語言。 

試驗表明，在插件中加入Ajax并非易事，這取決于我們需要將Ajax的功能整合到WordPress后臺，還是利用Ajax為WordPress網(wǎng)站/[[博客]]的訪問者展示信息。（介紹一些常見問題后）本文將分別討論這兩種情況。
==Ajax基本知識==
總體來說，進(jìn)行一次Ajax請求需要三個步驟：
#用戶執(zhí)行某個操作（如點(diǎn)擊或拖拽鼠標(biāo)），之后嵌套在網(wǎng)頁HTML中的Javascript會生成一個“請求”并將請求發(fā)送到web服務(wù)器上某個特定URL，以此響應(yīng)用戶的操作?？紤]到安全因素，接收請求的[[URL]]與存儲Javascript的文件必須位于同一臺web[[服務(wù)器]]上。
#[[web]]服務(wù)器上的某個腳本或程序（在WordPress中通常是一個或一個以上的PHP函數(shù)）處理請求并將信息傳回[[瀏覽器]]。
#利用Javascript顯示返回的信息。

令人遺憾的是，大多數(shù)運(yùn)行在用戶的web瀏覽器中的Ajax都是[[Javascript]]，有些[[web]]瀏覽器甚至不能執(zhí)行Ajax調(diào)用或響應(yīng)Ajax調(diào)用。為方便起見，大多數(shù)Ajax開發(fā)人員選擇使用經(jīng)過測試的跨瀏覽器庫，這個瀏覽器庫利用一個帶有文件記錄的標(biāo)準(zhǔn)類來包裝瀏覽器特質(zhì)。在這篇文章中我們也利用WordPress中一個類似的瀏覽器庫——SACK（簡易Ajax代碼工具包）展開說明。文章的延伸閱讀部分（見文章最下方）中也介紹了一些用JQuery來執(zhí)行AJAX的資料——[[JQuery]]也是WordPress中的瀏覽器庫，JQuery和SACK基本原理大致相同，只是在句法上有些差別。

首先我們需要確定，組成Ajax請求的SACK庫和Javascript函數(shù)都已經(jīng)被包含在網(wǎng)頁的HTML的head版塊中，Ajax請求會在這個網(wǎng)頁上觸發(fā)；之后我們會分別介紹怎樣在WordPress后臺和訪問者瀏覽頁面上執(zhí)行Ajax。
用SACK庫生成Ajax請求時，我們還需要提供以下信息；文章稍后會詳細(xì)說明這些信息在WordPress后臺和訪問者瀏覽頁面上的作用：

#請求[[URL]]：服務(wù)器上用以處理Ajax請求的URL   
#自定義請求變量：SACK允許用戶設(shè)置任意請求變量，變量將通過POST或GET傳輸?shù)椒?wù)器上。POST和GET還能夠傳輸cookie信息。   
#出錯時如何繼續(xù)：出現(xiàn)Ajax錯誤時調(diào)用特定Javascript函數(shù)。 

默認(rèn)情況下SACK假定服務(wù)器返回的信息為進(jìn)入（異步）服務(wù)器后已被執(zhí)行的Javascript代碼。在下面的示例中，我們遵循SACK的假定，因此（處理Ajax請求的）PHP函數(shù)需要將其結(jié)果形成Javascript命令。我們打算在插件中對返回的信息進(jìn)行其它操作前，可能還需要進(jìn)入SACK的主頁下載壓縮文件并閱讀說明文檔，了解相關(guān)信息。

還有一個細(xì)節(jié)需要注意：處理Ajax請求的PHP函數(shù)應(yīng)使用PHP   die函數(shù)來傳回Javascript信息。示例：die("javascript_commands_here")。

稍后的兩個示例以上述Ajax基本知識為起點(diǎn)，分別介紹了怎樣在WordPress后臺和訪問者瀏覽頁面上使用Ajax。兩個示例部分都是獨(dú)立存在的，讀者可以選擇性閱讀。

==WordPress后臺的Ajax==
[[Ajax]]已經(jīng)存在于WordPress管理界面中，因此在插件中添加管理界面端的Ajax功能相當(dāng)容易，接下來我們會詳細(xì)介紹添加過程。如果要在WordPress網(wǎng)站/[[博客]]的訪問者瀏覽頁面上使用Ajax，可以跳過這部分內(nèi)容。

假設(shè)目前有一個地域標(biāo)簽插件，用戶會在插件中為日志設(shè)置經(jīng)度和緯度，然后插件利用一項網(wǎng)絡(luò)服務(wù)來查看日志所在地點(diǎn)的海拔。我們將這個插件作為在WordPress插件后臺使用Ajax的實例。進(jìn)行Ajax編程前，首先要提供一些字段，讓用戶能夠輸入日志的經(jīng)緯度，一個用來查詢海拔的按鈕，以及一個顯示海拔高度的字段。假設(shè)我們已經(jīng)知道怎樣在適當(dāng)位置上添加Ajax，怎樣按照自己的喜好調(diào)整字段寬度、文本以及字段樣式；然后在后臺的[[HTML]]表中加入以下代碼：

 Latitude: <input type="text" name="latitude_field" />
 Longitude: <input type="text" name="longitude_field" />
 <input type="button" value="Look Up Elevation" 
 onclick="myplugin_ajax_elevation(this.form.latitude_field, this.form.longitude_field, this.form.elevation_field);" 
 />
 Elevation: <input type="text" name="elevation_field" id="elevation_field" />
接下來我們需要定義[[Javascript]]函數(shù)myplugin_ajax_elevation，而OnClick動作函數(shù)則會讀取用戶輸入的信息，用SACK生成一個請求，然后將請求發(fā)送給插件進(jìn)行處理。之前也曾提到，這個Javascript函數(shù)和SACK庫都需要被包含在相應(yīng)管理界面HTML代碼的head版塊中；最簡單的方法是利用admin_print_scripts動作鉤子函數(shù)將JavaScript函數(shù)添加到所有管理界面中：

 add_action('admin_print_scripts', 'myplugin_js_admin_header' );
 function myplugin_js_admin_header() // this is a PHP function
 {
  // use JavaScript SACK library for Ajax
  wp_print_scripts( array( 'sack' ));
  // Define custom JavaScript function
 ?>
 <script type="text/javascript">
 //<![CDATA[
 function myplugin_ajax_elevation( lat_field, long_field, elev_field )
 {
    // function body defined below
 } // end of JavaScript function myplugin_ajax_elevation
 //]]>
 </script>
 <?php
 } 
 // end of PHP function myplugin_js_admin_header
下一步需要填寫JavaScript函數(shù)myplugin_ajax_elevation的主體部分，該部分需要能夠從表單域中讀取經(jīng)緯度，用SACK生成一個[[AJAX]]請求，然后將請求發(fā)送給服務(wù)器。在這個例子中，我們需要設(shè)置以下信息：

*請求URL：我們要將請求發(fā)送到特定URL中，WordPress管理菜單系統(tǒng)已經(jīng)定義了這個[[URL]]：(bloghome)/wp-admin/admin-ajax.php 。下面我們介紹怎樣將某個Ajax動作鉤子添加到WordPress中，告訴腳本接收到請求時應(yīng)該調(diào)用哪個插件[[PHP]]函數(shù)。為方便敘述，我們假設(shè)動作鉤子名為"myplugin_elev_lookup"。 
*自定義請求變量：我們要將經(jīng)緯度發(fā)送給[[服務(wù)器]]；我們也需要要將動作鉤子名稱發(fā)送給admin-ajax.php腳本。此外，我們還需要發(fā)送當(dāng)前頁面的cookies（其中包含登錄信息）。最后，由于服務(wù)器端函數(shù)需要返回JavaScript以顯示結(jié)果，我們還需要將海拔字段ID發(fā)送到服務(wù)器端函數(shù)上。 
整合所有信息后，JavaScript函數(shù)的主體顯示如下：
 function myplugin_ajax_elevation( lat_field, long_field, elev_field )
 {
   var mysack = new sack( 
       "<?php bloginfo( 'wpurl' ); ?>/wp-admin/admin-ajax.php" );    
  mysack.execute = 1;
  mysack.method = 'POST';
  mysack.setVar( "action", "myplugin_elev_lookup" );
  mysack.setVar( "latitude", lat_field.value );
  mysack.setVar( "longitude", long_field.value );
  mysack.setVar( "elev_field_id", elev_field.id );
  mysack.encVar( "cookie", document.cookie, false );
  mysack.onError = function() { alert('Ajax error in looking up elevation' )};
  mysack.runAJAX();
  return true;
 } // end of JavaScript function myplugin_ajax_elevation

接下來是最后一步——定義Ajax請求到達(dá)服務(wù)器時的反應(yīng)。根據(jù)文章之前的描述，我們將請求發(fā)送到(bloghome)/wp-admin/admin-ajax.php，動作函數(shù)的參數(shù)為"myplugin_elev_lookup"。我們用 wp_ajax_*動作函數(shù)告訴WordPress接收到Ajax請求時應(yīng)該調(diào)用插件中的哪個PHP函數(shù)。

[[PHP]]函數(shù)將經(jīng)緯度發(fā)送給海拔查詢服務(wù)器，等待響應(yīng)并解析返回的結(jié)果，最終根據(jù)[[JavaScript]]的指令傳回返回的信息。我們用web請求PHP類“Snoopy”（WordPress內(nèi)置類）來發(fā)送web請求。步驟如下：
 add_action('wp_ajax_myplugin_elev_lookup', 'myplugin_ajax_elev_lookup' );
 function myplugin_ajax_elev_lookup()
 {
  // read submitted information
  $lat = $_POST['latitude'];
  $long = $_POST['longitude'];
  $field_id = $_POST['elev_field_id'];
  $units = "FEET";
  // Build Snoopy URL request
  require_once( ABSPATH . WPINC . '/class-snoopy.php' );
  $sno = new Snoopy();
  $sno->agent = 'WordPress/' . $wp_version;
  $sno->read_timeout = 2;
  $reqURL = "
 http://gisdata.usgs.gov/XMLWebServices/TNM_Elevation_Service.asmx/
 getElevation?Y_Value=$lat&X_Value=$long&Elevation_Units=$units&Source_Layer=-1&Elevation_Only=1";
  // Send request to elevation server 
  if( !$sno->fetchtext( $reqURL )) {
    die( "alert('Could not connect to lookup host.')" );
  } 
  // Parse response
  if( !preg_match("|<Elevation>([\d.-]+)</Elevation>|",$sno->results)){ 
     die( "alert('Could not find elevation in lookup results.')" );
  } 
 $matches=preg_split( "|<Elevation>([\d.-]+)</Elevation>|",$sno->results); //REGEX BUG: but it'll return info
  // Compose JavaScript for return
  die( "document.getElementById('$field_id').value = " .
       $matches[1] );
} // end of myplugin_axax_elev_lookup function

OK！這時我們還需要加入一些細(xì)節(jié)內(nèi)容，像是Ajax請求是否來自正確地址的檢查和驗證等，希望大家能夠通過這個例子對WordPress后臺上的Ajax用法有基本了解。

==訪問者頁面上的Ajax==
在訪問者所瀏覽的WordPress網(wǎng)頁上使用[[Ajax]]與在WordPress后臺使用Ajax略有不同。這是因為WordPress本身不存在內(nèi)置的訪問者頁面Ajax，但這并不重要，接下來我們會介紹怎樣在訪問者頁面上使用Ajax。如果要在WordPress后臺上使用Ajax，可以忽略這部分內(nèi)容。

在這個示例中我們假設(shè)目前有一個插件，網(wǎng)站/[[博客]]訪問者可以對某項內(nèi)容投票或評分。這可以是一個投票插件、日志評分插件或者其它類似插件。我們希望達(dá)到的效果是：通過Ajax提交訪問者的投票，這樣訪問者就不需要等待頁面刷新；投票被計入結(jié)果后，更新顯示當(dāng)前投票總數(shù)。為方便起見，我們假設(shè)投票和顯示結(jié)果都是基于文本的，并且假設(shè)我們已經(jīng)編輯了主題或用WordPress過濾器函數(shù)或動作函數(shù)在WordPress訪問者頁面適當(dāng)?shù)奈恢蒙咸砑恿薍TML代碼。所添加的代碼內(nèi)容如下：

 <form>
 Your vote: <input type="text" name="uservote" />
 <input type="button" value="Vote!" onclick="myplugin_cast_vote(this.form.uservote,'voteresults');" />
 < div id="voteresults">
 (previous results output from your [[PHP]] function)
 </div>
 </form>
接下來我們需要定義Javascript函數(shù) myplugin_cast_vote，而OnClick動作函數(shù)則會讀取用戶輸入的信息，用SACK生成一個請求，然后將請求發(fā)送給插件進(jìn)行處理。我們在簡介中提到，這個Javascript函數(shù)和SACK庫都需要被包含在訪問者瀏覽頁面的HTML代碼的head版塊中。我們可以利用wp_head動作鉤子函數(shù)（當(dāng)然也可以使用條件標(biāo)簽is_xyz()中的某些函數(shù)）將JavaScript函數(shù)添加到所有訪問者瀏覽頁面中：
 add_action('wp_head', 'myplugin_js_header' );
 function myplugin_js_header() // this is a PHP function
 {
  // use JavaScript SACK library for Ajax
  wp_print_scripts( array( 'sack' ));
  // Define custom JavaScript function 
 ?>
 <script type="text/javascript">
 //<![CDATA[
 function myplugin_cast_vote( vote_field, results_div )
 {
    // function body defined below
 } // end of JavaScript function myplugin_cast_vote
 //]]>
 </script>
 <?php
 } // end of PHP function myplugin_js_header

之后需要填寫JavaScript函數(shù)myplugin_cast_vote的主體部分，該部分需要能夠從表單域中讀取投票信息，用SACK生成一個Ajax請求，然后將請求發(fā)送給服務(wù)器。在這個例子中，我們需要設(shè)置以下信息：

*請求[[URL]]：我們要將請求發(fā)送到某個插件PHP文件中，可能是插件主PHP文件，也可能是獨(dú)立[[PHP]]文件。在獨(dú)立PHP文件中發(fā)送請求相對方便。為方便敘述，我們假設(shè)這個獨(dú)立PHP文件名是"myplugin_ajax.php"，位于WordPress標(biāo)準(zhǔn)目錄wp-content/plugins中。 
*自定義請求變量：在這個例子中我們只需要發(fā)送投票信息和div的ID（返回的結(jié)果將進(jìn)入服務(wù)器）。 
整合所有信息后，JavaScript函數(shù)的主體顯示如下：

 function myplugin_cast_vote( vote_field, results_div )
 {
   var mysack = new sack( 
      "<?php bloginfo( 'wpurl' ); ?>/wp-content/plugins/myplugin_ajax.php" );    
  mysack.execute = 1;
  mysack.method = 'POST';
  mysack.setVar( "vote", vote_field.value );
  mysack.setVar( "results_div_id", results_div );
  mysack.onError = function() { alert('Ajax error in voting' )};
  mysack.runAJAX();
  return true;
 } // end of JavaScript function myplugin_cast_vote

接下來是最后一步——對Ajax請求到達(dá)服務(wù)器時的反應(yīng)進(jìn)行定義。這將會在myplugin_ajax.php文件中完成，該文件讀取已提交的投票信息，確認(rèn)投票的有效性，將投票信息存入[[數(shù)據(jù)庫]]，統(tǒng)計最新投票結(jié)果，最終將統(tǒng)計信息返回[[瀏覽器]]。如果暫時不考慮投票的處理過程，myplugin_ajax.php文件中應(yīng)包含以下信息：

 <?php
 // Put your author and license information here
 // TO DO!
 // Check request came from valid source here
 // TO DO!
 // read submitted information
 $vote = $_POST['vote'];
 $results_id = $_POST['results_div_id'];
 // Put your vote processing code here
 // In this example, assume 
 //  a) The processing code sets global
 // variable $error to a message if there is an error
 //  b) If there is no error, $results contains
 // the [[HTML]] to put into the results DIV on the screen
 if( $error ) {
   die( "alert('$error')" );
 } 
 // Compose JavaScript for return
 die( "document.getElementById('$results_id').innerHTML = '$results'" );
 ?>
OK！這時我們還需要加入一些細(xì)節(jié)內(nèi)容，像是[[Ajax]]請求是否來自正確地址的檢查和驗證等，希望大家能夠通過這個例子對WordPress訪問者頁面上的Ajax用法有基本了解。
==延伸閱讀==
*[http://amiworks.co.in/talk/simplified-ajax-for-wordpress-plugin-developers-using-jquery/ Simplified   AJAX For WordPress Plugin Developers using Jquery]
*[http://xplus3.net/2008/10/16/jquery-and-ajax-in-wordpress-plugins-administration-pages/ jQuery   and Ajax in WordPress Administration Plugins]
*[http://xplus3.net/2008/10/27/jquery-and-ajax-in-wordpress-plugins-public-pages/ jQuery   and Ajax in Plugins for Public Pages]
*[http://ocaoimh.ie/2008/11/01/make-your-wordpress-plugin-talk-ajax/ Make   your WordPress plugin talk AJAX] 

==相關(guān)條目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文檔|A]]
[[category:WordPress網(wǎng)站開發(fā)|A]]
[[category:WordPress開發(fā)文檔|A]]