Web應(yīng)用開發(fā)概述

本章要求：第1章Web應(yīng)用開發(fā)概述什么是C/S結(jié)構(gòu)和B/S結(jié)構(gòu)C/S結(jié)構(gòu)和B/S結(jié)構(gòu)的比較什么是WebWeb的工作原理Web的開展歷程Web開發(fā)技術(shù)主要內(nèi)容1.網(wǎng)絡(luò)程序開發(fā)體系結(jié)構(gòu)2.Web簡(jiǎn)介3.Web開發(fā)技術(shù)第1章Web應(yīng)用開發(fā)概述1.1.1C/S結(jié)構(gòu)介紹1.1.2B/S結(jié)構(gòu)介紹1.1.3兩種體系結(jié)構(gòu)的比較1.1網(wǎng)絡(luò)程序開發(fā)體系結(jié)構(gòu)C/S是Client/Server的縮寫，即客戶端/效勞器結(jié)構(gòu)。在這種結(jié)構(gòu)中，效勞器通常采用高性能的PC機(jī)或工作站，并采用大型數(shù)據(jù)庫(kù)系統(tǒng)〔如Oracle或SQLServer〕，客戶端那么需要安裝專用的客戶端軟件，如圖1-1所示。這種結(jié)構(gòu)可以充分利用兩端硬件環(huán)境的優(yōu)勢(shì)，將任務(wù)合理分配到客戶端和效勞器，從而降低了系統(tǒng)的通訊開銷。在2000年以前，C/S結(jié)構(gòu)占據(jù)網(wǎng)絡(luò)程序開發(fā)領(lǐng)域的主流。圖1-1C/S體系結(jié)構(gòu)1.1.1C/S結(jié)構(gòu)介紹B/S是Browser/Server的縮寫，即瀏覽器/效勞器結(jié)構(gòu)。在這種結(jié)構(gòu)中，客戶端不需要開發(fā)任何用戶界面，而統(tǒng)一采用如IE和火狐等瀏覽器，通過Web瀏覽器向Web效勞器發(fā)送請(qǐng)求，由Web效勞器進(jìn)行處理，并將處理結(jié)果逐級(jí)傳回客戶端，如圖1-2所示。這種結(jié)構(gòu)利用不斷成熟和普及的瀏覽器技術(shù)實(shí)現(xiàn)原來(lái)需要復(fù)雜專用軟件才能實(shí)現(xiàn)的強(qiáng)大功能，從而節(jié)約了開發(fā)本錢，是一種全新的軟件體系結(jié)構(gòu)。這種體系結(jié)構(gòu)已經(jīng)成為當(dāng)今應(yīng)用軟件的首選體系結(jié)構(gòu)。圖1-2B/S體系結(jié)構(gòu)說(shuō)明：B/S由美國(guó)微軟公司研發(fā)，C/S由美國(guó)Borland公司最早研發(fā)。1.1.2B/S結(jié)構(gòu)介紹1.1.3兩種體系結(jié)構(gòu)的比較C/S結(jié)構(gòu)和B/S結(jié)構(gòu)是當(dāng)今世界網(wǎng)絡(luò)程序開發(fā)體系結(jié)構(gòu)的兩大主流。目前，這兩種結(jié)構(gòu)都有自己的市場(chǎng)份額和客戶群。但是，這兩種體系結(jié)構(gòu)又各有各的優(yōu)點(diǎn)和缺點(diǎn)，下面將從以下3個(gè)方面進(jìn)行比較說(shuō)明。1．開發(fā)和維護(hù)本錢方面C/S結(jié)構(gòu)的開發(fā)和維護(hù)本錢都比B/S高。采用C/S結(jié)構(gòu)時(shí)，對(duì)于不同客戶端要開發(fā)不同的程序，而且軟件的安裝、調(diào)試和升級(jí)均需要在所有的客戶機(jī)上進(jìn)行。例如，如果一個(gè)企業(yè)共有10個(gè)客戶站點(diǎn)使用一套C/S結(jié)構(gòu)的軟件，那么這10個(gè)客戶站點(diǎn)都需要安裝客戶端程序。當(dāng)這套軟件進(jìn)行了哪怕很微小的改動(dòng)后，系統(tǒng)維護(hù)員都必須將客戶端原有的軟件卸載，再安裝新的版本并進(jìn)行配置，最可怕的是客戶端的維護(hù)工作必須不折不扣的進(jìn)行10次。假設(shè)某個(gè)客戶端忘記進(jìn)行這樣的更新，那么該客戶端將會(huì)因軟件版本不一致而無(wú)法工作。而B/S結(jié)構(gòu)的軟件，那么不必在客戶端進(jìn)行安裝及維護(hù)。如果我們將前面企業(yè)的C/S結(jié)構(gòu)的軟件換成B/S結(jié)構(gòu)的，這樣在軟件升級(jí)后，系統(tǒng)維護(hù)員只需要將效勞器的軟件升級(jí)到最新版本，對(duì)于其他客戶端，只要重新登錄系統(tǒng)就可以使用最新版本的軟件了。2．客戶端負(fù)載C/S的客戶端不僅負(fù)責(zé)與用戶的交互，收集用戶信息，而且還需要完成通過網(wǎng)絡(luò)向效勞器請(qǐng)求對(duì)數(shù)據(jù)庫(kù)、電子表格或文檔等信息的處理工作。由此可見，應(yīng)用程序的功能越復(fù)雜，客戶端程序也就越龐大，這也給軟件的維護(hù)工作帶來(lái)了很大的困難。而B/S結(jié)構(gòu)的客戶端把事務(wù)處理邏輯局部交給了效勞器，由效勞器進(jìn)行處理，客戶端只需要進(jìn)行顯示，這樣，將使應(yīng)用程序效勞器的運(yùn)行數(shù)據(jù)負(fù)荷較重，一旦發(fā)生效勞器“崩潰〞等問題，后果不堪設(shè)想。因此，許多單位都備有數(shù)據(jù)庫(kù)存儲(chǔ)效勞器，以防萬(wàn)一。3．平安性C/S結(jié)構(gòu)適用于專人使用的系統(tǒng)，可以通過嚴(yán)格的管理派發(fā)軟件，到達(dá)保證系統(tǒng)平安的目的，這樣的軟件相對(duì)來(lái)說(shuō)平安性比較高。而對(duì)于B/S結(jié)構(gòu)的軟件，由于使用的人數(shù)較多，且不固定，相對(duì)來(lái)說(shuō)平安性就會(huì)低些。由此可見，B/S相對(duì)于C/S具有更多的優(yōu)勢(shì)，現(xiàn)今大量的應(yīng)用程序開始轉(zhuǎn)移到應(yīng)用B/S結(jié)構(gòu)，許多軟件公司也爭(zhēng)相開發(fā)B/S版的軟件，也就是Web應(yīng)用程序。隨著Internet的開展，基于HTTP協(xié)議和HTML標(biāo)準(zhǔn)的Web應(yīng)用呈幾何數(shù)量級(jí)的增長(zhǎng)，而這些Web應(yīng)用又是由各種Web技術(shù)所開發(fā)。1.2Web簡(jiǎn)介1.2.1什么是Web1.2.2Web的工作原理 1.2.3Web的開展歷程1.2.1什么是WebWeb的本意是網(wǎng)和網(wǎng)狀物，現(xiàn)在被廣泛譯作網(wǎng)絡(luò)、萬(wàn)維網(wǎng)或互聯(lián)網(wǎng)等技術(shù)領(lǐng)域。它是一種基于超文本方式工作的信息系統(tǒng)。作為一個(gè)能夠處理文字，圖像，聲音和視頻等多媒體信息的綜合系統(tǒng)，它提供了豐富的信息資源，這些信息資源通常表現(xiàn)為以下三種形式。超文本〔hypertext〕超文本一種全局性的信息結(jié)構(gòu)，它將文檔中的不同局部通過關(guān)鍵字建立鏈接，使信息得以用交互方式搜索。超媒體〔hypermedia〕超媒體是超文本〔hypertext〕和多媒體在信息瀏覽環(huán)境下的結(jié)合，有了超媒體用戶不僅能從一個(gè)文本跳到另一個(gè)文本，而且可以顯示圖像、播放動(dòng)畫、音頻和視頻等。超文本傳輸協(xié)議〔HTTP〕超文本傳輸協(xié)議是超文本在互聯(lián)網(wǎng)上的傳輸協(xié)議。1.2.2Web的工作原理在Web中，信息資源將以Web頁(yè)面的形式分別存放在各個(gè)Web效勞器上，用戶可以通過瀏覽器選擇并瀏覽所需的信息。Web的具體工作流程如圖1-3所示。圖1-3Web的工作流程圖從圖1.3中，可以看出Web的工作流程大致可以分為以下4個(gè)步驟?！?〕用戶在瀏覽器中輸入U(xiǎn)RL地址〔即統(tǒng)一資源定位符〕，或者通過超鏈接方式鏈接到一個(gè)網(wǎng)頁(yè)或者網(wǎng)絡(luò)資源后，瀏覽器將該信息轉(zhuǎn)換成標(biāo)準(zhǔn)的HTTP請(qǐng)求發(fā)送給Web效勞器?！?〕當(dāng)Web效勞器接收到HTTP請(qǐng)求后，根據(jù)請(qǐng)求內(nèi)容查找所需信息資源?！?〕找到相應(yīng)資源后，Web效勞器將該局部資源通過標(biāo)準(zhǔn)的HTTP響應(yīng)發(fā)送回瀏覽器。〔4〕瀏覽器將經(jīng)效勞器轉(zhuǎn)換后的HTML代碼顯示給客戶端用戶。自從1989年由TimBerners-Lee〔蒂姆·伯納斯·李〕創(chuàng)造了WorldWideWeb以來(lái)，Web主要經(jīng)歷了3個(gè)階段，分別是靜態(tài)文檔階段〔指代Web1.0〕、動(dòng)態(tài)網(wǎng)頁(yè)階段〔指代Web1.5〕和Web2.0階段。下面將對(duì)這3個(gè)階段進(jìn)行介紹。1．靜態(tài)文檔階段處理靜態(tài)文檔階段的Web，主要是用于靜態(tài)Web頁(yè)面的瀏覽。用戶通過客戶端的Web瀏覽器，可以訪問Internet上各個(gè)Web站點(diǎn)。在每個(gè)Web站點(diǎn)上，保存著提前編寫好的HTML格式的Web頁(yè)，以及各Web頁(yè)之間可以實(shí)現(xiàn)跳轉(zhuǎn)的超文本鏈接。通常情況下，這些Web頁(yè)都是通過HTML語(yǔ)言編寫的。由于受低版本HTML語(yǔ)言和舊式瀏覽器的制約，Web頁(yè)面只能包括單純的文本內(nèi)容，瀏覽器也只能顯示呆板的文字信息，不過這已經(jīng)根本滿足了建立Web站點(diǎn)的初衷，實(shí)現(xiàn)了信息資源共享。隨著互聯(lián)網(wǎng)技術(shù)的不斷開展以及網(wǎng)上信息呈幾何級(jí)數(shù)的增加，人們逐漸發(fā)現(xiàn)手工編寫包含所有信息和內(nèi)容的頁(yè)面對(duì)人力和物力都是一種極大的浪費(fèi)，而且?guī)缀踝兊秒y以實(shí)現(xiàn)。另外，這樣的頁(yè)面也無(wú)法實(shí)現(xiàn)各種動(dòng)態(tài)的交互功能。這就促使Web技術(shù)進(jìn)入了開展的第二階段——?jiǎng)討B(tài)網(wǎng)頁(yè)階段。1.2.3Web的開展歷程2．動(dòng)態(tài)網(wǎng)頁(yè)階段為了克服靜態(tài)頁(yè)面的缺乏，人們將傳統(tǒng)單機(jī)環(huán)境下的編程技術(shù)與Web技術(shù)相結(jié)合，從而形成新的網(wǎng)絡(luò)編程技術(shù)。網(wǎng)絡(luò)編程技術(shù)通過在傳統(tǒng)的靜態(tài)頁(yè)面中參加各種程序和邏輯控制，從而實(shí)現(xiàn)動(dòng)態(tài)和個(gè)性化的交流與互動(dòng)。我們將這種使用網(wǎng)絡(luò)編程技術(shù)創(chuàng)立的頁(yè)面稱為動(dòng)態(tài)頁(yè)面，動(dòng)態(tài)頁(yè)面的后綴通常是.jsp、.php和.asp等，而靜態(tài)頁(yè)面的后綴通常是.htm、.html和.shtml等。注意：這里說(shuō)的動(dòng)態(tài)網(wǎng)頁(yè)，與網(wǎng)頁(yè)上的各種動(dòng)畫、滾動(dòng)字幕等視覺上的“動(dòng)態(tài)效果〞沒有直接關(guān)系，動(dòng)態(tài)網(wǎng)頁(yè)也可以是純文字內(nèi)容的，這些只是網(wǎng)頁(yè)具體內(nèi)容的表現(xiàn)形式，無(wú)論網(wǎng)頁(yè)是否具有動(dòng)態(tài)效果，采用動(dòng)態(tài)網(wǎng)絡(luò)編程技術(shù)生成的網(wǎng)頁(yè)都稱為動(dòng)態(tài)網(wǎng)頁(yè)。3．Web2.0階段隨著互聯(lián)網(wǎng)技術(shù)的不斷開展，又提出了一種新的互聯(lián)網(wǎng)模式——Web2.0。這種模式更加以用戶為中心，通過網(wǎng)絡(luò)應(yīng)用(WebApplications〕促進(jìn)網(wǎng)絡(luò)上人與人間的信息交換和協(xié)同合作。Web2.0技術(shù)主要包括：博客〔BLOG〕、微博〔Twitter〕、RSS、Wiki百科全書〔Wiki〕、網(wǎng)摘〔Delicious〕、社會(huì)網(wǎng)絡(luò)〔SNS〕、P2P、即時(shí)信息〔IM〕和基于地理信息效勞〔LBS〕等。1.3Web開發(fā)技術(shù)1.3.1客戶端應(yīng)用技術(shù)1.3.2效勞器端應(yīng)用技術(shù)1.3.1客戶端應(yīng)用技術(shù)在進(jìn)行Web應(yīng)用開發(fā)時(shí)，離不開客戶端技術(shù)的支持。目前，比較常用的客戶端技術(shù)包括HTML語(yǔ)言、CSS樣式、Flash和客戶端腳本技術(shù)。下面進(jìn)行詳細(xì)介紹。HTML語(yǔ)言HTML語(yǔ)言是客戶端技術(shù)的根底，主要用于顯示網(wǎng)頁(yè)信息，它不需要編譯，由瀏覽器解釋執(zhí)行。HTML語(yǔ)言簡(jiǎn)單易用，它在文件中參加標(biāo)簽，使其可以顯示各種各樣的字體、圖形及閃爍效果，還增加了結(jié)構(gòu)和標(biāo)記，如頭元素、文字、列表、表格、表單、框架、圖像和多媒體等，并且提供了與Internet中其他文檔的超鏈接。例如，在一個(gè)HTML頁(yè)中，應(yīng)用圖像標(biāo)記插入一個(gè)圖片，可以使用如圖1-4所示的代碼，圖1-4HTML文件該HTML頁(yè)運(yùn)行后的效果如圖1-5所示。圖1-5運(yùn)行結(jié)果說(shuō)明：HTML語(yǔ)言不區(qū)分大小，這一點(diǎn)與Java不同。例如圖1-4中的HTML標(biāo)記<body></body>標(biāo)記也可以寫為<BODY></BODY>。CSSCSS就是一種叫做樣式表〔stylesheet〕的技術(shù)，也有人稱之為層疊樣式表〔CascadingStyleSheet〕。在制作網(wǎng)頁(yè)時(shí)采用CSS樣式，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的控制。只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變整個(gè)頁(yè)面的風(fēng)格。CSS大大提高了開發(fā)者對(duì)信息展現(xiàn)格式的控制能力，特別是在目前比較流行的CSS+DIV布局的網(wǎng)站中，CSS的作用更是重足輕重了。例如，在“心之語(yǔ)許愿墻〞網(wǎng)站中，如果將程序中的CSS代碼刪除，將顯示如圖1-6所示的效果，圖1-6沒有添加CSS樣式的頁(yè)面效果而添加CSS代碼后，將顯示如圖1-7所示的效果。圖1-7添加CSS樣式的頁(yè)面效果說(shuō)明：在網(wǎng)頁(yè)中使用CSS樣式不僅可以美化頁(yè)面，而且可以優(yōu)化網(wǎng)頁(yè)速度。因?yàn)镃SS樣式表文件只是簡(jiǎn)單的文本格式，不需要安裝額外的第3方插件。另外，由于CSS提供了很多濾鏡效果，從而防止使用大量的圖片，這樣將大大縮小了文件的體積，提高低載速度。客戶端腳本技術(shù)客戶端腳本技術(shù)是指嵌入到Web頁(yè)面中的程序代碼，這些程序代碼是一種解釋性的語(yǔ)言，瀏覽器可以對(duì)客戶端腳本進(jìn)行解釋。通過腳本語(yǔ)言可以實(shí)現(xiàn)以編程的方式對(duì)頁(yè)面元素進(jìn)行控制，從而增加頁(yè)面的靈活性。常用的客戶端腳本語(yǔ)言有JavaScript和VBScript。說(shuō)明：目前，應(yīng)用最為廣泛的客戶端腳本語(yǔ)言是JavaScript腳本，它是Ajax的重要組成局部。在本書的第2章將對(duì)JavaScript腳本語(yǔ)言進(jìn)行詳細(xì)介紹。FlashFlash是一種交互式矢量動(dòng)畫制作技術(shù)，它可以包含動(dòng)畫、音頻、視頻以及應(yīng)用程序，而且Flash文件比較小，非常適合在Web上應(yīng)用。目前，很多Web開發(fā)者都將Flash技術(shù)引入到網(wǎng)頁(yè)中，使網(wǎng)頁(yè)更具有表現(xiàn)力。特別是應(yīng)用Flash技術(shù)實(shí)現(xiàn)動(dòng)態(tài)播放網(wǎng)站廣告或新聞圖片，并且參加隨機(jī)的轉(zhuǎn)場(chǎng)效果，如圖1-8所示。圖1-8在網(wǎng)頁(yè)中插入的Flash動(dòng)畫在開發(fā)動(dòng)態(tài)網(wǎng)站時(shí)，離不開效勞器端技術(shù)，目前，比較常用的效勞器端技術(shù)主要有CGI、ASP、PHP、ASP.NET和JSP。下面進(jìn)行詳細(xì)介紹。CGICGI是最早用來(lái)創(chuàng)立動(dòng)態(tài)網(wǎng)頁(yè)的一種技術(shù)，它可以使瀏覽器與效勞器之間產(chǎn)生互動(dòng)關(guān)系。CGI的全稱是CommonGatewayinterface，即通用網(wǎng)關(guān)接口。它允許使用不同的語(yǔ)言來(lái)編寫適合的CGI程序，該程序被放在Web效勞器上運(yùn)行。當(dāng)客戶端發(fā)出請(qǐng)求給效勞器時(shí)，效勞器根據(jù)用戶請(qǐng)求建立一個(gè)新的進(jìn)程來(lái)執(zhí)行指定的CGI程序，并將執(zhí)行結(jié)果以網(wǎng)頁(yè)的形式傳輸?shù)娇蛻舳说臑g覽器上顯示。CGI可以說(shuō)是當(dāng)前應(yīng)用程序的根底技術(shù)，但這種技術(shù)編制方式比較困難而且效率低下，因?yàn)槊看雾?yè)面被請(qǐng)求時(shí)，都要求效勞器重新將CGI程序編譯成可執(zhí)行的代碼。在CGI中使用最為常見的語(yǔ)言為C/C++、Java和Perl〔PracticalExtractionandReportLanguage，文件分析報(bào)告語(yǔ)言〕。ASPASP〔ActiveServerPage〕是一種使用很廣泛的開發(fā)動(dòng)態(tài)網(wǎng)站的技術(shù)。它通過在頁(yè)面代碼中嵌入VBScript或JavaScript腳本語(yǔ)言，來(lái)生成動(dòng)態(tài)的內(nèi)容，在效勞器端必須安裝了適當(dāng)?shù)慕忉屍骱螅趴梢酝ㄟ^調(diào)用此解釋器來(lái)執(zhí)行腳本程序，然后將執(zhí)行結(jié)果與靜態(tài)內(nèi)容局部結(jié)合并傳送到客戶端瀏覽器上。對(duì)于一些復(fù)雜的操作，ASP可以調(diào)用存在于后臺(tái)的COM組件來(lái)完成，所以說(shuō)COM組件無(wú)限的擴(kuò)充了ASP的能力，正因如此依賴本地的COM組件，使得它主要用于WindowsNT平臺(tái)中，所以Windows本身存在的問題都會(huì)映射到它的身上。當(dāng)然該技術(shù)也存在很多優(yōu)點(diǎn)，簡(jiǎn)單易學(xué)，并且ASP是與微軟的IIS捆綁在一起，在安裝Windows操作系統(tǒng)的同時(shí)安裝上IIS就可以運(yùn)行ASP應(yīng)用程序了。1.3.2效勞器端應(yīng)用技術(shù)PHPPHP來(lái)自于PersonalHomePage一詞，但現(xiàn)在的PHP已經(jīng)不再表示名詞的縮寫，而是一種開發(fā)動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的名稱。PHP語(yǔ)法類似與C，并且混合了Perl、C++和Java的一些特性。它是一種開源的Web效勞器腳本語(yǔ)言，與ASP一樣可以在頁(yè)面中參加腳本代碼來(lái)生成動(dòng)態(tài)內(nèi)容。對(duì)于一些復(fù)雜的操作可以封裝到函數(shù)或類中。在PHP中提供了許多已經(jīng)定義好的函數(shù)，例如提供的標(biāo)準(zhǔn)的數(shù)據(jù)庫(kù)接口，使得數(shù)據(jù)庫(kù)連接方便，擴(kuò)展性強(qiáng)。PHP可以被多個(gè)平臺(tái)支持，但被廣泛應(yīng)用于UNIX/Linux平臺(tái)。由于PHP本身的代碼對(duì)外開放，經(jīng)過許多軟件工程師的檢測(cè)，因此，該技術(shù)具有公認(rèn)的平安性能。ASP.NETASP.NET是一種建立動(dòng)態(tài)Web應(yīng)用程序的技術(shù)。它是.NET框架的一局部，可以使用任何.NET兼容的語(yǔ)言來(lái)編寫ASP.NET應(yīng)用程序。使用VisualBasic.NET，C#，J#，ASP.NET頁(yè)面(WebForms)進(jìn)行編譯可以提供比腳本語(yǔ)言更出色的性能表現(xiàn)。WebForms允許在網(wǎng)頁(yè)根底上建立強(qiáng)大的窗體。當(dāng)建立頁(yè)面時(shí)，可以使用ASP.NET效勞端控件來(lái)建立常用的UI元素，并對(duì)它們編程來(lái)完成一般的任務(wù)。這些控件允許開發(fā)者使用內(nèi)建可重用的組件和自定義組件來(lái)快速建立WebForm，使代碼簡(jiǎn)單化。JSPJavaServerPages簡(jiǎn)稱JSP。JSP是以Java為根底開發(fā)的，所以它沿用Java強(qiáng)大的API功能。JSP頁(yè)面中的HTML代碼用來(lái)顯示靜態(tài)內(nèi)容局部；嵌入到頁(yè)面中的Java代碼與JSP標(biāo)記來(lái)生成動(dòng)態(tài)的內(nèi)容局部。JSP允許程序員編寫自己的標(biāo)簽庫(kù)來(lái)完成應(yīng)用程序的特定要求。JSP可以被預(yù)編譯，提高了程序的運(yùn)行速度。另外JSP開發(fā)的應(yīng)用程序經(jīng)過一次編譯后，便可隨時(shí)隨地運(yùn)行。所以在絕大局部系統(tǒng)平臺(tái)中，代碼無(wú)需做修改就可以在支持JSP的任何效勞器中運(yùn)行?！?〕C/S是Client/Server的縮寫，即客戶端/效勞器結(jié)構(gòu)。在這種結(jié)構(gòu)中，效勞器通常采用高性能的PC機(jī)或工作站，并采用大型數(shù)據(jù)庫(kù)系統(tǒng)〔如Oracle或SQLServer〕，客戶端那么需要安裝專用的客戶端軟件?！?〕B/S是Browser/Server的縮寫，即瀏覽器/效勞器結(jié)構(gòu)。在這種結(jié)構(gòu)中，客戶端不需要開發(fā)任何用戶界面，而統(tǒng)一