第三章Web架构与观念介绍.ppt

第三章 Web架構與觀念介紹 李嘉銘 大綱 The World Wide Web (WWW) 運作架構 靜態網頁 動態網頁技術 The World Wide Web 一個Internet上用來存取鏈結文件(linked documents)的一個架構 最一開始創立的目標以文件分享為主，配合超連結的觀念 從靜態的內容，到動態的內容與多媒體 World Wide Web Consortium World Wide Web Consortium (W3C), 是一個組織致力於： 促進Web的發展 將通訊協定標準化 促進Web站台間能有意義的溝通(interoperability) W3C網站 架構總攬 (1) (a) Web網頁 (b) 點了連結後展現的網頁 Web架構總攬 (2) 客戶端 (The Client Side) 瀏覽器(browser) 一個程式可以用來展現網頁與擷取使用者在網頁上的操作 (a) A browser plug-in. (b) A helper application. Plug-in 與 Helper Application Plug-in 內嵌在瀏覽器中用來輔助瀏覽器展現的程式模組(code module ) 如：Flash Player, Java Plug-in, Quick Time Player Helper application 是一個完整的程式(complete program)，由瀏覽器呼叫來輔助展現網頁上的內容 如：Word, Acrobat URL (Uniform Resource Locators) 一個標準化的網路上存取資源的表示式 寄一封信給別人需要：寄件方式、住址、姓名 要存取網路上一個檔案需要？ 用何種方式存取網頁？ 網頁在哪裡？ 網頁的名稱？ URL的例子 Ex. /products.html 用何種方式讀取網頁？ 通訊協定的名稱 (http) 網頁的位置？ 機器的DNS名稱 () 網頁的名稱？ 網頁的檔案名稱 (products.html) 一般常見的URLs URLs不只可以用來瀏覽網頁，也整合了許多Internet的服務，讓瀏覽器對網路的存取有一個單一簡單的表示式。 當使用者點了一個超連結(1) 瀏覽器必須執行一連串的動作才能將網頁讀取下來 Ex. /polity/index.html 瀏覽器先確認使用者點的網址(URL) 瀏覽器向DNS詢問的IP位址 DNS回應3. 瀏覽器建立一個TCP連結到3.的通訊埠80 瀏覽器送出一個檔案存取要求/polity/index.html 伺服器回應/polity/index.html的內容 TCP連結斷線 瀏覽器展現/polity/index.html中的文字 瀏覽器重複以上動作將網頁中影像的部分取回並展現在銀幕中 當使用者點了一個超連結(2) HTML (Hypertext Markup Language) HTML是一個標籤語言(markup language)，用來描述文件如何被格式化與展現 標籤(tags, 格式化與展現的指令) 屬性(Attributes, 標籤相關的參數) HTML的例子 一個簡單的網頁原始HTML碼 經過瀏覽器處理過的網頁 HTML標籤 (2) 表單 (Forms) 利用表單可以達成使用者與動態網頁程式的互動 一個表單分成 表單宣告 提示文字 填寫內容部分 上傳按鈕 表單 (Forms) 表單 (Forms) 瀏覽器展現的網頁 表單 (Forms) 瀏覽器將使用者填寫的內容，經過一個適當的編碼後傳上Server 表單 (Forms) 利用Dreamweaver設計表單例子 forms.htm forms_hidden.htm Web狀態紀錄 Web主要是以讀取文件為主，基本上是無狀態(stateless)，沒有登入的觀念。 許多應用需要記錄使用者的身份 購物車 網路銀行 如何辨別不同的使用者？ URL rewriting Server送出網址前，先將網址改寫，加上額外的資訊 Hidden fields 在表單中用hidden的欄位增加一些資訊 Cookies 在瀏覽器端紀錄連結資訊 Cookies 在瀏覽器端記錄一些簡單的資訊，以便讓Server查詢 IE可以在C:\Documents and Settings\UserName\Cookies找到 動態網頁技術 (Dynamic Web Documents) 由Server端執行 CGI, ASP, JSP, PHP 在Client端執行 Java Script, Dynamic HTML, Flash… CGI (Common Gateway Interface) 一個標準的介面讓Web Server可與其後端程式合作完成使用者的要求