《Web体系结构与开发技术》实验报告说明书

PAGE1/13《Weｂ体系结构与开发技术》实验报告班级：计软二班学号：20095５3８姓名：郭凯实验日期：2０１１/1２/16实验成果：实验目的了解Web体系结构与开发技术的基本知识掌握静态页面的标签结构,能够编写静态页面。掌握Flaｓh的基本原理，会使用AdｏbeFｌａsh制作Fｌａsｈ动画。掌握动态网站技术JSP，理解其原理，并使用ＪSP技术制作个人网站.二、实验原理JSP(JavaＳerｖeｒPages)是由SunMicrosystems公司提倡、很多公司参加一起建立的一种HYＰEＲLIＮＫ”ｈｔtp://baikｅ。baiｄu.coｍ/vｉｅw/3４8756．ｈtm”\t”＿ｂｌaｎｋ"动态网页技术标准.JSP技术有点类似ＡＳＰ技术，它是在传统的HYＰERLＩNK"http：//ｂaikｅ．baidu。cｏm/vｉｅw/828。hｔm”\t"＿blank"网页HTML文件（*．htm，*.hｔmｌ)中插入ＪaｖaHＹPERLINK＂ｈtｔｐ:/／bａｉkｅ。baidｕ．com/viｅｗ/1０05３29．ｈｔm”＼t"_ｂlank"程序段（Ｓｃriｐtleｔ)和JＳP标记（taｇ），从而形成ＪSP文件（＊。ｊsp）。用JSP开发的Web应用是跨平台的,既能在Linux下运行,也能在其他HＹPERLINK”htｔｐ：//baiｋｅ。baidu。ｃoｍ／viｅw/８80。ｈｔm”＼ｔ＂＿blａnk＂操作系统上运行.JSP技术使用HYＰERＬＩＮＫ"http：//baike。baidu．cｏm/vｉew／５320１。htｍ"\t”_bｌank"Ｊａｖa编程语言编写类XML的tａgｓ和ｓcrｉｐtlｅts,来封装产生动态HＹＰＥＲLIＮＫ”http:／/bａｉke．bａiｄu。ｃoｍ／ｖｉew/828.htｍ"＼ｔ＂_blank”网页的处理规律。网页还能通过ｔａgs和scｒiptlets访问存在于服务端的资源的ＨＹＰＥRLINＫ”httｐ：//baｉke.ｂaidｕ.com／view／26４6３７8．htｍ＂\ｔ＂_blank”应用规律.JSP将网页规律与HYPERLINK”ｈtｔp://bａike．bａiｄu．com/view／8９７２.ｈtｍ"\t"＿blａnk＂网页设计和显示分离,支持可重用的基于组件的设计,使基于Web的HYＰEＲLＩNK"hｔtp:/／baike．baidｕ.com/ｖiｅw/3３01２0.htm"\t”_blaｎk＂应用程序的开发变得飞快和容易.WeｂHYPERLIＮK”httｐ：/／ｂ/ｖiew／899。htm"\ｔ”＿ｂlａnｋ"服务器在遇到访问JＳＰ网页的恳求时，首先执行其中的HYＰEＲLIＮK”ｈttp:/／ｂaike．ｂaiｄu。coｍ/vｉeｗ/100５329.ｈtm"\t"_blａnk"程序段，然后将执行结果连同ＪSP文件中的ＨTＭLHＹPERLINＫ＂ｈttｐ：／/baikｅ。baiｄ/ｖiew/4１.htｍ＂\t＂_ｂlanｋ＂代码一起返回给客户。插入的HYPERLINK＂hｔｔp:/／bａikｅ．baｉｄu。coｍ/ｖｉｅw/29.hｔm"\ｔ＂＿bｌaｎk"Ｊava程序段可以操作HYPERLIＮK”htｔp://bａiｋｅ．baidｕ.ｃom／ｖieｗ/1０8８。htｍ"＼t＂_ｂｌａnk”数据库、重新定向网页等，以实现建立动态网页所需要的功能.ＪSP与ＪavaＨYPERＬINK"http：//baikｅ。baidｕ。coｍ/ｖieｗ/25１69.htm"＼ｔ"＿blａnk"Seｒvlet一样,是在服务器端执行的，通常返回给HＹPEＲＬINK”httｐ：//bａｉke.baidu．com/ｖｉew/９30.ｈtm"＼ｔ"＿blaｎk”客户端的就是一个HTML文本,因此客户端只要有HYPERLINＫ”hｔｔp:／/ｂaiｋe．ｂaｉdu．cｏm/view/7７１8．ｈtm”\t"_blanｋ”扫瞄器就能扫瞄。三、实验步骤网站前期筹备工作。网站功能设计。网站为在线音乐网站，主要功能有:用户在线听音乐,管理员后台登录，添加、管理歌手,添加、管理歌曲等功能。数据库设计。由于网站功能较少，结构较简洁,数据库设计也比较简洁，简略如下：数据库名:ｍｕｓiｃ_db数据表设计:adｍin(管理员表）:ｉdint主键自增namｅvaｒchar（10)登录名pｗｄvarcｈａr（20)登录密码typeinｔ管理员权限soｎg（歌曲表)：idint主键自增naｍeｖarchａr（３0）歌曲名aｒｔistvaｒcｈａr(２0)艺术家(歌手）aｌbuｍvaｒcｈａr(3０)所属专辑uｒlvａrchaｒ（５0）硬盘路径ｇeｎｒevaｒchaｒ(10)流派dｕratioｎｖａrchar（１0）时长timesinｔ点播次数（热度)ａｒtｉｓt（歌手表）：idinｔ主键自增nａmevaｒchar(２0)艺术家名(歌手名)tyｐｅvaｒchaｒ（5)性别areavarcｈaｒ（20）地区noteｖaｒchａr(10００）简介soｎgｓint歌曲数量hｏｔint热度名目结构设计。在开发工具MyEｃlipｓe中新建WebPｒoject工程ｍusｉc_plａｙｅｒ,并创建如下名目:各名目说明:／sｒｃ资源名目，包含编写的各种Jaｖａ类，Sｅrvlet源文件/ＷebRoot网站根名目／ＷebRoｏt／ａdmin后台管理界面的所属名目/WｅbRooｔ/conn包含连接数据库的代码文件/ＷｅbＲoot／cｓscss样式表文件名目/ＷebRｏｏｔ/ｉmageｓ网站排版所需图片名目／WｅｂRoot／jｓjs代码文件名目/WebＲoｏt／MＥＴＡ—ＩNF系统自动生成的名目/WebＲｏot／mｕｓiｃ存放上传的音乐文件名目／WｅbRｏot/WEB－ＩNＦ存放Web信息名目，包含所需类库,配置文件网站代码编写。登录界面。原理简介:通过将lｏgin.jsｐ页面表单的actiｏn设置为．/adｍin／index．jsp，将表单填写的用户密码值传递给后台页面,后台ｉｎdｅx。ｊsp页面通过查询数据库，比对用户是否存在以及密码是否正确,如果正确，则进入后台,并设置seｓsion保存登录信息;否则返回登录页面，并通过url传递登录出错信息并显示.关键代码:见附录：代码片段1。添加歌曲界面。原理简介:后台。/admin/aｄｄ＿ｓong.jｓp界面显示添加歌曲表单.将表单属性设置为enｃｔｙpe=”mulｔipart／foｒｍ—dａta”使之能上传二进制文件，同时ａｃtion设置为ServlｅtＵｐloadSerｖlet.jａva,UpｌｏaｄSｅrｖｌet。jａｖa的主要功能为猎取上传的表单域的值，将其转码为UＴF—8格式以及将二进制歌曲文件存储到磁盘,并将数据写入到数据库中。关键代码：见附录:代码片段２。管理歌曲及歌手.原理简介：通过查询数据库，将现有歌手及歌曲的信息以表格形式显示出来,为每一个数据添加操作（删除，修改)，通过点击操作进入相应的操作页面,然后进行相应的操作，并将操作结果存如数据库,完成数据的修改。关键代码：略.防止恶意登录。为防止他人在未进行登录验证的情况下通过输入恰当的url登录后台,在登录后台页面时均会检验其是否已登录,即检验是否已设置ｓｅssioｎ值，如已设置，才能登录，否则会跳转到登录页面。且sessｉｏn的设置只有在其登录成功后才能设置生效。当退出后,会立即清楚sessｉon值.关键代码:略。前台主页面各功能规律.原理简介：通过点击导航条，主页获得查询字符串中的值对,获得要显示的内容及定位.例如导航条中的排行榜，其链接为。/ｉｎｄｅx。ｊsp？ｃuｒrｅｎt=ranｋ,则为链接到主页(即本页面），并传递cｕrrｅnｔ=rank值对，主页通过获得值对,知道要显示的内容为“排行榜”,于是进行相应的工作，如查询数据库，设置相应的值，然后将数据显示到页面的相应标签内。关键代码：见附录:代码片段３。前台播放歌曲功能。原理简介：播放歌曲功能主要通过加载WｉndｏwsMeｄiaPlayｅr控件来实现歌曲的播放.其主要内容为<objｅcｔ〉标签,并通过〈parａm＞标签为其设置参数，加载控件。歌曲的播放,暂停，音量大小由jｓ代码掌握控件实现。当点击歌曲后面的播放链接后,如。/iｎdex.jsp？cｕｒrenｔ=ｒａnk&plａｙ=1３，主页通过play=13获得要播放歌曲的ID，通过查询数据库获得歌曲的磁盘路径，并将路径值设置给一个隐藏的标签,在页面初始化后,jｓ代码获得路径值，并传递给控件,然后点击播放按钮，则能通过js播放歌曲。关键代码:见附录：代码片段4。四、实验结果代码片段1(登录验证）//推断是否已登录(即是否已设置ｓession值）//已登录则猎取值，未登录则返回登录页面iｆ（ｓessiｏn．gｅｔＡttｒibuｔｅ（"aｄmｉｎ＿nａme”)!=ｎuｌl）//ｓesｓiｏｎ已设置ﻩadmin_name=ｓession．ｇｅtAttｒibｕte(”ａdmiｎ_name").toＳtriｎg(）；ｅlseif（sesｓioｎ。geｔAttrｉbuｔe(”ａｄmｉn＿nａｍe”)＝=null＆＆reｑuｅｓt．ｇetＰａrameｔeｒ("ｎａmｅ＂）==null）／/seｓｓｉｏn未设置且不是从登录页面转来此页面 reｓpoｎse。sｅｎdRediｒｅct（＂.．/lｏgin．jsｐ？ｉｓlogin＝unｌoｇｉn"）；eｌｓe／／从登录页面转来此页面,猎取表单,检验正确性｛ﻩ//猎取表单数据ﻩif(ｒequest。gｅｔＰaraｍeter（＂naｍｅ＂)！=nｕll） name=reｑueｓｔ.getPａｒamｅｔｅr("nａmｅ”）。toＳtrinｇ（)； ｉf（reqｕeｓt．ｇｅtPaｒameｔｅr("ｐwd"）！=ｎull） ｐｗd＝reｑuest。gｅtParａmetｅr（"pwd”）．ｔｏＳtring（);ﻩ//转码ﻩﻩｎａme＝newSｔriｎg(nａｍe。gｅtＢytes（"ISＯ-885９—1"）,”ＵTＦ—8”）；ﻩｐwｄ=newＳtrｉnｇ（ｐwｄ.ｇetByteｓ（”ISO—8８59-1＂)，＂ＵTF—8”）；ﻩ／/查询数据库ﻩsql=＂ｓeleｃｔ＊frｏmadｍiｎwheｒeｎａme＝＇＂+name+＂’"；ﻩResuｌtＳｅｔｒs=stmｔ.exeｃuteQｕerｙ(sql）；ﻩSｔriｎｇqｕery＿ｐwｄ=”"；ﻩﻩiｆ（ｒs。ｎｅxｔ()） query＿ｐwd＝rs.geｔStrｉｎｇ("ｐｗd”);ﻩ//比对密码ﻩiｆ（query_ｐwｄ==＂"|｜!ｐwd．equａｌｓ(ｑuｅry_pwｄ)）/／用户名或密码不对，重新登录 ｒesponse。ｓenｄRedireｃt（”。./logiｎ.jsp?ｉslogin＝wrong”）; elｓe／/登录成功,设置sessｉonﻩﻩｓｅssion。setAｔtｒibutｅ(”aｄmｉn＿ｎame"，name);}代码片段2（添加歌曲的SｅｒvlｅｔＵploadSeｒvｌｅt.jaｖa)impoｒｔorg．ａpａche．commｏns．fｉleuｐｌoad．FｉｌｅＩtem;impoｒtｏｒg。aｐache．ｃｏmmｏnｓ.fiｌeupｌoad．FileItemＦactｏrｙ；impｏrtorｇ。ａpａmｏns．ｆｉlｅｕpload。ＦｉleＵplｏadExcepｔion;importorg.ａpachｅ.coｍｍons．ｆileｕｐload.diｓｋ。ＤｉsｋFiｌｅＩｔｅmＦａcｔory;ｉｍpｏrtoｒｇ.apａmons．fileｕｐloａd.ｓｅrvｌet．SｅrｖleｔFｉleUplｏad；impｏrｔjａｖa。teｘt.SｉmpleＤatｅＦormaｔ;impoｒｔjava．util。Ｃalｅｎdar；iｍportjａｖａ。utｉｌ．Dａｔe；ｉｍporｔjａva.ｕｔｉｌ。Iｔeraｔｏr；ｉmpoｒｔjａｖa．util.Liｓｔ;ｉmporｔjａvａ。io.*；imｐoｒtｊａvａ。ｓql。＊;ｉｍpｏrｔｊavａx.ｓervlet。*；iｍpoｒｔjａvａｘ.ｓｅrｖlet。hｔtp。＊；pubｌicｃlａｓsＵpｌoadSｅrvｌeｔｅxtｅndsHtｔpＳervｌｅt{ﻩｐｕblｉcvｏiｄｓervｉｃe（ＨtｔpSerｖｌeｔRequestｒeｑuest，HttｐSｅｒvletResｐonｓeｒeｓpoｎse）tｈrowｓＳervletEｘｃeｐｔioｎ，ＩOExｃeptｉｏｎﻩ{ ﻩｔryﻩ { ﻩﻩrequｅｓｔ．ｓetCharacｔerEncｏdｉnｇ（”UTＦ－8")；ﻩ ﻩrｅspｏnse。ｓｅｔＣｏnｔenｔType(”tｅxt/html;cｈａｒseｔ=UTF—8＂)； ﻩＰｒｉntWriterouｔ＝ｒesponsｅ。ｇｅtＷrｉｔｅｒ（)；ﻩﻩﻩﻩﻩﻩＦilｅIｔemＦaｃｔorｙfａctorｙ=nｅwDｉsｋＦileIｔeｍFａｃtorｙ()；ﻩﻩ ServletＦileＵｐｌoａduplｏａd=ｎｅwServｌeｔFileUｐloａd（factoｒy）；ﻩﻩ List〈FilｅIｔem＞ｉtems＝uｐloａd。ｐａｒsｅRｅquｅsｔ（rｅｑuesｔ)； ﻩＩｎpｕｔStｒeａmis=ｎｕll； ﻩ SｔrｉｎgｕｐlｏadPａth＝"D:\\ｗorkｓpace\\mｕsｉc_ｐｌａyeｒ\\WeｂＲoｏｔ＼＼muｓｉｃ＼\”;/／存储路径ﻩﻩ Striｎgfilename＝＂”；ﻩ ﻩﻩＳtringｒesｕlt="＂;／/结果字符串 ﻩ ﻩﻩboｏlｅansｕccｅｓｓ=fａlｓe；/／事务指示ﻩﻩﻩbooleansucceｓｓ１＝false；ﻩﻩ ｂoｏleansuccesｓ2=ｆalsｅ； ﻩ ﻩﻩﻩStrinｇ［］vａluerow=newStｒing［4］；ﻩﻩﻩﻩﻩﻩｉｎti=０；ﻩ ﻩfor（FｉｌｅＩteｍｉtｅｍ:ｉｔｅｍs)ﻩﻩﻩ{ﻩﻩﻩ iｆ(iｔｅm。iｓFｏrｍFiｅlｄ（)） ﻩﻩﻩ{ﻩﻩﻩﻩﻩﻩﻩﻩﻩﻩStriｎｇfｉeldname=iteｍ．ｇｅｔＦｉelｄＮamｅ（）；ﻩﻩ ﻩ Stｒingvaｌｕe=item。ｇeｔSｔｒiｎg（"ＵTF－８”)； ﻩﻩﻩﻩｖaｌuｅrow[ｉ]＝ｖalｕe; ﻩﻩﻩ ｉ+＋;ﻩﻩﻩ }ﻩ ﻩ elseif(item.gｅｔＮaｍe()!＝ｎｕll&＆！item．getＮaｍe(）.ｅqualｓ（”")） ﻩ ﻩ｛ ﻩﻩﻩﻩｆｉlenamｅ=itｅｍ．getＮame（）．subｓtｒinｇ(iｔem.gｅｔName（）．laｓtIndexＯf（”\\＂)+１);ﻩﻩﻩﻩﻩｉｓ＝iteｍ.getInｐｕtＳtrｅaｍ（);ﻩﻩ ﻩ}ﻩﻩﻩﻩelseｉｆ(iteｍ．getNａｍｅ（)==ｎｕｌｌ＆＆itｅm。getName(）。eｑuａls（”＂)）ﻩﻩﻩﻩﻩoｕt．prｉｎtln("无文件"）； ﻩﻩ｝ﻩﻩ ﻩﻩ//以时间命名文件ﻩ ﻩiｎｔindex=filenamｅ.indｅxOf（＂.");ﻩﻩ Daｔeｄt＝ｎewDａte()；ﻩﻩﻩSiｍplｅＤａteForｍａｔsdｆ＝newSimplｅDateFｏrｍaｔ（"yyyyMＭdｄHＨmｍｓｓSＳS"）;ﻩ ﻩfilenamｅ=filename。ｓｕbstrｉng（０,iｎｄex）+sｄf.fｏrｍat（ｄt)+ｆiｌename．suｂstrｉｎg(index)；ﻩ fileｎamｅ=uｐloａdＰaｔh+fｉlenaｍe；ﻩﻩﻩﻩﻩ /／连接数据库，检查歌手是否已存在，后再则开头上传ﻩ ﻩ Clａsｓ.forNａmｅ（"ｃｏm。ｍｉｃｒｏsｏｆt.ｓqlserver．jdbc．SQLServerDriver”）．newIｎsｔance（）; ﻩﻩStrinｇuｒｌ=”jdbc:sqlseｒver：／/lｏｃａｌｈｏst：1433;DaｔaｂaｓｅＮａｍｅ＝ｍｕｓic＿dｂ;chａｒacｔerＥncｏding=UTF8＂； ﻩﻩSｔringdb_useｒ＝＂sa＂;ﻩ ﻩStｒiｎｇｄb_ｐｗｄ=＂sa”； ﻩ Connectiｏｎcoｎn=ＤｒiveｒＭａnagｅr。ｇeｔConneｃｔioｎ(ｕｒl，db_ｕser，db＿ｐwd);ﻩﻩﻩStatｅmentｓｔmt＝conn。ｃｒeａteSｔａtｅmeｎt（）;ﻩ ﻩStｒinｇsqｌ＝"sｅｌｅct＊ｆｒomartiｓtwhｅｒenａme＝＇”＋ｖaluerｏｗ［1］＋"’＂;ﻩﻩﻩｂoｏleａnｉｓeｘiｔ=tｒｕe；ﻩﻩﻩResultSetｒs1=stmｔ。ｅxecuｔｅQuery（ｓql)； ﻩﻩiｆ（ｒs1。nexｔ()）ﻩﻩﻩ isｅxit＝tｒｕe;／/歌手已存在 ﻩﻩelse ﻩﻩﻩｉsｅxit＝false；／／歌手不存在ﻩ ﻩﻩﻩﻩｉｆ（!ｉsｅｘiｔ) ﻩﻩ{ﻩﻩﻩﻩouｔ.ｐrｉntln（＂歌手不存在,请先〈ahrｅf=\”．／ａdmiｎ/adｄ_ａｒtiｓｔ．jsp\＂＞添加〈/ａ〉”)； ﻩ｝ﻩ elｓeﻩﻩ ｛ﻩﻩﻩﻩｓｑｌ＝”iｎｓeｒｔintosong（ｎame,artist，aｌｂuｍ，url，genｒe，times）ｖalｕes（’"＋ｖalｕｅｒow[0］＋”'，’"+vaｌuｅｒow［1]+"','＂＋valｕｅrow［2］＋"＇，＇＂+fｉlename+”＇,’"+valｕeroｗ[３]＋”'，0)"；ﻩﻩﻩﻩintｒs=stｍｔ.ｅxecuteUｐｄaｔe（ｓｑl）;ﻩ ﻩ iｆ(rｓ=＝１) ﻩﻩﻩﻩｓuccｅｓs１=trｕe；ﻩﻩﻩﻩelｓｅﻩﻩﻩ ﻩｓuccｅss=falｓe；ﻩ ﻩﻩﻩﻩ ﻩ／/开头上传ﻩﻩﻩﻩｉｆ(!fｉlｅnaｍe．equaｌｓ(＂”)）ﻩﻩ ﻩ｛ ﻩﻩﻩﻩFｉｌｅＯutputＳtreamfos=nｅwFileＯｕtputStreａｍ（fiｌename）;ﻩﻩ ﻩﻩbyte［］bｕffer=ｎewbｙｔｅ［81９２］;//每次读８Ｋ字节 ﻩﻩﻩﻩintcounｔ=0； ﻩﻩﻩ whｉlｅ（(cｏuｎt=is。ｒeａd（buffer))〉0）ﻩﻩﻩ ﻩ｛ﻩ ﻩﻩﻩfos。ｗrite(buｆｆｅr，0，coｕnｔ)； ﻩﻩﻩﻩ｝ﻩ ﻩｆoｓ.cloｓe（）;ﻩﻩﻩﻩ iｓ．cloｓe(）；ﻩﻩﻩ ﻩsｕccess2=tｒue; ﻩﻩ ｝ﻩﻩ ｝ﻩﻩﻩﻩﻩﻩsｕｃｃess＝ｓuccesｓ1＆＆succeｓs2;//事务成功?ﻩﻩ ﻩｉf（ｓuccesｓ）ﻩﻩﻩresult＝”添加成功！<ａhref=\”．/ａdｍin/ａdd_song．jsp\＂>返回＜/ａ〉＂；ﻩﻩelseﻩﻩ{ﻩ rｅｓulｔ="添加失败,";ﻩ ﻩif（sucｃｅsｓ1＝＝ｆalse) ﻩﻩ ｒesult+=”数据库错误，”;ﻩ ﻩiｆ(suｃcesｓ2＝=fａｌｓｅ)ﻩﻩﻩﻩresuｌｔ+=＂上传错误，”;ﻩﻩﻩreｓuｌｔ+＝＂＜ahreｆ=＼"．／aｄmｉｎ/aｄd_ｓoｎｇ.jsp\＂＞重新添加</a〉<br/＞”；ﻩ ｝ﻩ if(suｃcesｓ)ﻩﻩﻩout．ｐriｎｔlｎ（reｓｕlｔ）； ｝ﻩﻩｃａtｃh（Excｅptione）ﻩﻩ｛ ﻩﻩSｙsteｍ．err.ｐrinｔｌｎ(e。getMesｓaｇｅ（）);ﻩ ｝ﻩ｝}代码片段3(前台页面规律)Stｒｉnｇcurreｎt="”； if(ｒequest.ｇｅｔＰarａmeteｒ("currenｔ＂)！=ｎull）ﻩﻩcurrｅnt＝requeｓt.ｇetＰarａmeter("ｃuｒrｅnｔ＂）．toSｔrｉng（）；＜%ﻩif（cuｒｒｅnt．eqｕals（”ｒank”）)／//／///／／////／／／///排行榜ﻩ｛％〉<divclasｓ＝”rａｎｋ＿leｆt”>ﻩ<ｄiv＞＜ｈ３〉ｔoｐ1０歌手</h３〉〈/dｉv>ﻩ<ｄiv>＜taｂlｅ> ﻩ＜tｒ〉ﻩﻩﻩ＜td＞歌手＜／tｄ＞ﻩ ﻩ＜ｔd〉歌曲数</tｄ〉ﻩ ﻩ〈td＞热度</td〉ﻩﻩ〈/tr>〈% ﻩｓqｌ="selecｔtop１0＊ｆrｏｍaｒtistｏｒderbyhｏtDＥSC"；ﻩﻩrs=ｓtｍt。eｘecｕteＱｕerｙ（sql)；ﻩﻩwｈilｅ(ｒs．next（)） ｛ ﻩﻩintarｔisｔid=ｒs。ｇeｔInt（”iｄ")；ﻩﻩﻩＳtｒｉnｇnamｅ＝ｒs．getＳｔrｉnｇ（＂nａmｅ");ﻩ ﻩiｎｔsongs=rs．ｇeｔIｎｔ("songs”）； ﻩﻩｉｎtｈot=ｒs.ｇｅtIｎt（”hｏt”）;%>ﻩ＜tｒ> ﻩ<ｔｄ><%=nａme％＞＜/td〉ﻩﻩ〈ｔd＞〈ahrｅf=”．/ｉｎdex。jsｐ？cｕrreｎｔ=ｓong&artisｔid=＜%＝ａrtistｉｄ%〉”〉〈％＝sｏｎgｓ％〉</a〉＜／td>ﻩ <td＞〈%=ｈot%>〈／td>ﻩ＜／tｒ><%ﻩﻩ}％〉〈／tabｌｅ〉〈/ｄiv></ｄiv〉<diｖclass=＂ｒank＿ｒiｇht”＞ ＜div><ｈ3＞top10歌曲〈/ｈ３〉＜/div＞ <ｄiv>＜ｔａbｌe〉 <tr〉ﻩﻩ <tｄ〉歌名〈／tｄ>ﻩﻩﻩ＜td>歌手〈/ｔd〉ﻩﻩﻩ〈td〉播放次数＜/td〉ﻩ ﻩ〈td〉播放＜/tｄ＞ﻩﻩ＜/tr>〈％ﻩﻩsｑl=”sｅlｅcｔtｏp10*fｒoｍsｏnｇordeｒｂｙtｉｍesＤＥＳＣ”；ﻩﻩｒs=sｔｍｔ。ｅｘecutｅＱｕｅrｙ（sql）;ﻩ whｉle(rs．ｎｅxｔ(）) ﻩ｛ﻩﻩﻩiｎｔsongid=rｓ。gｅtInt(＂ｉd”)；ﻩﻩﻩＳtrｉngｎaｍe＝ｒｓ．ｇｅｔStｒing（"naｍe”）；ﻩﻩﻩSｔringartｉst=ｒｓ.gｅtSｔrｉng（”aｒtist”）；ﻩﻩﻩinｔｔimｅs=ｒｓ.geｔInｔ（”tiｍeｓ＂）；％〉ﻩ＜ｔr〉 ﻩ〈ｔd><％＝ｎame％>〈/td〉 ﻩ＜td＞〈％＝ａｒtiｓｔ％>＜/tｄ>ﻩ ＜ｔｄ＞〈％=tiｍｅs％〉＜／tｄ〉 ﻩ<ｔd><ahｒef="．/inｄex。ｊsｐ？current=ｒａnｋ&pｌａy=〈％＝songiｄ%>＂＞播放〈／a＞〈/td>ﻩ＜/tr>〈%ﻩﻩ｝％＞＜／tablｅ></diｖ＞<／ｄiv><%代码片段4(控件掌握ｃｏntｒｏl.ｊs)ｖarｓtａtｅ;vaｒvarｂ;vaｒｖarｆｕlｌscrｅen=0；ｆuｎctionloｏｐ（）{WｉndｏwｓＭediaPlaｙer。pｌayCount＝2；}fｕnｃtionｏpenｆile(）｛ﻩif(uｒl.vaｌuｅ==＂＂）ｒetuｒn;ﻩWindoｗsＭediａＰlayer。ＵＲL=url。vａlue;｝functionplａyｅrｉnit(）｛ＷinｄoｗsＭedｉaPlaｙｅr.ｕrｌ＝＂＂;//定义你自己的文件ＷindowｓMｅｄiａPｌａyer．ｓｅtｔinｇｓ。ａutｏＳtａrt＝faｌse；｝fｕｎctiｏnpｌａy（）{if(ＷindowsＭedｉaPlaｙｅr．ｃoｎtrols。ｉｓavailable('plａy'））{WｉndｏｗsMediaＰlａyeｒ．cｏntｒｏls．play(）；ｓtate＝setInｔerval(”updatｅtiｍe（)＂，1０00）;ｐｌaｙeｒinfo。iｎneｒＨTMＬ=”播放＂varfｕllｓｃｒｅeｎ=1；pｌayeｒinfo2。innerHTＭL=’音量:’＋WｉｎdｏｗｓＭeｄｉaPlayer.seｔtiｎｇs．voluｍe；｝}ｆunｃtionｖoｌdown（)｛if(ＷindoｗsMedｉaＰlayer.sｅttｉnｇs．voｌumｅ〈5）{ＷindoｗｓMeｄiaPlａyer．ｓeｔtｉｎgs．volｕme=０；pｌayeｒinfｏ2．iｎnｅrHTMＬ＝"音量：0"；ｐｌayｅｒinfo1.inｎerＨＴML=’缄默中’；}eｌse｛ WinｄoｗsＭｅｄiａＰｌayer.ｓettingｓ。ｖolｕmｅ-=5； plaｙerinfo２。inｎeｒHTML=’音量:’＋WindowｓMｅdiaPlayｅr．sｅttｉngｓ.voｌｕｍｅ;ﻩplayｅriｎｆo１。inneｒＨＴＭL='非静音＇；ﻩ}}funcｔｉonｖolup（）｛ if(WｉｎdowｓＭeｄiaPlaｙer。setｔiｎgｓ．vｏlｕme〉９5） {ﻩﻩWｉｎdｏｗsMedｉaPlaｙeｒ。settiｎｇs．volumｅ=1０0;ﻩﻩｐｌaｙeｒinfo2.ｉnnerHTML="音量：1０0＂;ﻩﻩｐlayｅrｉnfo１．ｉnneｒHＴML＝’最大音'； ｝ﻩeｌse {ﻩﻩWindowsMedｉaPlａｙeｒ．settｉｎｇs.volume＋=5;ﻩﻩplayerｉnfｏ2.ｉnnerHTML=＇音量：＇＋WindｏwsMｅdｉａＰlayｅr.ｓeｔｔｉnｇs．vｏlｕme；playerinfｏ１。inｎ