課程簡介

Size: px

Start display at page:

Download "課程簡介"

惠胤云
5 years ago
Views:

1 HTTP

2 HyperText Transfer Protocol HyperText 超文本直接連結 (Hyperlinked) 的文件們 Protocol 傳輸協定

3 Hypertext Transfer Protocol HTTP 是定義了 Server 和 Client 之間該如何溝通的一種通訊協定 Web 介面發展的基礎建立在 HTTP 上, 可以傳輸文件圖像各種資料與 HTTP 協定類似, 但做不同事情的通訊協定還包括 FTP Telnet

Web Server (Maybe execute PHP, JSP, or ASP) IP and Port (140.112.91.

4 Web Server (Maybe execute PHP, JSP, or ASP) IP and Port ( :80) How to exchange HTML document and other information. IP and Port ( :966) Browser (IE, Firefox) (Request and interpret HTML format document)

5 請從原始人的角度思考問題假設你是建設全世界第一個網路的人, 從研究發展到實際應用的過程中, 會碰到甚麼問題? 為什麼要這麼思考? 因為所有東西都不是理所當然就應該存在的

6 原始人思考之一兩台電腦總算是連在一起了, 那可以開始傳資料了吧?

7 A: 請給我食物 B: I cannot get you. A: 你說什? B: English, man. English! A: #@%&#!#$ 原始人思考之二

8 原始人思考之三好啦, 你們不要吵了, 大家都聽我的以後食物就用代替, 如果 Yes 就用回答,No 就用 ( 這就是所謂的通訊協定 )

9 原始人思考之四 A: B: A: B:

10 HTTP 通訊協定流程 1. Server 長駐一隻能處理 HTTP 協定的伺服器程式, 等待 Client 的要求 2. Client 根據 HTTP 協定提出 Request 3. Server 接到 Request, 進行適當的處理之後根據 HTTP 協定送回 Response 4. Client 接到 Response, 進行適當處理

11 HTTP 通訊協定流程實例 1. 在電腦安裝並且執行 Tomcat 伺服器軟體 2. 打開 IE, 輸入網址並按下 Enter 3. Tomcat 取得 IE 要求的網頁檔案, 並且把檔案內容複製一份傳給提出要求的 IE 4. IE 接到網頁內容, 經過處理後把內容呈現在畫面上

12 2.Processing Request 1.Send HTTP Request 3.Send HTTP Response Back

13 HTTP 通訊協定要素 HTTP Request: 客戶端發送給伺服器的要求訊息 HTTP Response: 伺服器回傳給客戶端的回應訊息

14 HTTP Request 瀏覽器 --- 傳輸 --> 伺服器我要連到 google.com 拿 /example.html 資源

15 HTTP Verbs GET POST 其他還有 PUT DELETE 等動詞

16 HTTP Request 要素 Method: 用甚麼方法送出資料, 例如 Get Post Header: 用來描述 Request 的資訊 Source: 網路上資源的位址 Arguments: 選用, 傳送參數給 Source 所指的運算資源 Body: 選用, 傳送的其他資料放在這裡例如上傳檔案的資料

17 HTTP Response 瀏覽器 <-- 傳輸 --- 伺服器

18 HTTP Response 要素 Status Code: 回報處理的狀況, 成功或是失敗, 以及是甚麼種類的失敗訊息等 Header: 用來描述 Response 的資訊 Body: 傳送的其他資料放在這裡例如 HTML 文件內容

19 HTTP Status Code 200: 要求處理成功 2xx: 廣義的成功 404: 找不到指定的資源 4xx: Client Error 500: 伺服器程式錯誤 5xx: Server Error

20 HTTP Status 伺服器回傳這次溝通的狀態 2XX: 成功 200 OK, response body 應有內容 3XX: 重新導向 301 Moved Permanently, 請瀏覽器記住例 : 導向到 tw.yahoo.com - 瀏覽器應對新位址重送 GET request 302 Found(Moved Temporarily) 例 : 登入 (POST /login) - 成功後重新導向到首頁 - 瀏覽器應對新位址重送 GET request 304 Not Modified, 回覆 request header 的 If-Modified-Since

21 HTTP Status (2) 4XX: 客戶端錯誤, 可能是前端程式寫錯 400 Bad Request, 參數有錯 401 Unauthorized, 沒有登入 403 Forbidden, 沒有權限存取 404 Not Found, 找不到網頁 5XX: 伺服器錯誤, 伺服器程式有問題 500 Internal Server Error

22 HTTP Request 與網址的關係紅色代表我們要用 HTTP 協定的規範來提出要求藍色部分代表的是要求的位址 Source 綠色部分是我們給的參數 Arguments, 用問號和 Source 隔開

23 HTTP Request 與網址的關係概念上我們會把一個網址當成是網路上的資源任何地方只要透過網址就可以存取這個資源如果網址對應到的東西不是靜態網頁, 那麼參數就是傳給伺服器程式的輸入 ( 有點像函式的概念 )

24 HTML Form 表單標籤利用 <form> 這個標籤, 可以從使用者手上收集資訊, 並且把這些資訊當成參數, 傳送給特定的伺服器端程式處理 <form method="[method]" action="[source]"> 內部包含輸入框選單按鈕等 </form>

25 HTML Form Tag 傳送給伺服器的參數是以參數名稱 = 參數資料的格式處理如果有數個參數, 則用 & 隔開例如 country=taiwan&city=hsinchu

26 Input 和 Select 標籤包在 <form> 中的 <input> 標籤和 <select> 標籤目的是向使用者收集資訊而這兩個標籤的 name 屬性則會當成是 HTTP Request 的參數名稱送出 value 屬性則會被當成是該參數的資料送出

27 Input 標籤以下這個 HTML Code 在送出之後, 會用 get 方法發出一個 HTTP Request 到伺服器端的 getbrand.jsp 這隻程式, 並且夾帶兩個參數 title 和 author <form method="get" action="getbrand.jsp"> <input type="text" name="title" value="homepage" /> <input type="text" name="author" value="ply" /> <input type=submit> </form>

28 實機操作利用網址列測試 jsp 程式利用表單送出使用者資訊給 jsp 程式, 並取得回應利用表單送出使用者資訊給 Google Search, 並且取得回應

29 Network 面板 Google Chrome 開發者工具的 Network 面板可以看 HTTP request 與 response

ASP 電子商務網頁設計

ASP 電子商務網頁設計 Flash Flash CSIE, NTU December 22, 2007 Outline & Flash National Taiwan University December 22, 2007 Page 2 Outline & Flash National Taiwan University December 22, 2007 Page 3 Course Introduction (1/3)