【導(dǎo)讀】院(系)級(jí)班：計(jì)算機(jī)與信息科學(xué)系2021級(jí)1班。論文主要介紹了本課題的開(kāi)發(fā)背景，所要完成的功能和開(kāi)發(fā)的過(guò)程。設(shè)計(jì)重點(diǎn)、設(shè)計(jì)思想、難點(diǎn)技術(shù)和解決方案；同時(shí)也論述了基于HTTP協(xié)議的Web瀏覽器。本課題是在深入理解HTTP協(xié)議的工作機(jī)理，系統(tǒng)掌握了TCP/UDP網(wǎng)絡(luò)通信協(xié)議及網(wǎng)。絡(luò)編程的基本方法，掌握了使用WindowsSocketsAPI和MFCSocket編程技術(shù)之后，采。用VisualC++作為開(kāi)發(fā)工具來(lái)設(shè)計(jì)并實(shí)現(xiàn)一個(gè)Web瀏覽器，其功能主要包括：瀏覽器的界。面實(shí)現(xiàn);實(shí)現(xiàn)收藏菜單;顯示超文本;刪除相關(guān)歷史記錄;將應(yīng)用程序加入到時(shí)工具欄、禁止。彈出窗口、禁止瀏覽某些網(wǎng)站訪問(wèn)Web頁(yè)，保存網(wǎng)頁(yè)，打印網(wǎng)頁(yè)，停止當(dāng)前訪問(wèn)，刷新網(wǎng)。頁(yè)，查看源文件和Inter屬性等等。

　　

