WordPress在插件中使用AJAX

導(dǎo)航: 上一頁(yè) | 首頁(yè) | WordPress中文論壇 | WordPress主機(jī) | CMS程序 | 論壇程序 | ECShop | ShopNC | PowerEasy

目錄

• 1 簡(jiǎn)介
• 2 Ajax基本知識(shí)
• 3 WordPress后臺(tái)的Ajax
• 4 訪(fǎng)問(wèn)者頁(yè)面上的Ajax
• 5 延伸閱讀
• 6 相關(guān)條目

簡(jiǎn)介

Ajax（異步JavaScript與XML）是一種允許網(wǎng)頁(yè)在沒(méi)有完全重新加載的情況下更新某些信息的技術(shù)。WordPress管理面板用Ajax來(lái)自動(dòng)保存日志、添加新分類(lèi)等。一些WordPress插件也用AJAX來(lái)計(jì)算日志投票數(shù)和鏡像更新。 這篇文章向插件開(kāi)發(fā)人員介紹了怎樣在插件中添加Ajax。繼續(xù)閱讀前，最好對(duì)下面這些內(nèi)容有所了解：

• Ajax——Ajax技術(shù)簡(jiǎn)介
• 插件開(kāi)發(fā)——插件編寫(xiě)方法
• 插件API—介紹過(guò)濾器鉤子和動(dòng)作鉤子及其用法

怎樣在適當(dāng)?shù)腤ordPress頁(yè)面、日志或界面中添加HTML代碼——例如，如果希望在自己創(chuàng)建的管理界面上加入Ajax，首先需要了解怎樣為WordPress添加管理菜單；如果需要用Ajax來(lái)顯示某篇特殊日志，則必須要學(xué)會(huì)用適當(dāng)?shù)倪^(guò)濾器函數(shù)和動(dòng)作函數(shù)將HTML添加到訪(fǎng)問(wèn)者正瀏覽的博客頁(yè)面上。本文不涉及此類(lèi)內(nèi)容。

• 要在WordPress中使用Ajax，還需要熟悉客戶(hù)端的Javascript、PHP和HTML編程語(yǔ)言。

試驗(yàn)表明，在插件中加入Ajax并非易事，這取決于我們需要將Ajax的功能整合到WordPress后臺(tái)，還是利用Ajax為WordPress網(wǎng)站/博客的訪(fǎng)問(wèn)者展示信息。（介紹一些常見(jiàn)問(wèn)題后）本文將分別討論這兩種情況。

Ajax基本知識(shí)

總體來(lái)說(shuō)，進(jìn)行一次Ajax請(qǐng)求需要三個(gè)步驟：

1. 用戶(hù)執(zhí)行某個(gè)操作（如點(diǎn)擊或拖拽鼠標(biāo)），之后嵌套在網(wǎng)頁(yè)HTML中的Javascript會(huì)生成一個(gè)“請(qǐng)求”并將請(qǐng)求發(fā)送到web服務(wù)器上某個(gè)特定URL，以此響應(yīng)用戶(hù)的操作。考慮到安全因素，接收請(qǐng)求的URL與存儲(chǔ)Javascript的文件必須位于同一臺(tái)web服務(wù)器上。
2. web服務(wù)器上的某個(gè)腳本或程序（在WordPress中通常是一個(gè)或一個(gè)以上的PHP函數(shù)）處理請(qǐng)求并將信息傳回瀏覽器。
3. 利用Javascript顯示返回的信息。

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

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

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

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

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

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

WordPress后臺(tái)的Ajax

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

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

