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

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

假設(shè)目前有一個(gè)地域標(biāo)簽插件，用戶會(huì)在插件中為日志設(shè)置經(jīng)度和緯度，然后插件利用一項(xiàng)網(wǎng)絡(luò)服務(wù)來(lái)查看日志所在地點(diǎn)的海拔。我們將這個(gè)插件作為在WordPress插件后臺(tái)使用Ajax的實(shí)例。進(jìn)行Ajax編程前，首先要提供一些字段，讓用戶能夠輸入日志的經(jīng)緯度，一個(gè)用來(lái)查詢海拔的按鈕，以及一個(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ì)讀取用戶輸入的信息，用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
下一步需要填寫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)作鉤子名稱發(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ā)送給海拔查詢服務(wù)器，等待響應(yīng)并解析返回的結(jié)果，最終根據(jù)[[JavaScript]]的指令傳回返回的信息。我們用web請(qǐng)求PHP類“Snoopy”（WordPress內(nè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用法有基本了解。