03 计科083班 03014116 孙吉祥外文翻译汇总.docx
《03 计科083班 03014116 孙吉祥外文翻译汇总.docx》由会员分享,可在线阅读,更多相关《03 计科083班 03014116 孙吉祥外文翻译汇总.docx(12页珍藏版)》请在冰豆网上搜索。
![03 计科083班 03014116 孙吉祥外文翻译汇总.docx](https://file1.bdocx.com/fileroot1/2023-2/7/d5cbd8dc-184d-419b-9fbc-2bf43eb1481a/d5cbd8dc-184d-419b-9fbc-2bf43eb1481a1.gif)
03计科083班03014116孙吉祥外文翻译汇总
山 东 轻 工 业 学 院
外文资料及中文译文
院系名称信息学院
学生姓名孙吉祥
学生学号200803014116
专业班级_计科08-3
指导教师姜文峰
年月日
外文资料
出处:
EasyAjaxwithjQueryArticle
Ajaxischangingwebapplications,givingthemaresponsivenessthat’sunheardofbeyondthedesktop.Butbehindallthehype,there’snotmuchtoAjax—(X)HTML,JavaScript,andXMLarenothingnew,andinthistutorial,I’llshowyouhowtosimplifytheprocessofaddingAjaxtoyourapplicationevenfurtherwiththehelpofjQuery,apopularJavaScriptlibrary.
What’sAjax?
You’veprobablyheardaboutAjaxbefore,oratleastusedanAjax-basedapplication—Gmail,forinstance.Quitesimply,AjaxisatechniqueforhandlingexternaldatathroughJavaScriptasynchronously,withoutreloadingtheentirepage.SitePointoffersagoodintroductiontoAjax.JesseJamesGarrettiscreditedwithcoiningtheterminthisarticle.Unfortunately,in-depthtutorialsonpracticalwaystoentertheworldofAjaxarefewandfarbetween.Toaddtotheproblem,theXMLHttpRequestclassusedbyAjaxisn’tveryeasyforbeginningwebdeveloperstouse.Luckily,anumberofJavaScriptlibrariesofferaneasierway.TodayI’llshowyouhowjQuery—oneoftheselibraries—allowsyoutoeasilyaddAjaxtoyourapplication.
What’sjQuery?
jQueryisanothermatureJavaScriptlibrarythatofferssomefeaturesthattheothersdonot.Admittedly,it’snotexactlyaslightweightassomeoftheotherofferings:
jQuerycomesinat19kb,whilemoo.fxisonly3kb.YoucanreadmoreaboutjQueryatTheJavaScriptLibraryWorldCupforacomparisonofafewotherJavaScriptlibrariesthatoffersimilarfunctionality.
AssumedKnowledge
Tocompletethistutorial,you’llneedsomebasicJavaScriptknowledge.IfyouknowanyC-stylelanguages,you’llgetthehangofJavaScriptinnotime.Justthinkcurlybraces,functiondeclarations,andoptionalsemicolonsattheendofeachline(they’renotoptionalwithjQuery,though).Ifyou’rekeentogetstartedwithJavaScript,seethisexcellent,conciseJavaScripttutorialdesignedforprogrammers.Also,sincewe’retalkingaboutwebapplications,abasicknowledgeofHTMLisrequired.
jQuery101
Let’swalkthroughaquickintroductiontojQuery.Tobeabletouseitinyourpages,you’llfirstneedtodownloadthelibrary.Youcandownloadthelatestversion—1.1.2atthetimeofwriting.jQuery’smethodologyissimple:
findthings,dostuff.Weselectelementsfromthedocument(viatheDOM)usingthejQueryfunction,aliasedas$().Thishandyfunctionactsjustlikedocument.getElementById(),exceptthatinsteadofonlysupportingIDs,itsupportsCSSselectorsandsomeXPathselectors;and,insteadofreturningoneelement,itcanreturnanarrayofelements.Okay,somaybeabetterdescriptionof$()isthatit’slikedocument.getElementById()onsteroids.
Wethenusefunctionstoperformactionsonourselections.Forexample,toappendthetext“HelloWorld!
”toalldivswiththeclass'foo',thensetthecolortored,we’dusethefollowingcode:
$("div.foo").append("HelloWorld!
").css("color","red");
Easy!
Normally,thistaskwouldrequiretwolinesofcode,likeso:
$("div.foo").append("HelloWorld!
");
$("div.foo").css("color","red");
jQuery’schainablemethodsallowustowritemuchmorecompactcodethanotherJavaScriptlibraries.TherearefunctionsinjQuerythatdon’tneedanobject,astheyworkindependently,andmanyoftheAjaxfunctionsfallintothisgroup.Forexample,thepostfunction,whichwewillsoonmakeuseof,iscalledbytyping$.post(parameters).FormorejQueryfunctions,checktheonlinedocumentationor.
Example1–OurFirstAjaxApplication
Asanexample,we’regoingtomakeaninteractiveconceptgenerator.Basically,thisinvolvesourselectingtwotermsatrandomfromalist,thencombiningthemtocreateaphrase.Forthisexercise,we’lluseweb2.0buzzwords(‘Mashup’,‘Folksonomy’,‘Media’andsoon),andnormallywe’dfetchthesetermsfromaflatfile.Tosaveyoufromdownloadingeverysinglecombination(oratleasteveryelement)inJavaScript,we’regoingtogenerateitontheflyattheserverend,andfetchitfortheclientwithjQuery.jQueryintegratesperfectlywithnormalJavaScript,soyou’llfinditaneasytasktoworkitintoyourcode.
Server-sideCode(PHP)
Tokeepitsimple,we’llusethebasiccodebelowtocreateourconceptgenerator.Don’tworryabouthowitworks,justlookatwhatitdoes:
itoutputsarandomizedquote.Notethatthiscodedoesn’toutputXML—itmerelyoutputsrawtext:
php
header("Cache-Control:
no-cache");
Ideally,you'dputtheseinatextfileoradatabase.
Putanentryoneachlineof'a.txt'anduse$prefixes=file("a.txt");
Youcandothesamewithaseparatefilefor$suffixes.
$prefixes=array('Mashup','2.0','Tagging','Folksonomy');
$suffixes=array('Web','Push','Media','GUI');
Thisselectsarandomelementofeacharrayonthefly
echo$prefixes[rand(0,count($prefixes)-1)]."isthenew"
.$suffixes[rand(0,count($prefixes)-1)];
Exampleoutput:
TaggingisthenewMedia
?
>
Here,I’veusedtheCache-ControlheaderresponsebecauseInternetExplorerhasahabitofcachingpagesthathavethesameURL,evenifthecontentbetweenthepagesdiffers.Obviously,thatdefeatsthepurposeofourscript—theproductionofanewquoteoneveryload.WecouldhaveusedjQuerytoincludearandomnumberintheURLthatwouldthenbediscarded,butit’seasiertoaddressthiscachingissueontheserversidethantheclientside.
Client-sideCode(HTML)
Let’sstartcreatingtheHTMLforthefrontend,thenworkourAjaxintoit.Allweneedonthepageisabuttonthatuserscanclicktorequestanotherquote,andadivintowhichwe’llputthequoteoncewe’vereceiveditfromtheserver.We’llusejQuerytoselectthisdivandloadthequoteintoit,andwe’llreferencethedivbyitsid.Ifwewantedto,wecouldusejQuerytoloadthequoteintomultipleelements,withthehelpofaclass,butanidisallweneedfornow.Let’smakethisthecontentofourbodyelement:
">
Wecanputthequoteitselfinsidethediv.Normally,we’dhavealengthyonSubmiteventforthebutton(theinputwiththeid'generate').Sometimes,we’dhaveanonSubmiteventhandlerthatcalledaJavaScriptfunction.ButwithjQuery,wedon’tevenneedtotouchtheHTML—wecanseparatebehavior(theeventhandler)fromthestructure(thepageHTML)withease.
It’stimetobringourbackendtogetherwithourfrontendusingjQuery.ImentionedearlierthatwecanselectelementsfromtheDOMwithjQuery.First,wehavetoselectthebuttonandassignanonClickeventhandlertoit.Withinthecodeforthisevent,wecanselectthedivandloadthecontentofourscriptintoit.Here’sthesyntaxfortheclickeventhandler:
Asyouprobablyalreadyknow,ifweweretoselectthiselementinCSS,the#wouldidentifythatweweremakingourselectionusingtheelement’sidattribute.YoucanuseexactlythesamesyntaxwithjQuery.Therefore,toselectthebuttonwiththeid'generate'(whichwegaveitabove),wecanusetheelementexpression#generate.Also,beawarethatthissyntaxdefinesoureventhandlerasananonymousfunctionwithintheeventitself.
MarkWubben’sJavaScriptTerminologypageoffersagreatexplanationofanonymousfunctions,ifyou’dliketoknowmore.
We’regoingtouseoneofjQuery’shigherlevelAjaxfunctions,load().Let’sassumethatourgeneratorscriptissavedasscript.php.Let’sintegrateitwithourclientsidewiththehelpoftheload()function:
Well,almost.
TheproblemwithJavaScriptisthatcodethat’snotwithinafunctionisexecutedassoonasthebrowserreachesitduringrendering—notoncethepagehasfinishedrendering.Assuch,thiscodewilltrytoattachtoanelementthathasnotyetloaded.Normally,we’dusewindow.onloadtodealwiththisissue.However,thelimitationwiththatapproachisthatwindow.onloadiscalledonceeverythinghasfinishedloading—imagesandall.We’renotinterestedinwaitingforthoseimages—it’sjusttheDOMthatwewantaccessto.
Fortunately,jQueryhas$(document).ready(),which,asitsnamesuggests,isexecutedwhentheDOMisreadytobemanipulated.
Here’sthecompletecode,includingthe$(document).readywrapperandsomebasicHTMLandCSS: