|
robert@0
|
1 #!C:/strawberry/perl/bin/perl.exe
|
|
robert@0
|
2
|
|
robert@0
|
3 use strict;
|
|
robert@0
|
4 use CGI::Ajax;
|
|
robert@0
|
5 use CGI;
|
|
robert@0
|
6
|
|
robert@0
|
7 my $func = sub {
|
|
robert@0
|
8 my $input = shift;
|
|
robert@0
|
9 my $i=6000000;
|
|
robert@0
|
10 while($i--){ }
|
|
robert@0
|
11 return "got input: $input " . 'done';
|
|
robert@0
|
12 };
|
|
robert@0
|
13
|
|
robert@0
|
14
|
|
robert@0
|
15 sub Show_HTML {
|
|
robert@0
|
16 my $html = <<EOT;
|
|
robert@0
|
17
|
|
robert@0
|
18 <html>
|
|
robert@0
|
19 <head><title>CGI::Ajax Example</title>
|
|
robert@0
|
20
|
|
robert@0
|
21 <script type=text/javascript>
|
|
robert@0
|
22 // these 2 functions provide access to the javascript events. Since
|
|
robert@0
|
23 // is an object anything here will apply to any div that uses a
|
|
robert@0
|
24 // cgi::ajx registered function. as a convenience, we send in the id
|
|
robert@0
|
25 // of the current element (el) below. but that can also be accessed
|
|
robert@0
|
26 // this.target;
|
|
robert@0
|
27 // if these are not defined, no problem...
|
|
robert@0
|
28 pjx.prototype.pjxInitialized = function(el){
|
|
robert@0
|
29 document.getElementById(el).innerHTML = 'Loading';
|
|
robert@0
|
30 document.getElementById(el).style.backgroundColor = '#ccc';
|
|
robert@0
|
31 }
|
|
robert@0
|
32
|
|
robert@0
|
33 pjx.prototype.pjxCompleted = function(el){
|
|
robert@0
|
34 // here we use this.target:
|
|
robert@0
|
35 // since this is a prototype function, we have access to all of hte
|
|
robert@0
|
36 // pjx obejct properties.
|
|
robert@0
|
37 document.getElementById(this.target).style.backgroundColor = '#fff';
|
|
robert@0
|
38 }
|
|
robert@0
|
39
|
|
robert@0
|
40 </script>
|
|
robert@0
|
41 </head>
|
|
robert@0
|
42 <body>
|
|
robert@0
|
43 <form>
|
|
robert@0
|
44 Enter Something:
|
|
robert@0
|
45 <input type="text" name="val1" id="val1" size="6" onkeyup="jsfunc( ['val1'], 'result' ); return true;"><br>
|
|
robert@0
|
46 Enter Something:
|
|
robert@0
|
47 <input type="text" name="val2" id="val2" size="6" onkeyup="jsfunc( ['val2'], 'another' ); return true;"><br>
|
|
robert@0
|
48 <hr>
|
|
robert@0
|
49 <div id="result" style="border: 1px solid black;
|
|
robert@0
|
50 width: 440px; height: 80px; overflow: auto">
|
|
robert@0
|
51 </div>
|
|
robert@0
|
52
|
|
robert@0
|
53 <div id="another" style="border: 1px solid black;
|
|
robert@0
|
54 width: 440px; height: 80px; overflow: auto">
|
|
robert@0
|
55 </div>
|
|
robert@0
|
56 </form>
|
|
robert@0
|
57 </body>
|
|
robert@0
|
58 </html>
|
|
robert@0
|
59
|
|
robert@0
|
60 EOT
|
|
robert@0
|
61
|
|
robert@0
|
62 }
|
|
robert@0
|
63
|
|
robert@0
|
64 my $cgi = new CGI(); # create a new CGI object
|
|
robert@0
|
65 my $pjx = new CGI::Ajax( 'jsfunc' => $func );
|
|
robert@0
|
66 print $pjx->build_html($cgi,\&Show_HTML);
|
