CGI: Ajax module (revised version)
Author:Jackycheng (Zeng xiaocheng)
ModifyBy:NsnakeCopyright owned by original author
Post:2006Year6Month12Day
Modify:2006.6.22
Ajax, created by Jesse James Garret, is short for "Asynchronous JavaScript + XML ". Ajax is widely used in more dynamic and responsive web applications.Program. The key of this method is the combination of JavaScript, DHTML, and asynchronous communication with the server. If used properly, this powerful force can make the application more natural and responsive, thus improving the user's browsing experience.
If you stillAjaxIf you have no perceptual knowledge, this guy can give you a different feeling:Http://www.dragonson.com/. In addition, if you havePerlchinaIf you register at the member center, you should also feel thatAjax?
How can wePerlWrittenCGICallingAjaxWhat about it? Fortunately, we don't useXMLAndJavascriptLearn to vomit blood.PerlProvides a simple method to build a very powerfulAjaxDevelopment tools. This is what we will introduce todayCGI: AjaxModule.
LInstall
Forgive me, because many other brothers do not know how to install a simple module.LinuxWhich of the following is the quickest way to install the module?CPANSo enter($It's just to remind you that it doesn't make any sense in the command line.):
$ Perl-mcpan-e 'Install CGI :: Ajax '
Then we can sit at the desk and enjoy tea easily. InWindowsNext, we need to enter the command line and enter:
$ Ppm
$ Install CGI: Ajax
Wait a moment and we will be notified of successful installation.
LForAjaxTornado travel
Open your editor, enter the following content, put it in the root directory of your server, and run it to see what you get?
#! /Usr/bin/perl-W
Use strict;
Use CGI;#If otherCGIThe Codec Module is also available
Use CGI: Ajax;
My $ CGI = new CGI;
My $ ajx = new CGI: Ajax ('exported _ func' =>\& sub );
Print $ ajx-> build_html ($ CGI, \ & show_html );
Sub {
My $ input = shift;
My $ output = $ input ."Output! ";
Return ($ output );
}
Sub show_html {
My $ html = QQ ~
<HTML>
<Body>
Enter: <Input type = "text" name = "val1" id = "val1" onkeyup = "exported_func (['val1'], ['resultdiv ']);">
<Br> <Div id = "resultdiv"> </div>
</Body>
</Html> ~;
Return $ HTML;
}
You don't have to wonder how I wrote such a superb and concise program, because he did not write it. You can Http://www.perljax.us/demo/ Find more.
LExplanation of the First Instance
Fortunately, our eyesight hasn't reached the point where someone else needs to donate the cornea. The above program didn't have a line number (you need to know that it's all about you, if it is not for your smooth operation, we will not go to the row number ). So please start your finger now.
Row 3Use CGI: Ajax;This row tellsPerlNow we want to loadCGI: AjaxIf this module is not loadedCodeBut there will be errors!
CGI: AjaxThe module allows us to callPerl. Therefore5Line, we can see the following code:
My $ pjx = new CGI: Ajax ('exported _ func' =>\& perl_func );
This row declaresCGI: AjaxObject andPerl_funcThis subroutine isObjectInsideExported_func(No matter what it is, let's look at it first) referenced, and then called in the pageExported_funcThis subroutine will be executed.
Now we can see22Row,Exported_funcBound by an event. When an event is triggeredPerlYou will first findExported_funcAnd then execute the correspondingPerl_func. From this we can conclude that,Exported_funcOnly serves as an intermediate volume for connectionPerlSubprograms and page events.
Note,Exported_funcThis is just a name, and there is nothing special. So you can call itDog,PigOr even Mr. Quan chunichiro (you must know that sincePerlSupportedUnicodeThen, it is almost possible to use anything as a variable name, but we do not recommend that you do this, justMySQLChinese table names are supported, but I think few will use the same name ). We can also use more "mappings" at the same time, for example:
My $ pjx = new CGI: Ajax ('EC' = >\& dog, 'pz' = >\& pig );
After the establishment, what we do is to build a completeHtmlCode. Finally, in the seventh line, we useBuild_html ()To callCGIThe module outputs complete code. (ActuallyBuild_html ()This function is not simple, so we will discuss it later)
LMore advanced instances: Execute external programs on the page
In factAjaxThe more common function in seems to be to call an external program, and then generate some results and then return to the page (Nsnake:For example, the page for refreshing new data ). It's likePerlchinaOn the registration page of the member system, you can go here to playHttp://member.perlchina.org/register,Nsnake: Or163The mailbox is also a good example)Of course, please do not bring down this smart system. If their system engineers get angry, my consequences will be very heavy (Nsnake: It seems that you did not say that it is easy to boast !).
As you can see, when you enter some information (Nsnake:For example, when you enter the user name and enter the following information), the event starts to run (Nsnake: AjaxData submission is divided into synchronous and asynchronous execution. Specifically, you can search for the information submitted here ), at this time, your registration name has been submitted to the background for Data Detection and return results. At this time, the foreground will passJSThe script accepts the returned result and displays it on the page. (Nsnake:Don't worry about writingJSScript problem. When you use this module, it has already arranged everything for you)
The entire process seems to be roughly the same as the first instance, but the first program callsPerlThe second program calls an external program (Nsnake: Submit the data to another page and submit it for processing ). Don't worry, this will be complicated, because we just need'Exported _ func' = >\& perl_funcInsidePerl_funcReplace the subroutine with the page we need.
#! /Usr/bin/perl-W
Use strict;
Use CGI;#If otherCGIThe Codec Module is also availableUse 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>Interesting: <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>
Return $ HTML;
}
When an external program is called, it will get'Args'Which contains all the data specified in the original program.
My @ input = $ CGI-> param ('args ');
$ Input [0];
$ Input [1]; #There may be more, etc........
LRicher transfer methods
In fact, each of us must be personalized. Otherwise, the world will not be called the world. So some programs will specify some special parameters for you to pass, for example, there is an external programXX. cgiOnly Accept the nameCookAndMealSo what should we do? Here is a method:
Onclick = "exported_func (['args _ 42'], ['resultdiv ']);"
In this case, you get a command similarScript. pl? ARGs = 42Such a result.
In addition, sometimes we only want to pass variables instead of elements on the page, so you should do this:
Onclick = "exported_func (['args __$ input1', 'args __$ input2 '], ['resultdiv']);"
If you want to receive more groups of data from an external program, you need to use_ Pjx __.
We can't talk too much about energy issues (in fact, we can write a book if all of them are done), but these are a basicAjaxThere are enough systems. That's all. Hope this articleArticleIt is useful to you.
LYou don't know but won't hurt you.
If your background receiver only acceptsGet,PostTo transmit data, you can use the following methodGetOrPostMethod (Nsnake:ForASPThe program is very important because it acceptsGetOrPost):
Onclick = "exported_func (['input1'], ['result1'], 'get ');"Onclick = "exported_func (['input1'], ['result1'], 'post ');"
Sometimes the client has a cache for the target address, so it is difficult for us to get the desired result. Here is a way to invalidate the Client Cache:
Onclick = "exported_func (['input1', 'no _ cache'], ['result1']);"
We can't talk too much about energy issues (in fact, we can write a book if all of them are done), but these are a basicAjaxThere are enough systems.That's all. I hope this article will be useful to you. We will continue to update in the following versions.
Note: most instances in this article are taken fromCGI: AjaxModule documentation and demonstration.
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
