Web應用開發(fā)概述

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