03 计科083班 03014116 孙吉祥外文翻译汇总.docx

03 计科083班 03014116 孙吉祥外文翻译汇总.docx

《03 计科083班 03014116 孙吉祥外文翻译汇总.docx》由会员分享，可在线阅读，更多相关《03 计科083班 03014116 孙吉祥外文翻译汇总.docx（12页珍藏版）》请在冰豆网上搜索。

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:

">