【正文】 不是一個(gè)理想的選擇。 21 綜上所述，使用 MFC 的 CHtmlView 類(lèi)編程的方法是比較理想的選擇。以下的開(kāi)發(fā)設(shè)計(jì)流程就是基于第二種方案的設(shè)計(jì)流程。 需求分析 隨著計(jì)算機(jī)技術(shù)的飛速發(fā)展，人們生活中的日常事務(wù)也逐步跟計(jì)算機(jī)、互聯(lián)網(wǎng)關(guān)聯(lián)起來(lái)，伴隨著這一現(xiàn)象而起來(lái)的也是軟件行業(yè)的日益繁榮，使得人們現(xiàn)在的工作日益輕松，日益快捷，日益方便，瀏覽器在互聯(lián)網(wǎng)的使用中占有舉足輕重的地位。根據(jù)需求研究，得出一個(gè)較為完善的瀏覽器應(yīng)具備如下功能： 瀏覽功 能 在 URL 框中輸入網(wǎng)址，敲回車(chē)鍵后，在顯示框中顯示網(wǎng)頁(yè)，并在 Cache 文件夾中按網(wǎng)站的組織結(jié)構(gòu)保存網(wǎng)頁(yè)。 前進(jìn)功能 在瀏覽器的設(shè)計(jì)與開(kāi)發(fā)中，前進(jìn)是常用的一項(xiàng)功能。當(dāng)需要查看曾經(jīng)瀏覽過(guò)的，下一個(gè)網(wǎng)頁(yè)時(shí)，可以通過(guò)此功能，查看曾經(jīng)瀏覽過(guò)的下一個(gè)網(wǎng)頁(yè)。 當(dāng)用戶(hù)點(diǎn)擊后退按鈕時(shí)，顯示上一個(gè)頁(yè)面，并在 URL 框中顯示當(dāng)前網(wǎng)頁(yè)地址。 后退功能 在瀏覽器的設(shè)計(jì)與開(kāi)發(fā)中，后退也同樣是一項(xiàng)常用的功能。當(dāng)需要查看前一個(gè)瀏覽過(guò)的網(wǎng)頁(yè)時(shí)，可以通過(guò)此功能，查看瀏覽過(guò)的前一個(gè)網(wǎng)頁(yè)。 當(dāng)用戶(hù)點(diǎn)擊前進(jìn)按鈕時(shí)，顯示下一個(gè)頁(yè)面，并在 URL 框中顯示當(dāng) 前網(wǎng)頁(yè)地址。 刪除功能 在瀏覽器的設(shè)計(jì)與開(kāi)發(fā)中，刪除也同樣是一項(xiàng)常用的功能。當(dāng)需要?jiǎng)h除正在打開(kāi)的網(wǎng)頁(yè)時(shí)，可以通過(guò)此功能，刪除當(dāng)前正打開(kāi)的網(wǎng)頁(yè)。 主頁(yè)功能 當(dāng)我們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候，突然想轉(zhuǎn)回到主頁(yè)上，這時(shí)我們可以點(diǎn)擊表示主頁(yè)的功能鍵，返回到主頁(yè)。 刷新功能 在瀏覽器的設(shè)計(jì)與開(kāi)發(fā)中，刷新也同樣是一項(xiàng)常用的功能。當(dāng)我們由于網(wǎng)速或者打開(kāi)網(wǎng)頁(yè)失敗時(shí)，我們就用刷新鍵來(lái)重新打開(kāi)此網(wǎng)頁(yè)。在 用戶(hù)點(diǎn)擊刷新按鈕時(shí)，重新顯示當(dāng)前頁(yè)面，并在 Cache 文件夾中按網(wǎng)站的組織結(jié)構(gòu)保存網(wǎng)頁(yè)。 查看網(wǎng)頁(yè)源文件 此項(xiàng)功能可以實(shí) 現(xiàn)查看網(wǎng)頁(yè)源文件 . 刪除歷史記錄 在瀏覽器的設(shè)計(jì)與開(kāi)發(fā)中，刪除歷史記錄同樣是很重要的一項(xiàng)。這可以保護(hù)個(gè)人上網(wǎng)的隱私，提高上網(wǎng)的安全性。 收藏夾功能 在我們用瀏覽器進(jìn)行網(wǎng)頁(yè)瀏覽的時(shí)候，會(huì)遇到自己需要的值得收藏的網(wǎng)頁(yè)，這個(gè)時(shí)候 22 我們可以通過(guò)瀏覽器上的收藏夾功能來(lái)把網(wǎng)頁(yè)保存起來(lái)，等在下一次我們需要的時(shí)候，可以調(diào)出來(lái)瀏覽。 禁止 網(wǎng)頁(yè) 彈出廣告窗口 禁止 網(wǎng)頁(yè) 彈出廣告窗口的設(shè)計(jì)，可以阻止瀏覽網(wǎng)頁(yè)過(guò)程中的一些廣告 禁止瀏覽某些網(wǎng)站 網(wǎng)絡(luò)上的資訊有好有壞，應(yīng)該采取措施，限制對(duì)某些網(wǎng)站的瀏覽。 將應(yīng)用程序加入到瀏覽器工具 欄 許多網(wǎng)絡(luò)程序都喜歡把快捷方式鏈接在瀏覽器的工具欄上。實(shí)現(xiàn)這項(xiàng)功能有兩種方法，一種是使用組策略，另一種是使用注冊(cè)表。 禁止瀏覽器彈出的廣告窗口 禁止瀏覽器彈出廣告窗口的設(shè)計(jì)，可以阻止瀏覽網(wǎng)頁(yè)過(guò)程中的一些廣告。 根據(jù)上述功能需求，畫(huà)出系統(tǒng)頂層數(shù)據(jù)流圖如下： 圖 頂層數(shù)據(jù)流圖 系統(tǒng) 1 級(jí)數(shù)據(jù)流圖如下： 圖 1級(jí)數(shù)據(jù)流圖 數(shù)據(jù)字典 ： 統(tǒng)一資源定位符（ URL） ： 23 URL = + Host 字段 + / + ScriptName 字段 + / + PathInfo 字段 + Query 字段 Host 字段 ： 標(biāo)識(shí) Web 服務(wù)器和 Web服務(wù)器應(yīng)用程序的主機(jī)名 ScriptName 字段 ： 指定 Web 服務(wù)器應(yīng)用程序 PathInfo 字段 ： 指出報(bào)文在 Web 服務(wù)器應(yīng)用程序內(nèi)的目標(biāo) Query 字段 ： 部分包含一組命名的數(shù)據(jù)。 例如： ~~~~~~~~~ ~~~~~~~~~ ~~~~~~ ~~~~~~~~~~~~~~~~~~ Host ScriptName PathInfo Query 24 第 4 章 瀏覽器系統(tǒng)設(shè)計(jì) 與實(shí)現(xiàn) 瀏覽器 軟件體系結(jié)構(gòu) HTML 瀏覽器把純文本的 HTML 文件轉(zhuǎn)變成圖文混排、可理解性強(qiáng)的 WEB 頁(yè)面，極大地推動(dòng)了因特網(wǎng)的普及和發(fā)展。如今瀏覽器已經(jīng)發(fā)展成可支持多種語(yǔ)言的系統(tǒng)軟件，并成為眾多網(wǎng)絡(luò)應(yīng)用系統(tǒng)的支撐平臺(tái)。 如前幾章所述，本課題將用 Visual C++ 開(kāi)發(fā)一個(gè)HTML 瀏覽器軟件，下面從系統(tǒng)分析的角度來(lái)討論軟件體系結(jié)構(gòu)。 模塊劃分 軟件系統(tǒng)功能模塊的劃分標(biāo)準(zhǔn)及模塊間的耦合關(guān)系是軟件體系結(jié)構(gòu)的具體表現(xiàn)。功能模塊劃分的合理性、接口的清晰性和體系結(jié)構(gòu)的可擴(kuò)展性是瀏覽器設(shè)計(jì)的關(guān)鍵。根據(jù)超文本傳輸協(xié)議 HTML的 規(guī)范，一次 WEB頁(yè)面瀏覽操作可分成數(shù)據(jù)獲取、 HTML文件解釋、 WEB頁(yè)面顯示和人機(jī)交互四個(gè)子過(guò)程。 瀏覽器 中的四大功能模塊通過(guò)全局變量實(shí)現(xiàn)模塊間的數(shù)據(jù)共享 ，其體系結(jié)構(gòu)圖如下： 圖 瀏覽器軟件體系結(jié)構(gòu)圖 模塊功能描述 數(shù)據(jù)通信模塊功能 數(shù)據(jù)通信模塊是瀏覽器體系結(jié)構(gòu)中的基礎(chǔ)模塊，它的主要功 能是： HTTP連接，取回用戶(hù)指定的文件（ GET操作），或向目標(biāo)服務(wù)器發(fā)送用戶(hù)指定的數(shù)據(jù)（ POST 操作）； HTML文件存放到內(nèi)存中，并將數(shù)據(jù)塊首地址和文件長(zhǎng)度傳遞給 HTML 語(yǔ)言解釋模塊； 、聲音、影像、 Java二進(jìn)制代碼等資源文件，并將取得資源保存在臨時(shí)目錄中，然后向 WEB頁(yè)面顯示模塊發(fā)消息。 HTML語(yǔ)言解釋模塊功能 HTML語(yǔ)言是一種標(biāo)記性描述語(yǔ)言 ,HTML 文件通過(guò)標(biāo)記及其屬性，將 WEB 頁(yè)面設(shè)計(jì)者的設(shè)計(jì)思想以純文本方式保存。 HTML語(yǔ) Y言解 釋模塊根據(jù) HTML文本， 還原 WEB頁(yè)面編輯者的設(shè)計(jì)意圖，其具體功能是：對(duì) HTML文本進(jìn)行詞法分析，將標(biāo)記、標(biāo)記的屬性、屬性值、數(shù)據(jù)內(nèi)容分離；語(yǔ)法分析，確定各個(gè)標(biāo)記的作用對(duì)象和作用范圍；語(yǔ)義分析，將數(shù) 25 據(jù)內(nèi)容轉(zhuǎn)變成內(nèi)存中的數(shù)據(jù)對(duì)象實(shí)例，形成顯示數(shù)據(jù)緩沖隊(duì)列。 WEB 頁(yè)畫(huà)顯示模塊功能 WEB 頁(yè)面顯示模塊的功能是：計(jì)算數(shù)據(jù)對(duì)象（特別是表格中的數(shù)據(jù)元素）的顯示位置；顯示文本、圖像、語(yǔ)音數(shù)據(jù)；調(diào)用 JVM(Java Virtual Machine)執(zhí)行 Java Applet 程序。 人 機(jī)交互模塊功能 人機(jī)交互模塊的功 能是：接收用戶(hù)的輸入消息（鍵盤(pán)消息、鼠標(biāo)消息等）；正確處理消息，完成數(shù)據(jù)交互功能；獲得服務(wù)器網(wǎng)址，控制數(shù)據(jù)通信模塊通信；將程序內(nèi)部的出錯(cuò)信息以友好的形式提交給用戶(hù) 。 模塊間 的 接口 模塊之間接口的清晰性與合理性一定程度上決定了整個(gè)瀏覽器軟件的可靠性、健壯性和可實(shí)現(xiàn)性， 瀏覽器 通過(guò)消息機(jī)制和事件驅(qū)動(dòng)方式實(shí)現(xiàn)模塊之間的通信。以下介紹 瀏覽器體系結(jié)構(gòu)中模塊間的 5個(gè)接口。 數(shù)據(jù)通信模塊與 HTML語(yǔ)言解釋模塊間的接口 數(shù)據(jù)通信模塊取回 HTML 文件后，先保存該文件內(nèi)容、存儲(chǔ)數(shù)據(jù)塊的首地址和文件長(zhǎng)度，然后向 HTML 語(yǔ)言解釋模塊發(fā)消息。 HTML 語(yǔ)言解釋模塊在該消息驅(qū)動(dòng)下，先訪問(wèn)全局變量，然后解釋 HTML 文件。解釋模塊在解釋 HTML 文件過(guò)程中，如遇到 IMG、 A、 Applet之類(lèi)的標(biāo)記，則新增一個(gè)數(shù)據(jù)通信線程去取資源文件。 數(shù)據(jù)通信模塊與 WEB頁(yè)面顯示模塊間的接口 本接口具有單向性，即只有數(shù)據(jù)通信模塊向 WEB 頁(yè)面顯示模塊發(fā)消息。多個(gè)數(shù)據(jù)通信線程在后臺(tái)并發(fā)執(zhí)行（每個(gè)線程負(fù)責(zé)取一個(gè)資源文件），當(dāng)某個(gè)線程取回資源數(shù)據(jù)，則向 WEB頁(yè)面顯示模塊發(fā)消息，激活后者顯示已取回資源文件，然后本線程終止。 數(shù)據(jù)通信模塊與人機(jī)交互 模塊間的接口 瀏覽器工作期間，人機(jī)交互模塊控制數(shù)據(jù)通信模塊的工作進(jìn)程。首先，數(shù)據(jù)通信模塊需從人機(jī)交互模塊獲得目標(biāo)服務(wù)器的 URL 地址；其次，用戶(hù)在 WEB 瀏覽過(guò)程中，點(diǎn)擊超鏈接，人機(jī)交互模塊先獲得超鏈地址，然后申請(qǐng)一個(gè)數(shù)據(jù)通信線程取目標(biāo)文件；最后，執(zhí)行查詢(xún)、申請(qǐng)等 POST 操作時(shí)，數(shù)據(jù)通信模塊負(fù)責(zé)將用戶(hù)數(shù)據(jù)發(fā)送到目標(biāo)服務(wù)器。 頁(yè)面顯示模塊與人機(jī)交互模塊間的接口 WEB 頁(yè)面顯示模塊與人機(jī)交互模塊的接口也具有單向性，當(dāng)用戶(hù)改變窗口大?。ㄌ貏e是瀏覽器窗口的寬度）時(shí)， WEB 頁(yè)面顯示模塊須重新計(jì)算 WEB 頁(yè)面中數(shù) 據(jù)對(duì)象的顯示位置；當(dāng)用戶(hù)點(diǎn)擊超鏈后 ,WEB 頁(yè)面顯示模塊要改變被點(diǎn)擊文本的顏色，重新顯示；用戶(hù)在 WEB 頁(yè)面中輸入信息時(shí)， WEB 頁(yè)面顯示模塊必須正確回顯輸入信息。 HTML 語(yǔ)言解釋模塊與 WEB 頁(yè)面顯示模塊間的接口 該接口在 5個(gè)接口中最為復(fù)雜，它直接反映了源 HTML 文件中的數(shù)據(jù)內(nèi)容解釋后以何種形式存在。為了降低接口復(fù)雜性， 本設(shè)計(jì)中 使用了面向?qū)ο蟮某绦蚍治雠c設(shè)計(jì)方法。 26 瀏覽器 系統(tǒng)設(shè)計(jì) 主框架的生成 最初通過(guò) MFC 的應(yīng)用程序向?qū)?chuàng)建一個(gè)單文本文檔的系統(tǒng)的主框架，視圖類(lèi)的基類(lèi)為 CHtmlView 類(lèi)。 地址欄的生成與處理 利用控件創(chuàng)建一個(gè) ComBoxBox，作為用戶(hù)輸入網(wǎng)址的工具。當(dāng)應(yīng)用程序最初運(yùn)行時(shí)網(wǎng)址欄需要初始化，將上次瀏覽輸入的網(wǎng)址顯示出來(lái)。然后，加一個(gè)“轉(zhuǎn)到”按鈕，當(dāng)用戶(hù)輸入完網(wǎng)址，點(diǎn)此按鈕后，程序會(huì)根據(jù)用戶(hù)輸入的 URL 地址自動(dòng)轉(zhuǎn)到要打開(kāi)的頁(yè)面。此外，網(wǎng)址欄還支持自動(dòng)記錄網(wǎng)址的功能。 ①、地址欄的初始化：地址欄初始化時(shí)需要從注冊(cè)表中讀取保存在其中的網(wǎng)址信息。為此，專(zhuān)門(mén)編寫(xiě)了一個(gè)對(duì)注冊(cè)表操作的類(lèi)，具體的操作包括注冊(cè)表的打開(kāi)、注冊(cè)表的關(guān)閉、判斷注冊(cè)表的狀態(tài)、從注冊(cè)表中讀 數(shù)據(jù)等等操作。打開(kāi)瀏覽器應(yīng)用程序時(shí)，會(huì)從注冊(cè)表中讀出記錄的網(wǎng)址信息，將讀到的網(wǎng)址信息在網(wǎng)址欄顯示出來(lái)。 ②、處理地址條相應(yīng)：當(dāng)用戶(hù)在地址欄輸入一個(gè)網(wǎng)址，點(diǎn)擊“轉(zhuǎn)到”按鈕（或者回車(chē)鍵）后，應(yīng)用程序會(huì)獲取輸入的網(wǎng)址信息，存入一個(gè)變量里，然后獲得當(dāng)前活動(dòng)視圖，利用其成員函數(shù)鏈接到網(wǎng)頁(yè)。當(dāng)點(diǎn)下“轉(zhuǎn)到”按鈕時(shí)，應(yīng)用程序還會(huì)判斷地址欄是否保存有此次輸入的網(wǎng)址，如果保存了就不進(jìn)行進(jìn)一步的操作，如沒(méi)保存此次輸入的網(wǎng)址，則會(huì)將輸入的網(wǎng)址保存起來(lái)，然后加入地址欄。這就實(shí)現(xiàn)了自動(dòng)記錄網(wǎng)址的功能。 ③、地址條的刷新：如前所述， OnDocumentComplete()函數(shù)中的 lpszURL 和發(fā)生導(dǎo)航的 URL，是完整有效的 URL 形式，可能不同于 Navigate2 方法中設(shè)定的 UR（它可以 是 簡(jiǎn)略的 URL）。也就是說(shuō)，當(dāng)頁(yè)面下載完以后， OnDocumentComplete()函數(shù)中的變量 lpszURL就保存了是完整有效的 URL 地址，我們可以用此 URL 地址取代輸入的網(wǎng)址，完成地址條的刷新。當(dāng)應(yīng)用程序打開(kāi)一個(gè)超級(jí)鏈接時(shí)，也會(huì)刷新地址欄，我們就可以在OnDocumentComplete()函數(shù)中完成對(duì)地址欄的刷新。 首先需要在 ChtmlView 類(lèi)中 建立 OnDocumentComplete()函數(shù)，可以使用 Class Wizard來(lái)添加該函數(shù)。然后，在該函數(shù)中我們調(diào)用一個(gè) CMainFrame 類(lèi)函數(shù)，從而實(shí)現(xiàn)對(duì)編輯框的設(shè)置。 添加“功能選項(xiàng)菜單” 為了瀏覽網(wǎng)頁(yè)的方便，瀏覽器應(yīng)具有回到前一個(gè)頁(yè)面、到下一個(gè)頁(yè)面、刷新、回到主頁(yè)等功能，此菜單實(shí)現(xiàn)以上所述功能。 此菜單具有回到前一個(gè)頁(yè)面、到下一個(gè)頁(yè)面、刷新、回到主頁(yè)等功能。利用 CHTMLVIEW類(lèi)實(shí)現(xiàn)這些功能比較容易，只需調(diào)用 CHTMLVIEW 類(lèi)的一些成員函數(shù)。主要的是將這些成員函數(shù)正確地映射到菜 單項(xiàng)。實(shí)現(xiàn)上述功能的成員函數(shù)分別為： GoBack()； GoForward()； Refresh()； GoHome(). 27 添加與“功能選項(xiàng)菜單”相對(duì)應(yīng)的工具欄 只需選好相應(yīng)的工具欄圖標(biāo)，再與菜單映射到同一消息處理函數(shù)即可。即把工具欄圖標(biāo)的 ID 設(shè)為和菜單項(xiàng)相同即可，在此不再詳述。 添加“查看網(wǎng)頁(yè)源文件”菜單選項(xiàng) 此功能可查看你所打開(kāi)的網(wǎng)頁(yè)的 HTML 文件。 當(dāng)用戶(hù)連接到一個(gè)網(wǎng)頁(yè)上時(shí)，可以點(diǎn)擊“查看”菜單里的“網(wǎng)頁(yè)源文件”選項(xiàng)來(lái)查看打開(kāi)的網(wǎng)頁(yè)的 HTML 源文件。此處應(yīng)用程序用到了 WinI 類(lèi)的編程技術(shù) 。 首先，從地址欄獲取輸入的網(wǎng)址信息 (域名 )；由于 Inter 網(wǎng)絡(luò)應(yīng)用是基于客戶(hù)機(jī) /服務(wù)器體系結(jié)構(gòu)的，故而我們接著要建立一個(gè) Inter 會(huì)話；然后利用輸入的域名獲取此域名指向的 HTML 文件，讀文件，將讀到的信息（ HTML 源代碼）保存在一個(gè)字符串里。當(dāng)點(diǎn)擊菜單命令時(shí)，打開(kāi)一個(gè)對(duì)話框，將獲取的信息傳給對(duì)話框的成員變量，刷新，使對(duì)話框顯示獲得的 HTML 源代碼。 下面給出“ 查看網(wǎng)頁(yè)源文件”函數(shù)流程圖： 圖 查看網(wǎng)頁(yè)源文件函數(shù)流程圖 添加“刪除歷史記錄”菜單選 項(xiàng) 此功能可以刪除地址欄紀(jì)錄的所有網(wǎng)址，即把地址欄清空。為了不破壞注冊(cè)表中的值，本程序只是選擇了不把網(wǎng)址顯示。 生成我的收藏夾 從注冊(cè)表中讀出“我的收藏夾”文件夾所在的位置，從中找到 .URL 后綴的文件，將文件名讀出，依據(jù)文件名自動(dòng)生成菜單。然后處理菜單響應(yīng)，鏈接到菜單所指的網(wǎng)頁(yè)面。 為了讓用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)更方便，本程序?qū)崿F(xiàn)了我的收藏夾菜單。由于收藏夾的實(shí)現(xiàn)比較復(fù)雜，而且自己的編程水平不高，故而只實(shí)現(xiàn)了我的收藏夾菜單，沒(méi)有實(shí)現(xiàn)“加入到收藏夾”、“整理收藏夾”等功能。此菜單可處理收藏夾響應(yīng)，即當(dāng)選中 菜單項(xiàng)時(shí)，可以鏈接 28 到菜單顯示的頁(yè)面。為實(shí)現(xiàn)此功能，首先應(yīng)從注冊(cè)表中讀出“我的收藏夾”文件夾所在的位置，從中找到 .U