接下來(lái)我們需要定義Javascript函數(shù)myplugin_ajax_elevation，而OnClick動(dòng)作函數(shù)則會(huì)讀取用戶(hù)輸入的信息，用SACK生成一個(gè)請(qǐng)求，然后將請(qǐng)求發(fā)送給插件進(jìn)行處理。之前也曾提到，這個(gè)Javascript函數(shù)和SACK庫(kù)都需要被包含在相應(yīng)管理界面HTML代碼的head版塊中；最簡(jiǎn)單的方法是利用admin_print_scripts動(dòng)作鉤子函數(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

下一步需要填寫(xiě)JavaScript函數(shù)myplugin_ajax_elevation的主體部分，該部分需要能夠從表單域中讀取經(jīng)緯度，用SACK生成一個(gè)AJAX請(qǐng)求，然后將請(qǐng)求發(fā)送給服務(wù)器。在這個(gè)例子中，我們需要設(shè)置以下信息：

• 請(qǐng)求URL：我們要將請(qǐng)求發(fā)送到特定URL中，WordPress管理菜單系統(tǒng)已經(jīng)定義了這個(gè)URL：(bloghome)/wp-admin/admin-ajax.php 。下面我們介紹怎樣將某個(gè)Ajax動(dòng)作鉤子添加到WordPress中，告訴腳本接收到請(qǐng)求時(shí)應(yīng)該調(diào)用哪個(gè)插件PHP函數(shù)。為方便敘述，我們假設(shè)動(dòng)作鉤子名為"myplugin_elev_lookup"。
• 自定義請(qǐng)求變量：我們要將經(jīng)緯度發(fā)送給服務(wù)器；我們也需要要將動(dòng)作鉤子名稱(chēng)發(fā)送給admin-ajax.php腳本。此外，我們還需要發(fā)送當(dāng)前頁(yè)面的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

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

PHP函數(shù)將經(jīng)緯度發(fā)送給海拔查詢(xún)服務(wù)器，等待響應(yīng)并解析返回的結(jié)果，最終根據(jù)JavaScript的指令傳回返回的信息。我們用web請(qǐng)求PHP類(lèi)“Snoopy”（WordPress內(nèi)置類(lèi)）來(lái)發(fā)送web請(qǐng)求。步驟如下：

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！這時(shí)我們還需要加入一些細(xì)節(jié)內(nèi)容，像是Ajax請(qǐng)求是否來(lái)自正確地址的檢查和驗(yàn)證等，希望大家能夠通過(guò)這個(gè)例子對(duì)WordPress后臺(tái)上的Ajax用法有基本了解。

訪(fǎng)問(wèn)者頁(yè)面上的Ajax

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

在這個(gè)示例中我們假設(shè)目前有一個(gè)插件，網(wǎng)站/博客訪(fǎng)問(wèn)者可以對(duì)某項(xiàng)內(nèi)容投票或評(píng)分。這可以是一個(gè)投票插件、日志評(píng)分插件或者其它類(lèi)似插件。我們希望達(dá)到的效果是：通過(guò)Ajax提交訪(fǎng)問(wèn)者的投票，這樣訪(fǎng)問(wèn)者就不需要等待頁(yè)面刷新；投票被計(jì)入結(jié)果后，更新顯示當(dāng)前投票總數(shù)。為方便起見(jiàn)，我們假設(shè)投票和顯示結(jié)果都是基于文本的，并且假設(shè)我們已經(jīng)編輯了主題或用WordPress過(guò)濾器函數(shù)或動(dòng)作函數(shù)在WordPress訪(fǎng)問(wèn)者頁(yè)面適當(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)

</form>

接下來(lái)我們需要定義Javascript函數(shù) myplugin_cast_vote，而OnClick動(dòng)作函數(shù)則會(huì)讀取用戶(hù)輸入的信息，用SACK生成一個(gè)請(qǐng)求，然后將請(qǐng)求發(fā)送給插件進(jìn)行處理。我們?cè)诤?jiǎn)介中提到，這個(gè)Javascript函數(shù)和SACK庫(kù)都需要被包含在訪(fǎng)問(wèn)者瀏覽頁(yè)面的HTML代碼的head版塊中。我們可以利用wp_head動(dòng)作鉤子函數(shù)（當(dāng)然也可以使用條件標(biāo)簽is_xyz()中的某些函數(shù)）將JavaScript函數(shù)添加到所有訪(fǎng)問(wèn)者瀏覽頁(yè)面中：

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

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

• 請(qǐng)求URL：我們要將請(qǐng)求發(fā)送到某個(gè)插件PHP文件中，可能是插件主PHP文件，也可能是獨(dú)立PHP文件。在獨(dú)立PHP文件中發(fā)送請(qǐng)求相對(duì)方便。為方便敘述，我們假設(shè)這個(gè)獨(dú)立PHP文件名是"myplugin_ajax.php"，位于WordPress標(biāo)準(zhǔn)目錄wp-content/plugins中。
• 自定義請(qǐng)求變量：在這個(gè)例子中我們只需要發(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

接下來(lái)是最后一步——對(duì)Ajax請(qǐng)求到達(dá)服務(wù)器時(shí)的反應(yīng)進(jìn)行定義。這將會(huì)在myplugin_ajax.php文件中完成，該文件讀取已提交的投票信息，確認(rèn)投票的有效性，將投票信息存入數(shù)據(jù)庫(kù)，統(tǒng)計(jì)最新投票結(jié)果，最終將統(tǒng)計(jì)信息返回瀏覽器。如果暫時(shí)不考慮投票的處理過(guò)程，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！這時(shí)我們還需要加入一些細(xì)節(jié)內(nèi)容，像是Ajax請(qǐng)求是否來(lái)自正確地址的檢查和驗(yàn)證等，希望大家能夠通過(guò)這個(gè)例子對(duì)WordPress訪(fǎng)問(wèn)者頁(yè)面上的Ajax用法有基本了解。

延伸閱讀

• Simplified AJAX For WordPress Plugin Developers using Jquery
• jQuery and Ajax in WordPress Administration Plugins
• jQuery and Ajax in Plugins for Public Pages
• Make your WordPress plugin talk AJAX

相關(guān)條目

• Drupal
• OBLOG
• X-Space
• SaBlog-X
• Bo-Blog