1. 程式人生 > >3.24 學前端 http協議

3.24 學前端 http協議

一 HTTP概述

HTTP(hypertext transport protocol),即超文字傳輸協議。這個協議詳細規定了瀏覽器和全球資訊網伺服器之間互相通訊的規則。

HTTP就是一個通訊規則,通訊規則規定了客戶端傳送給伺服器的內容格式,也規定了伺服器傳送給客戶端的內容格式。其實我們要學習的就是這個兩個格式!客戶端傳送給伺服器的格式叫“請求協議”;伺服器傳送給客戶端的格式叫“響應協議”。

特點:

HTTP叫超文字傳輸協議,基於請求/響應模式的!
HTTP是無狀態協議。

二 請求協議

請求協議的格式如下:

請求首行;  // 請求方式 請求路徑 協議和版本,例如:GET /index.html HTTP/1.1
請求頭資訊;// 請求頭名稱:請求頭內容,即為key:value格式,例如:Host:localhost 空行; // 用來與請求體分隔開 請求體。 // GET沒有請求體,只有POST有請求體。
  • 瀏覽器傳送給伺服器的內容是如上格式,如果不是這個格式伺服器將無法解讀!
  • 在HTTP協議中,請求有很多請求方法,其中最為常用的就是GET和POST。
  • 不同的請求方法之間的區別。

2.1 GET請求

HTTP預設的請求方法就是GET

  • 沒有請求體
  • 資料必須在1K之內!
  • GET請求資料會暴露在瀏覽器的位址列中

GET請求常用的操作:

  1. 在瀏覽器的位址列中直接給出URL,那麼就一定是GET請求
  2. 點選頁面上的超連結也一定是GET請求
  3. 提交表單時,表單預設使用GET請求,但可以設定為POST

請求頭資訊都有哪些:

