- Äɲ䵤줿¹Ô¤Ï¤³¤Î¿§¤Ç¤¹¡£
- ºï½ü¤µ¤ì¤¿¹Ô¤Ï¤³¤Î¿§¤Ç¤¹¡£
&pgid();
**Ìܼ¡ [#t3508b1b]
#contents
**CGI-Ajax [#e58ed3a8]
CGI::Ajax¤ÏHTML¥Ú¡¼¥¸¾å¤ËȯÀ¸¤·¤¿JavaScript¥¤¥Ù¥ó¥È¤ò¥È¥ê¥¬¡¼¤ËÈóƱ´ü¤Ëperl¤Î¥µ¥Ö¥ë¡¼¥Á¥ó¤ò¥³¡¼¥ë¤¹¤ë¤³¤È¤ò²Äǽ¤Ë¤·¤Þ¤¹¡£¤³¤Î¤¿¤á¤Ë¡¢¤Þ¤º¡¢²¼µ¤Î¤è¤¦¤ËJavaScript¤Î¥Õ¥¡¥ó¥¯¥·¥ç¥ó̾¤ÈPerl¥µ¥Ö¥ë¡¼¥Á¥ó¤Î¥ê¥Õ¥¡¥ì¥ó¥¹¤È¤ò¥Þ¥Ã¥Ô¥ó¥°¤µ¤»¤Þ¤¹¡£
my $cjx = new CGI::Ajax( 'JSFUNC' => \&PERLFUNC );
JSFUNC¤ÏJavaScript¤Î¥Õ¥¡¥ó¥¯¥·¥ç¥ó̾¡¢PERLFUNC¤ÏJSFUNC¤Ë¥Þ¥Ã¥Ô¥ó¥°¤µ¤»¤ëPerl¥µ¥Ö¥ë¡¼¥Á¥ó¤Ç¤¹¡£
¼¡¤Ë¡¢JSFUNC¤òµ¯Æ°¤¹¤ë¥È¥ê¥¬¡¼¡ÊJavaScript¥¤¥Ù¥ó¥È¡Ë¤ò¥»¥Ã¥È¤·¤Þ¤¹¡£¤³¤³¤Ç¤Ï¡¢onClick¤òÎã¤Ë¼¨¤·¤Æ¤ß¤Þ¤¹¡£
onClick="JSFUNC(['source1','source2'], ['dest1','dest2']);"
¤³¤³¤Þ¤Ç¤Îµ½Ò¤Ë¤è¤Ã¤Æ¡¢onClick¥¤¥Ù¥ó¥ÈȯÀ¸»þ¤ËJSFUNC¤¬µ¯Æ°¤µ¤ì¡¢JSFUNC¤Ë¥Þ¥Ã¥Ô¥ó¥°¤µ¤ì¤¿Perl¤Î¥µ¥Ö¥ë¡¼¥Á¥ó(PERLFUNC)¤¬¥³¡¼¥ë¤µ¤ì¤Þ¤¹¡£
JSFUNC¤Î°ú¿ô
['source1','source2'], ['dest1','dest2']
¤Îsource1¡¢source2¡¢dest1¡¢dest2¤ÏHTML¥Ú¡¼¥¸Æâ¤Îinput¡¢¤ª¤è¤Ódiv¤Îid¤Ç¤¹¡£
<input type=text id=source1 />
<input type=text id=source2 />
<div id=dest1></div>
<div id=dest2></div>
°ú¿ô¤Ï[]¤Ç¤«¤³¤Þ¤ì¤¿¤â¤Î¤¬Æó¤Ä¤¢¤ê¤Þ¤¹¤¬¡¢ºÇ½é¤Î[]¤ÏÆþÎϤËÁêÅö¤·¡¢Æó¤ÄÌܤÎ[]¤Ï½ÐÎϤËÁêÅö¤·¤Þ¤¹¡£
¤Ä¤Þ¤ê¡¢
onClick="JSFUNC(['source1','source2'], ['dest1','dest2']);"
¤Èɽµ¤¹¤ë¤È¡¢JSFUNC¤Ø¤ÎÆþÎϤȤ·¤Æsource1¡¢source2¤¬»Ø¤·¼¨¤¹input¤Ø¤ÎÆþÎϥǡ¼¥¿¤òÅϤ·¡¢·ë²Ì¤òdest1¡¢dest2¤¬»Ø¤·¼¨¤¹div¤Ë½ÐÎϤ¹¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£JSFUNC¤ÏPERLFUNC¤È¥Þ¥Ã¥Ô¥ó¥°¤µ¤ì¤Æ¤¤¤ë¤¿¤á¡¢source1¡¢source2¤¬Perl¥µ¥Ö¥ë¡¼¥Á¥ó(PERLFUNC)¤Î°ú¿ô¤Ë¤Ê¤ê¡¢Perl¥µ¥Ö¥ë¡¼¥Á¥ó(PERLFUNC)¤Î·ë²Ì¤¬dest1¡¢dest2¤ËÊÖ¤µ¤ì¤ë¤³¤È¤Ë¤Ê¤ê¤Þ¤¹¡£
***¤â¤Ã¤È¤â¥·¥ó¥×¥ë¤ÊÎã¡Ê°ì¤Ä¤ÎÆþÎϤ˰ì¤Ä¤Î½ÐÎÏ¡Ë [#bc04fe9f]
¥·¥ó¥×¥ë¤ÊÎã¤ò¼¨¤·¤Þ¤¹¡£²¼¤Î¥×¥í¥°¥é¥à¤òŬÅö¤Ê̾Á°¤ÇÊݸ¤·¡¢¥Ö¥é¥¦¥¶¤«¤éCGI¤È¤·¤Æ¼Â¹Ô¤¹¤ë¤È¥Æ¥¥¹¥È¥Ü¥Ã¥¯¥¹¤¬É½¼¨¤µ¤ì¤Þ¤¹¡£É½¼¨¤µ¤ì¤ë¥Æ¥¥¹¥È¥Ü¥Ã¥¯¥¹¤Ëʸ»úÎó¤òÆþÎϤ¹¤ë¤È¡Ê¡áJavaScript¤Îkeyup¥¤¥Ù¥ó¥È¤¬È¯À¸¤¹¤ë¤È¡Ë¡¢¡Ö[ÆþÎϤ·¤¿Ê¸»úÎó]¤¬ÆþÎϤµ¤ì¤Þ¤·¤¿¡×¤È²èÌ̤ËÈóƱ´ü¤Çɽ¼¨¤·¤Þ¤¹¡£
#!/usr/bin/perl
use strict;
use CGI;
use CGI::Ajax;
use Jcode;
my $cgi = new CGI;
my $cjx = new CGI::Ajax( 'exported_func' => \&perl_func );
print $cjx->build_html( $cgi, \&show_HTML );
sub perl_func {
my $input = shift;
my $output = $input . "¤¬ÆþÎϤµ¤ì¤Þ¤·¤¿";
Jcode::convert(\$output, 'utf8', 'euc');
return $output;
}
sub show_HTML {
my $html = <<EOHTML;
<html>
<body>
²¿¤«ÆþÎϤ·¤Æ¤¯¤À¤µ¤¤¡£
<input type="text" name="val1" id="val1" onkeyup="exported_func( ['val1'], ['resultdiv'] );"/>
<br/>
<div id="resultdiv"></div>
</body>
</html>
EOHTML
Jcode::convert(\$html, 'utf8', 'euc');
return $html;
}
val1¾å¤Çkeyup¥¤¥Ù¥ó¥È¤¬È¯À¸¤¹¤ë¤Èexported_func¤¬µ¯Æ°¤µ¤ì¡¢exported_func()¤Ë¥Þ¥Ã¥Ô¥ó¥°¤µ¤ì¤¿perl_func()¤¬val1¤Îvalue¤ò°ú¿ô¤Ë¤·¤Æ¥³¡¼¥ë¤µ¤ì¤Þ¤¹¡£perl_func¤Ïval1¤Îvalue(=$input¤Ë³ÊǼ)¤ò¡Ö¤¬ÆþÎϤµ¤ì¤Þ¤·¤¿¡×¤È¤¤¤¦Ê¸»úÎó¤È·ë¹ç¤·¤Æ(=$output¤Ë³ÊǼ)¡¢return¤·¤Þ¤¹¡£¤³¤Î¥ê¥¿¡¼¥ó¤µ¤ì¤¿$output¤¬exported_func()¤ÎÂ裲°ú¿ô¤Ë»ØÄꤵ¤ì¤¿resultdiv¤¬»Ø¤·¼¨¤¹div¤ÎÃͤȤ·¤ÆÊÖ¤µ¤ì¤Þ¤¹¡£
$cjx->build_html()¤ÏCGI¥ª¥Ö¥¸¥§¥¯¥È¤È²èÌ̤ÎHTML¤òÊÖ¤¹¥µ¥Ö¥ë¡¼¥Á¥ó¤Ø¤Î¥ê¥Õ¥¡¥ì¥ó¥¹¤ò°ú¿ô¤Ë¤È¤Ã¤Æ¡¢Ajax¥³¡¼¥É¤òÁȤ߹þ¤ó¤ÀHTML¤Îʸ»úÎó¤òÊÖ¤·¤Þ¤¹¡£
***Ê£¿ô¤ÎÆþÎϤËÊ£¿ô¤Î½ÐÎÏ [#f217c6df]
onClick="JSFUNC(['source1','source2'], ['dest1','dest2']);"
¤Î¤è¤¦¤ÊÊ£¿ô¤ÎÆþ½ÐÎϤËÂбþ¤¹¤ë¤Ë¤Ï¡¢Perl¤Î¥µ¥Ö¥ë¡¼¥Á¥ó(PERLFUNC)¤ÇÊ£¿ô¤ÎÃͤò°ú¿ô¤Ç¼õ¤±¼è¤ê¡¢ÇÛÎó¤ÇÃͤòÊÖ¤»¤Ð£Ï£Ë¤Ç¤¹¡£
sub perl_func {
my $source1 = shift;
my $source2 = shift;
my $output1 = "source1¤Ë" . $source1 . "¤¬ÆþÎϤµ¤ì¤Þ¤·¤¿";
my $output2 = "source2¤Ë" . $source2 . "¤¬ÆþÎϤµ¤ì¤Þ¤·¤¿";
Jcode::convert(\$output1, 'utf8', 'euc');
Jcode::convert(\$output2, 'utf8', 'euc');
return ($output1, $output2);
}
Î㤨¤Ð¡¢¾å¤Î¤è¤¦¤Ë¥µ¥Ö¥ë¡¼¥Á¥ó¤òÄêµÁ¤¹¤ë¤È¡¢$source1¡¢$source2¤Ë¤½¤ì¤¾¤ìsource1¡¢source2¤Ç¤ÎÆþÎÏÃͤ¬³ÊǼ¤µ¤ì¡¢$output1¤ÎÃͤ¬dest1¤Ë¡¢$output2¤ÎÃͤ¬dest2¤ËÊÖ¤µ¤ì¤Þ¤¹¡£
***Æȼ«¤ÎJavaScript¥Õ¥¡¥ó¥¯¥·¥ç¥ó¤ËPerl¥µ¥Ö¥ë¡¼¥Á¥ó(PERLFUNC)¤ÎÊÖ¤êÃͤòÅϤ¹ [#qa2cb716]
Æȼ«¤ËÄêµÁ¤·¤¿JavaScript¥Õ¥¡¥ó¥¯¥·¥ç¥ó¤ËPerl¥µ¥Ö¥ë¡¼¥Á¥ó(PERLFUNC)¤ÎÊÖ¤êÃͤòÅϤ¹¤³¤È¤â¤Ç¤¤Þ¤¹¡£
onClick="exported_func(['input1'],[js_process_func]);"
¾å¤Îjs_process_func¤¬ÊÖ¤êÃͤòÅϤ¹JavaScript¥Õ¥¡¥ó¥¯¥·¥ç¥ó̾¤Ç¤¹¡£id¤ò»ØÄꤹ¤ë»þ¤È°Û¤Ê¤ê¡¢'¤Ç³ç¤ê¤Þ¤»¤ó¡£('¤Ç³ç¤ë¤Èid¤È¤ß¤Ê¤·¤ÆCGI::Ajax¤ÏÆ°ºî¤·¤Þ¤¹¡Ë
Perl¥µ¥Ö¥ë¡¼¥Á¥ó(PERLFUNC)¤¬Ê£¿ôÃÍ(=ÇÛÎó)¤òÊÖ¤¹¾ì¹ç¤Ïjs_process_func()¤ÎÊý¤Çarguments¥ª¥Ö¥¸¥§¥¯¥È¤òÍøÍѤ·¤Æ¼èÆÀ¤·¤Æ¤¢¤²¤ëɬÍפ¬¤¢¤ê¤Þ¤¹¡£
function js_process_func () {
var input1 = arguments[0];
var input2 = arguments[1];
// ¼«Ê¬¤ÇgetElementById¤Ç½ÐÎÏÀè¤òÆÃÄꤷ¤ÆÃͤò¥»¥Ã¥È¤¹¤ëɬÍ×¥¢¥ê
document.getElementById('outputdiv').innerHTML = input1 + '¤È' + input2;
}
***³°Éô¤Î¥¹¥¯¥ê¥×¥È¤Ë¥ê¥¯¥¨¥¹¥È¤¹¤ë [#j13f3c71]
³°Éô¤Î¥¹¥¯¥ê¥×¥È¤ËAjax¤Î¥ê¥¯¥¨¥¹¥È¤òÈô¤Ð¤·¤Æ¼Â¹Ô¤µ¤»¤ë¤³¤È¤â²Äǽ¤Ç¤¹¡£¤½¤Î°Ù¤Ë¤Ï¡¢CGI::Ajax¤Î¥³¥ó¥¹¥È¥é¥¯¥¿¤Ë»ØÄꤹ¤ë¥Þ¥Ã¥Ô¥ó¥°¤ÇPerl¥µ¥Ö¥ë¡¼¥Á¥ó¥ê¥Õ¥¡¥ì¥ó¥¹¤Ç¤Ï¤Ê¤¯¡¢Âоݥ¹¥¯¥ê¥×¥È¤ÎURL¤ò»ØÄꤷ¤Þ¤¹¡£
my $url = 'scripts/other_script.pl';
my $cjx = new CGI::Ajax( 'external' => $url );
¥Ú¡¼¥¸Â¦¤Îµ½Ò¤Ï¤³¤ì¤Þ¤Ç¤ÈƱÍͤǤ¹¡£
onClick="external(['input1','input2'],['resultdiv']);"
³°Éô¥¹¥¯¥ê¥×¥È(scripts/other_script.pl)¤Ç¤ÏCGI¥ª¥Ö¥¸¥§¥¯¥È¤Îparam¥á¥½¥Ã¥É¤«¤éargs¥¡¼¤òÍѤ¤¤Æinput1¡¢input2¤ÎÆþÎϤò¼èÆÀ¤Ç¤¤Þ¤¹¡£
#!/usr/bin/perl
# scripts/other_script.pl¤ÎÎã
use strict;
use CGI;
my $cgi = new CGI;
my @input = $cgi->param('args');
print $cgi->header();
print "input length is " . @input . " . \n";
²¾¤Ë¾å¤Î¥¹¥¯¥ê¥×¥È¤òscripts/other_script.pl¤È¤¹¤ë¤È¡¢¼Â¹Ô·ë²Ì¤È¤·¤Æinput1¡¢input2¤¬¶¦¤ËÆþÎϤµ¤ì¤Æ¤¤¤ì¤Ð¡Öinput length is 2 .¡×¤È¤¤¤¦Ê¸»úÎó¤¬resultdiv¤ËÊÖ¤µ¤ì¤Þ¤¹¡£
***GET / POST ¤ÎÀÚ¤êÂؤ¨ [#o9ff7151]
ÈóƱ´üÄÌ¿®¤ò¼Â¹Ô¤¹¤ë»þ¤Ë¥ê¥¯¥¨¥¹¥È¤Ë»È¤¦Method¤òGET / POST¤«¤éÁª¤Ö¤³¤È¤¬¤Ç¤¤Þ¤¹¡£
GET¤ò»È¤¦»þ¤Ï
onClick="exported_func(['input1'],['result1'], 'GET');"
POST¤ò»È¤¦»þ¤Ï
onClick="exported_func(['input1'],['result1'], 'POST');"
¤È¤¤¤¦¤Õ¤¦¤ËJavaScript¥Õ¥¡¥ó¥¯¥·¥ç¥ó¤ÎÂ裳°ú¿ô¤Ë»ØÄꤷ¤Þ¤¹¡£
¥Ç¥Õ¥©¥ë¥È¤Ç¤ÏGET¤¬»È¤ï¤ì¤Þ¤¹¡£
**»²¹Í [#n347ad27]
-[[CGI-Ajax>http://search.cpan.org/~bct/CGI-Ajax-0.697/]]