CGI::Ajax 模組中文入手指南（修正版）
作者：JackyCheng (曾小成)
修改BY：NSNAKE 著作權歸原作者所有
發表：2006 年 6月 12 日
修改：2006.6.22
Ajax，由Jesse James Garrett創造，全稱“Asynchronous JavaScript + XML”。Ajax目前被廣泛用於更為動態、響應更靈敏的Web應用程式。該方法的關鍵在於對瀏覽器端的JavaScript、DHTML和與伺服器非同步通訊的組合。如果使用得當，這種強大的力量可以使應用程式更加自然和靈敏，從而提升使用者的瀏覽體驗。
如果你還對Ajax沒有一點感性的認識的話，這有個傢伙可以給你點不同的感覺：http://www.dragonson.com/。另外，如果你有在Perlchina測試人員中樞註冊的話，你應該也感受到一點屬於ajax的氣息？
我們好像說遠了，那麼如何在Perl寫的CGI中調用Ajax呢？幸運的是，我們並不用像其他程式員那樣把XML和JavaScript學到吐血。Perl提供了一種簡單的方法構建了一個十分強大的Ajax開發工具，這就是我們今天要介紹的CGI::Ajax模組。
l 安裝
請原諒我的囉嗦，因為的確還有好多兄弟不知道如何安裝一個簡單的模組。Linux下安裝模組最為快捷的方法自然是CPAN，於是請你在命令列下輸入($只是為了提醒你在命令列下，除此之外，他沒有其他意義)：
$ perl -MCPAN -e 'install CGI::Ajax'
之後我們就可以座在桌子前輕鬆的喝茶了。在windows下，我們需要進入命令列，輸入：
$ ppm
$ install CGI::Ajax
稍等一下，我們就可以得到安裝成功的提示。
l 一次對於Ajax的旋風旅行
開啟你的編輯器，輸入如下內容，然後放到你伺服器的根目錄下，運行它看看得到了什嗎？
#! /usr/bin/perl -w
use strict;
use CGI; # 如果用其他的CGI編解碼模組也是可以的
use CGI::Ajax;
my $cgi = new CGI;
my $ajx = new CGI::Ajax( 'exported_func' => \&sub );
print $ajx->build_html( $cgi, \&Show_HTML);
sub sub {
my $input = shift;
my $output = $input . "被輸出!";
return( $output );
}
sub Show_HTML {
my $html = qq~
<HTML>
<BODY>
請隨便輸入: <input type="text" name="val1" id="val1" onkeyup="exported_func( ['val1'], ['resultdiv'] );">
<br><div id="resultdiv"></div>
</BODY>
</HTML>~;
return $html;
}
你不用驚歎於我是如何寫出這樣如此精湛又簡潔的程式，因為，他的確不是我寫得。你可以在 http://www.perljax.us/demo/ 找到更多。
l 第一個執行個體的解讀
慶幸於我們的眼力還沒到需要別人捐獻角膜的地步，上面的程式原來是沒有行號的（你要知道我們弄成這樣全是你害的，如果不是為了讓你順利運行，我們才不去行號呢）。那就請你現在動起你的手指來。
第三行use CGI::Ajax; 該行告訴PERL我們現在要載入CGI::Ajax這個模組，如果不載入的話，後面的代碼可是會出錯的！
CGI::Ajax模組允許我們在成功載入頁面並觸發一個相應的指令後，調用Perl 的子程式。於是在第5行，我們看到如下的代碼：
my $pjx = new CGI::Ajax( 'exported_func' => \&perl_func );
該行聲明一個CGI::Ajax對象並使perl_func這個子程式被對象裡面的exported_func（我們先不管它是什麼，先往下看）所引用，此後當頁面內調用exported_func時，該子程式將會被執行。
現在我們看到第22行，exported_func被一個事件綁定，當事件觸發時，那麼Perl就會先找到exported_func，然後再執行對應的perl_func。由此我們可以得出，exported_func只是起一個中間量作用，用於串連perl的子程式及頁面事件。
注意，exported_func在這隻是個名字而已，並沒有什麼特殊。於是你可以把他叫做dog、pig，甚至小泉純一郎（要知道自從Perl支援了Unicode之後，用什麼作為變數名幾乎都是可能的，不過不建議這樣做，就如MYSQL支援中文表名但我想沒幾個人會用一樣吧）。同樣，我們也可以同時使用更多的“對應”，例如：
my $pjx = new CGI::Ajax( 'ec' => \&dog,'pz' => \&pig);
確立對應之後我們所做的就是建造完整的HTML代碼，最後，在第七行，我們通過build_html()來調用CGI模組輸出完整的代碼。（實際上build_html()這個函數可不簡單，我們後面再細說）
l 更為進階的執行個體：在頁面內執行外部程式
其實在Ajax中更常用的功能好像是調用一個外部程式，然後產生某些結果再返回頁面（nsnake:比如做無重新整理顯示資料的頁面）。就好像PerlChina會員系統的註冊頁面，你可以先去這裡玩一下( http://member.perlchina.org/register，nsnake：或者163的郵箱也是很好的例子 )，當然，請不要搞垮這個智慧的系統，如果他們的系統工程師憤怒起來，我的後果是很慘重的（nsnake：好像也沒你說的那容易誇掉的吧！）。
就像你看到的那樣，當你輸入一些資料時（nsnake:比如當你輸入使用者名稱後繼續填寫下面的資訊），此時事件開始執行（nsnake:AJAX的資料提交分同步和非同步執行，具體意思大家可以搜尋下，這裡的資訊提交應該是非同步），此時你的註冊名其實已經被提交到後台進行資料檢測並返回結果，而此時前台會通過JS指令碼接受這個返回的結果並顯示在頁面上。（nsnake:不用擔心不會編寫JS指令碼的問題，當你使用這個模組的時候它已經把一切都給你安排好的）
整個過程看似與第一個執行個體大致相同，只是第一個程式調用的是Perl子進程，而第二個程式調用的是外部的程式（nsnake：也就是把資料提交到另外的一個頁面並交個它去處理）。不用擔心這會很複雜，因為我們只需把最開始的 'exported_func' => \&perl_func裡面的perl_func子程式換成我們需要的頁面即可。
#! /usr/bin/perl -w
use strict;
use CGI; # 如果用其他的CGI編解碼模組也是可以的use CGI::Ajax;
my $cgi = new CGI;
my $url = 'scripts/other_script.pl';
my $pjx = new CGI::Ajax( 'external' => $url );
print $pjx->build_html( $cgi, \&Show_HTML);
sub Show_HTML {
my $html = qq~
<HTML>
<BODY>打點有意思的: <input type="text" name="val1" id="val1"><br><input type="text" name="val2" id="val2" onkeyup="external(['val1',"val2"],['resultdiv'];"><br>
<div id="resultdiv"></div></BODY></HTML>~;
return $html;
}
當外部程式被調用時，它將得到一個名為 'args' 的數組，裡面涵蓋了所有在原程式中被指定輸出的資料。
my @input = $cgi->param('args');
$input[0];
$input[1];# 可能還有更多，等等等等.......
l 更加豐富的傳遞方法
事實上，我們每個人都必須個人化，否則世界也將不稱之為世界了。於是總有些程式會指定一些特別的參數讓你來傳遞，例如有一個外部程式xx.cgi只接受名為cook和meal的資料，那我們怎麼辦呢？這裡有一種方法：
onClick="exported_func(['args__42'],['resultdiv']);"
這時你就得到了類似執行於script.pl?args=42這樣的結果。
另外有些時候我們只想傳遞變數而不是頁面中的元素，那麼你應該這樣做：
onClick="exported_func(['args__$input1','args__$input2'],['resultdiv']);"
如果你想收到從一個外部的程式傳來的更多組資料，那麼你需要把那些資料用“__pjx__”串聯起來。
精力的問題，我們不能說太多（事實上如果全都說完應該可以寫本書了），但是這些對於構建一個基本的Ajax系統已經足夠多了。 That's all。希望這篇文章對你有用。
l 你不知道但不會傷害你的東西，很多
如果你的後台接受程式只能接受GET、POST傳給資料，你可以使用下面的方法來進行GET或POST方式的提交（nsnake:這對於ASP編寫的程式很重要，因為它接受GET或POST的函數是不一樣的）：
onClick="exported_func(['input1'],['result1'],'GET');" onClick="exported_func(['input1'],['result1'], 'POST');"
有時候用戶端對目標地址已經有了緩衝，於是我們此時很難得到我們想要的結果。這裡有一種方法可以使用戶端的緩衝失效：
onClick="exported_func(['input1','NO_CACHE'],['result1']);"
精力的問題，我們不能說太多（事實上如果全都說完應該可以寫本書了），但是這些對於構建一個基本的Ajax系統已經足夠多了。 That's all。希望這篇文章對你有用。我們會在接下來的幾個版本中持續更新。
附註：此文章大部分執行個體取自CGI::Ajax模組附帶文檔及示範。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