//可以接受的型別
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 
Accept-Encoding:gzip, deflate, sdch  //資料的壓縮方式
Accept-Language:zh-CN,zh;q=0.8       //可以接受的語言
Cache-Control:no-cache               //快取
Connection:keep-alive                //連結模式 不立刻斷掉
Cookie:csrftoken=z5H43ZwARx7AIJ82OEizBOWbsAQA2LPk //標記使用者 Host:127.0.0.1:8090 //伺服器的地址 Pragma:no-cache Upgrade-Insecure-Requests:1 User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36 //瀏覽器的版本和作業系統的
  • GET 127.0.0.1:8090/login HTTP/1.1:GET請求,請求伺服器路徑為 127.0.0.1:8090/login ,協議為1.1;
  • Host:localhost:請求的主機名為localhost;
  • User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0:與瀏覽器和OS相關的資訊。有些網站會顯示使用者的系統版本和瀏覽器版本資訊,這都是通過獲取User-Agent頭資訊而來的;
  • Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8:告訴伺服器,當前客戶端可以接收的文件型別,其實這裡包含了*/*,就表示什麼都可以接收;
  • Accept-Language: zh-cn,zh;q=0.5:當前客戶端支援的語言,可以在瀏覽器的工具選項中找到語言相關資訊;
  • Accept-Encoding: gzip, deflate:支援的壓縮格式。資料在網路上傳遞時,可能伺服器會把資料壓縮後再發送;
  • Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7:客戶端支援的編碼;
  • Connection: keep-alive:客戶端支援的連結方式,保持一段時間連結,預設為3000ms;
  • Cookie: JSESSIONID=369766FDF6220F7803433C0B2DE36D98:因為不是第一次訪問這個地址,所以會在請求中把上一次伺服器響應中傳送過來的Cookie在請求中一併傳送去過;這個Cookie的名字為JSESSIONID。

注意:

  • HTTP無狀態:無狀態是指協議對於事務處理沒有記憶能力,伺服器不知道客戶端是什麼狀態。從另一方面講,開啟一個伺服器上的網頁和你之前開啟這個伺服器上的網頁之間沒有任何聯絡如果你要實現一個購物車,需要藉助於Cookie或Session或伺服器端API(如NSAPI and ISAPI)記錄這些資訊,請求伺服器結算頁面時同時將這些資訊提交到伺服器當你登入到一個網站時,你的登入狀態也是由Cookie或Session來“記憶”的,因為伺服器並不知道你是否登入
  • 優點:伺服器不用為每個客戶端連線分配記憶體來記憶大量狀態,也不用在客戶端失去連線時去清理記憶體,以更高效地去處理WEB業務
  • 缺點:客戶端的每次請求都需要攜帶相應引數,伺服器需要處理這些引數

容易犯的誤區:

  1. HTTP是一個無狀態的面向連線的協議,無狀態不代表HTTP不能保持TCP連線,更不能代表HTTP使用的是UDP協議(無連線)
  2. 從HTTP/1.1起,預設都開啟了Keep-Alive,保持連線特性,簡單地說,當一個網頁開啟完成後,客戶端和伺服器之間用於傳輸HTTP資料的TCP連線不會關閉,如果客戶端再次訪問這個伺服器上的網頁,會繼續使用這一條已經建立的連線
  3. Keep-Alive不會永久保持連線,它有一個保持時間,可以在不同的伺服器軟體(如Apache)中設定這個時間


2.2 POST請求

  1. 資料不會出現在位址列中
  2. 資料的大小沒有上限
  3. 有請求體
  4. 請求體中如果存在中文,會使用URL編碼!
username=%E5%BC%A0%E4%B8%89&password=123


為什麼要用url編碼

  • 我們都知道Http協議中引數的傳輸是”key=value”這種簡直對形式的,如果要傳多個引數就需要用“&”符號對鍵值對進行分割。如”?name1=value1&name2=value2”,這樣在服務端在收到這種字串的時候,會用“&”分割出每一個引數,然後再用“=”來分割出引數值。
  • 針對“name1=value1&name2=value2”我們來說一下客戶端到服務端的概念上解析過程: 上述字串在計算機中用ASCII嗎表示為:
 6E616D6531 3D 76616C756531 26 6E616D6532 3D 76616C756532。 
   6E616D6531:name1 
   3D:= 
   76616C756531:value1 
   26:&
   6E616D6532:name2 
   3D:= 
   76616C756532:value2 
  • 服務端在接收到該資料後就可以遍歷該位元組流,首先一個位元組一個位元組的吃,當吃到3D這位元組後,服務端就知道前面吃得位元組表示一個key,再想後吃,如果遇到26,說明從剛才吃的3D到26子節之間的是上一個key的value,以此類推就可以解析出客戶端傳過來的引數。
  • 現在有這樣一個問題,如果我的引數值中就包含=或&這種特殊字元的時候該怎麼辦。 比如說“name1=value1”,其中value1的值是“va&lu=e1”字串,那麼實際在傳輸過程中就會變成這樣“name1=va&lu=e1”。我們的本意是就只有一個鍵值對,但是服務端會解析成兩個鍵值對,這樣就產生了奇異。
  • 如何解決上述問題帶來的歧義呢?解決的辦法就是對引數進行URL編碼 URL編碼只是簡單的在特殊字元的各個位元組前加上%,例如,我們對上述會產生奇異的字元進行URL編碼後結果:“name1=va%26lu%3D”,這樣服務端會把緊跟在“%”後的位元組當成普通的位元組,就是不會把它當成各個引數或鍵值對的分隔符。


使用表單可以發POST請求,但表單預設是GET

<form action="" method="post">
  關鍵字:<input type="text" name="keyword"/>
  <input type="submit" value="提交"/>
</form>


點選提交,檢視請求內容如下:

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:13
Content-Type:application/x-www-form-urlencoded
Cookie:csrftoken=z5H43ZwARx7AIJ82OEizBOWbsAQA2LPk
Host:127.0.0.1:8090
Origin:http://127.0.0.1:8090
Pragma:no-cache
Referer:http://127.0.0.1:8090/login/
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) 
           AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36

Form Data
username:yuan


POST請求是可以有體的,而GET請求不能有請求體。

  • Referer: http://localhost:8080/hello/index.jsp:請求來自哪個頁面,例如你在百度上點選連結到了這裡,那麼Referer:http://www.baidu.com;如果你是在瀏覽器的位址列中直接輸入的地址,那麼就沒有Referer這個請求頭了;
  • Content-Type: application/x-www-form-urlencoded:表單的資料型別,說明會使用url格式編碼資料;url編碼的資料都是以“%”為字首,後面跟隨兩位的16進位制。
  • Content-Length:13:請求體的長度,這裡表示13個位元組。
  • keyword=hello:請求體內容!hello是在表單中輸入的資料,keyword是表單欄位的名字。


Referer請求頭是比較有用的一個請求頭,它可以用來做統計工作,也可以用來做防盜鏈。

  • 統計工作:我公司網站在百度上做了廣告,但不知道在百度上做廣告對我們網站的訪問量是否有影響,那麼可以對每個請求中的Referer進行分析,如果Referer為百度的很多,那麼說明使用者都是通過百度找到我們公司網站的。
  • 防盜鏈:我公司網站上有一個下載連結,而其他網站盜鏈了這個地址,例如在我網站上的index.html頁面中有一個連結,點選即可下載JDK7.0,但有某個人的微博中盜鏈了這個資源,它也有一個連結指向我們網站的JDK7.0,也就是說登入它的微博,點選連結就可以從我網站上下載JDK7.0,這導致我們網站的廣告沒有看,但下載的卻是我網站的資源。這時可以使用Referer進行防盜鏈,在資源被下載之前,我們對Referer進行判斷,如果請求來自本網站,那麼允許下載,如果非本網站,先跳轉到本網站看廣告,然後再允許下載。

三 響應協議

3.1 響應內容

響應協議的格式如下:

響應首行;
響應頭資訊;
空行;
響應體。

響應內容是由伺服器傳送給瀏覽器的內容,瀏覽器會根據響應內容來顯示。遇到<img src=''>會開一個新的執行緒載入,所以有時圖片多的話,內容會先顯示出來,然後圖片才一張張加載出來。

Request URL:http://127.0.0.1:8090/login/
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:8090
Response Headers
view source
Content-Type:text/html; charset=utf-8
Date:Wed, 26 Oct 2016 06:48:50 GMT
Server:WSGIServer/0.2 CPython/3.5.2
X-Frame-Options:SAMEORIGIN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/login/" method="post">
  使用者名稱:<input type="text" name="username"/>
  <input type="submit" value="提交"/>
</form>    
</body>
</html>
  • HTTP/1.1 200 OK:響應協議為HTTP1.1,狀態碼為200,表示請求成功,OK是對狀態碼的解釋;
  • Server:WSGIServer/0.2 CPython/3.5.2:伺服器的版本資訊;
  • Content-Type: text/html;charset=UTF-8:響應體使用的編碼為UTF-8;
  • Content-Length: 724:響應體為724位元組;
  • Set-Cookie: JSESSIONID=C97E2B4C55553EAB46079A4F263435A4; Path=/hello:響應給客戶端的Cookie;
  • Date: Wed, 25 Sep 2012 04:15:03 GMT:響應的時間,這可能會有8小時的時區差;


3.2 狀態碼

響應頭對瀏覽器來說很重要,它說明了響應的真正含義。例如200表示響應成功了,302表示重定向,這說明瀏覽器需要再發一個新的請求。

  • 200:請求成功,瀏覽器會把響應體內容(通常是html)顯示在瀏覽器中;
  • 404:請求的資源沒有找到,說明客戶端錯誤的請求了不存在的資源;
  • 500:請求資源找到了,但伺服器內部出現了錯誤;
  • 302:重定向,當響應碼為302時,表示伺服器要求瀏覽器重新再發一個請求,伺服器會發送一個響應頭Location,它指定了新請求的URL地址;
  • 304:當用戶第一次請求index.html時,伺服器會新增一個名為Last-Modified響應頭,這個頭說明了 index.html的最後修改時間,瀏覽器會把index.html內容,以及最後響應時間快取下來。當用戶第二次請求index.html時,在請求中包含一個名為If-Modified-Since請求頭,它的值就是第一次請求時伺服器通過Last-Modified響應頭髮送給瀏覽器的值,即index.html最後的修改時間,If-Modified-Since請求頭就是在告訴伺服器,我這裡瀏覽器快取的index.html最後修改時間是這個,您看看現在的index.html最後修改時間是不是這個,如果還是,那麼您就不用再響應這個index.html內容了,我會把快取的內容直接顯示出來。而伺服器端會獲取If-Modified-Since值,與index.html的當前最後修改時間比對,如果相同,伺服器會發響應碼304,表示index.html與瀏覽器上次快取的相同,無需再次傳送,瀏覽器可以顯示自己的快取頁面,如果比對不同,那麼說明index.html已經做了修改,伺服器會響應200。

這裡寫圖片描述

3.3 其他響應頭

告訴瀏覽器不要快取的響應頭:

  • Expires: -1;
  • Cache-Control: no-cache;
  • Pragma: no-cache;
  • Refresh: 3;url=http://www.baidu.com


3.4 HTML中指定響應頭

在HTMl頁面中可以使用<meta http-equiv="" content="">來指定響應頭,例如在index.html頁面中給出<meta http-equiv="Refresh" content="3;url=http://www.baidu.com">,表示瀏覽器只會顯示index.html頁面3秒,然後自動跳轉到http://www.baidu.com.

相關推薦

3.24 前端 http協議

一 HTTP概述 HTTP(hypertext transport protocol),即超文字傳輸協議。這個協議詳細規定了瀏覽器和全球資訊網伺服器之間互相通訊的規則。 HTTP就是一個通訊規則,通訊規則規定了客戶端傳送給伺服器的內容格式,也規定了伺服器傳送

3.24 前端 CSS之選擇器

二 css的選擇器(Selector) 選擇器”指明瞭{}中的“樣式”的作用物件,也就是“樣式”作用於網頁中的哪些元素 1 基礎選擇器 × //通用元素選擇器 *{ margin:0; padding:0; } //匹配任何元素 E //

前端http協議

url編碼 tran 中文 相同 瀏覽器中 之間 做了 響應狀態 pro 一、http協議是什麽? 超文本傳輸協議:HTTP(hypertext transport protocol),即超文本傳輸協議。這個協議詳細規定了瀏覽器和萬維網服務器之間互相傳輸數據的規則。 H

前端http協議知識點

1.特點 簡單快速:每個uri 是固定的 靈活:通過一個http型別,可以完成不同資料型別的傳遞 無連線:連線一次會斷掉,不會保持連線 無狀態:沒有記錄狀態,無法區分兩次連線的身份 2.http報文的組成部分 請求報文:

前端Http協議快取初解

[TOC] 簡介 使用者獲取網路資源,需要通過非常長的網路去伺服器上請求資源,另外服務端為了應對大量的使用者請求而不斷的提升硬體效能與頻寬。這對使用者與服務端都非常的不友好。而快取就是為了解決使用者請求速度與釋放伺服器壓力而生的。 為什麼我會寫Http快取,因為下面

3.29 前端 jquery之操作元素之CSS操作

3.2 CSS操作 3.2.1(樣式) css("{color:'red',backgroud:'blue'}") 3.2.2(位置) offset() position() scrollTop

3.29 前端 jquery之操作元素之文件處理

3.3 文件處理 內部插入 $("#c1").append("<b>hello</b>");//把hello插入#c1到最後一項 $("p").appendTo("div

3.29 前端 jquery之操作元素之擴充套件

$(function(){ BindSingleCheck('#edit_mode', '#tb1'); }); function BindSingleCheck(mode, tb){ $(tb).find(':checkbox').bind('click', function(){

3.26 前端 JavaScript之控制語句

控制語句 if 控制語句 功能說明 如果表示式的值為true則執行語句1, 否則執行語句2 //if-else基本格式 if (表示式){ 語句1; ......; } else{

web前端——1.http協議

ade blog ins 文檔 方式 requests 頭信息 字節流 過程 一 HTTP概述 HTTP(hypertext transport protocol), 即超文本傳輸協議.這個協議詳細規定了瀏覽器和萬維網服務器之間互相通信的規則. HTTP就是一個通信規則,通

前端01.http協議回顧

http一、http1.0和1.1之間有什麽區別?http1.0 :每一次請求/響應都會建立並關閉一次連接,相應速度慢。http1.1:在同一個tcp連接中,可以傳輸多個響應或請求。http1.1默認還開啟長連接。二、客戶端請求。GET / HTTP/1.1 #動作和http協議的版本號 Host: www.

2017.8.6 前端引入 HTTP協議

logs 請求 image .com png alt 技術分享 images src HTTP超文本傳輸協議 HTTP請求的六種方式 2017.8.6 前端引入 HTTP協議

前端基礎(http協議相關篇)

回頭部信息 url tcp三次握手 傳輸 客戶端 分組 部分 改變 指定 網絡協議篇: 1.http請求過程 DNS解析——tcp三次握手——建立tcp連接後發起http請求——服務器響應http請求 ——瀏覽器得到資源——瀏覽器渲染 2.http報文 通用首部:可以出現在

前端小小白的學習之路】整理幾道面試題之(HTTP協議)【轉】

ase 賬號 檢測 提交數據 大型數據集 tor 添加 描述 分享 轉自:http://www.cnblogs.com/ranyonsue/p/5984001.html HTTP簡介 HTTP協議是Hyper Text Transfer Protocol(超文本傳輸

前端面試知識點梳理之四——http協議

strong 允許 使用 類型 包括 響應報文 解答 能力 面試 一、相關問題 http協議的主要特點 http報文的組成部分 http方法 post與get的區別 http狀態碼 什麽是持久連接 什麽是管線化 二、問題解答 1.http協議的主要特點

HTTP協議所要知道的基礎知識(微總結)

局域網 存在 長連接 代理 客戶端請求 n-n 沒有 cati 網絡層 1、網絡本質 進行資源共享和信息傳輸。 2、基於網絡的應用程序的本質 就是獲取數據和傳輸數據給用戶使用。 3、TCP/IP協議棧工作流程 實體層是不屬於TCP/IP協議棧的一層。也就是說TCP/IP協

前端HTTP協議

hyper 概念 wait === RM erro logs 空行 gif HTTP協議簡介 作為學習前端開發的開始,我們必須搞明白以下幾件事   1、什麽是互聯網   互聯網=物理連接介質+互聯網協議 2、互聯網建立的目的? 數據傳輸打破地

HTTP協議原理+實踐 Web開發工程師必

長連接 一個 連接 限制 發展 1-1 產生 tag Nginx部署 第1章 課程導學對課程整體進行介紹,並且說明HTTP協議的重要性,以及學習的必要性。1-1 導學1-2 內容介紹 第2章 HTTP協議基礎及發展歷史本章主要介紹什麽是HTTP協議,HTTP協議的發展歷史,

HTTP協議3)瀏覽器的使用之檢視原始碼

在做CTF的Web類題目時,推薦使用Firefox瀏覽器。下面介紹一些在解題過程中關於瀏覽器的常用技巧。首先就是檢視原始碼。在做Web題目時,經常需要檢視網站原始碼,有的flag直接就藏在原始碼中,有些題目則是在原始碼中給出提示和線索,所以檢視原始碼通常是做Web題的第一步。例題1:BugKu Web2 開

HTTP協議3)瀏覽器的使用之查看源碼

右擊 技術分享 fir 繞過 就是 關於 bug 需要 地址欄 在做CTF的Web類題目時,推薦使用Firefox瀏覽器。下面介紹一些在解題過程中關於瀏覽器的常用技巧。首先就是查看源碼。在做Web題目時,經常需要查看網站源碼,有的flag直接就藏在源碼中,有些題目則是在源碼