編輯“WordPress在插件中使用AJAX”（章節(jié)）

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

在這個示例中我們假設(shè)目前有一個插件，網(wǎng)站/[[博客]]訪問者可以對某項內(nèi)容投票或評分。這可以是一個投票插件、日志評分插件或者其它類似插件。我們希望達到的效果是：通過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ā)送給插件進行處理。我們在簡介中提到，這個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文件，也可能是獨立[[PHP]]文件。在獨立PHP文件中發(fā)送請求相對方便。為方便敘述，我們假設(shè)這個獨立PHP文件名是"myplugin_ajax.php"，位于WordPress標(biāo)準(zhǔn)目錄wp-content/plugins中。 
*自定義請求變量：在這個例子中我們只需要發(fā)送投票信息和div的ID（返回的結(jié)果將進入服務(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請求到達服務(wù)器時的反應(yīng)進行定義。這將會在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用法有基本了解。