WIKI使用導(dǎo)航
站長百科導(dǎo)航
站長專題
- 網(wǎng)站推廣
- 網(wǎng)站程序
- 網(wǎng)站賺錢
- 虛擬主機(jī)
- cPanel
- 網(wǎng)址導(dǎo)航專題
- 云計算
- 微博營銷
- 虛擬主機(jī)管理系統(tǒng)
- 開放平臺
- WIKI程序與應(yīng)用
- 美國十大主機(jī)
WordPress在插件中使用AJAX
導(dǎo)航: 上一頁 | 首頁 | WordPress中文論壇 | WordPress主機(jī) | CMS程序 | 論壇程序 | ECShop | ShopNC | PowerEasy
簡介[ ]
Ajax(異步JavaScript與XML)是一種允許網(wǎng)頁在沒有完全重新加載的情況下更新某些信息的技術(shù)。WordPress管理面板用Ajax來自動保存日志、添加新分類等。一些WordPress插件也用AJAX來計算日志投票數(shù)和鏡像更新。 這篇文章向插件開發(fā)人員介紹了怎樣在插件中添加Ajax。繼續(xù)閱讀前,最好對下面這些內(nèi)容有所了解:
怎樣在適當(dāng)?shù)腤ordPress頁面、日志或界面中添加HTML代碼——例如,如果希望在自己創(chuàng)建的管理界面上加入Ajax,首先需要了解怎樣為WordPress添加管理菜單;如果需要用Ajax來顯示某篇特殊日志,則必須要學(xué)會用適當(dāng)?shù)倪^濾器函數(shù)和動作函數(shù)將HTML添加到訪問者正瀏覽的博客頁面上。本文不涉及此類內(nèi)容。
- 要在WordPress中使用Ajax,還需要熟悉客戶端的Javascript、PHP和HTML編程語言。
試驗(yàn)表明,在插件中加入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)度和緯度,然后插件利用一項(xiàng)網(wǎng)絡(luò)服務(wù)來查看日志所在地點(diǎn)的海拔。我們將這個插件作為在WordPress插件后臺使用Ajax的實(shí)例。進(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請求是否來自正確地址的檢查和驗(yàn)證等,希望大家能夠通過這個例子對WordPress后臺上的Ajax用法有基本了解。
訪問者頁面上的Ajax[ ]
在訪問者所瀏覽的WordPress網(wǎng)頁上使用Ajax與在WordPress后臺使用Ajax略有不同。這是因?yàn)閃ordPress本身不存在內(nèi)置的訪問者頁面Ajax,但這并不重要,接下來我們會介紹怎樣在訪問者頁面上使用Ajax。如果要在WordPress后臺上使用Ajax,可以忽略這部分內(nèi)容。
在這個示例中我們假設(shè)目前有一個插件,網(wǎng)站/博客訪問者可以對某項(xià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)
</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請求是否來自正確地址的檢查和驗(yàn)證等,希望大家能夠通過這個例子對WordPress訪問者頁面上的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