什么是http協(xié)議:
引用百度百科的話說來就是:http協(xié)議其實就是超文本傳輸協(xié)議,超文本傳輸協(xié)議 (HTTP-Hypertext transfer protocol) 是一種詳細(xì)規(guī)定了瀏覽器和萬維網(wǎng)服務(wù)器之間互相通信的規(guī)則,
通過因特網(wǎng)傳送萬維網(wǎng)文檔的數(shù)據(jù)傳送協(xié)議。目前我們使用的http版本是http/1.1其前身是http/1.0。關(guān)于兩個版本不同,下面會不時提及。在整個iso傳輸層次模型中http處于最高層次,而tcp是處于下面一層傳輸層,
也就是說http是基于tcp協(xié)議建立的連接,所以http傳輸建立之前需要先建立tcp連接,也就是三次握手,在建立tcp連接之后方可真正請求響應(yīng)請求。
http傳輸過程詳解:
當(dāng)我們發(fā)送一個ajax請求,或者地址欄輸入url后,我們的瀏覽器就給web服務(wù)器發(fā)送一個request,之后服務(wù)器處理完成后返回響應(yīng)的response給瀏覽器。之后瀏覽器拿到數(shù)據(jù)進(jìn)行解析里面數(shù)據(jù)從而生成我們頁面或者組裝數(shù)據(jù)。
期間傳輸還有可能經(jīng)歷了代理服務(wù)器(目前很多很多網(wǎng)站都用代理服務(wù)器,主要原因是其隱蔽。。)從而實現(xiàn)服務(wù)器端文件緩存。
http傳輸是面向連接的,也就是說如果連接沒有中斷,可以繼續(xù)發(fā)送請求,這個設(shè)置可以在請求頭Connection來設(shè)置,例如:我通過一個url請求了一個html頁面之后,
經(jīng)解析,html頁面中包含對圖片的請求,則會直接再向服務(wù)器發(fā)起請求而不必重新建立tcp連接。等到所有請求都就緒,方可完成一次頁面加載或者請求完畢。
url詳解:
無論是ajax請求還是地址欄輸入url,都要用到請求地址,請求地址用來描述需要請求的資源位置以及篩選方式:大體結(jié)構(gòu)如下
http://www.temas.com/myBlog/file/date.php?name=yuchao&age=26#modfiled
這個url分為幾個部分:
http:表示底層使用的協(xié)議(如http、https、ftp)
www.temas.com:表示服務(wù)器域名(或者是ip地址)
/myBlog/file/date.php:表示資源路徑
?name=yuchao&age=26:發(fā)送給服務(wù)器數(shù)據(jù)
#modfiled:錨點(diǎn)
http消息結(jié)構(gòu):
整個http消息結(jié)構(gòu)分為request以及response兩部分:為了便于講解,我從w3c截取一個圖如下:
這是從chrome的Network截圖,且不管每個瀏覽器將其如何區(qū)分,按照我們看到的來分組:
上面第一部分是請求資源地址以及請求方式屬于request部分
第二部分是返回狀態(tài)碼,屬于response部分
第三部分是request部分,第四部分是response部分。
總體來說整個請求分為兩個部分我們來分析里面主要的結(jié)構(gòu)如下:
request部分分析:
請求的url即我們地址欄輸入的url或者ajax請求的那個參數(shù)url。
請求方式:常用的有g(shù)et、post以及head請求:
head請求:head請求是一種返回不呈現(xiàn)數(shù)據(jù)的請求,也就是只請求一個報文頭,通常用于請求一個文件去判斷文件是否更新或者在我的項目中去請求服務(wù)器時間。
get與post比較:
get請求一般都會用來查詢資源信息,post請求一般會用來更新資源信息。
get提交數(shù)據(jù)方式是將參數(shù)放置url之后用&來分開例如http://www.temas.com/myBlog/file/date.php?name=yuchao&age=26,
post請求可以以對象字面量形式進(jìn)行參數(shù)傳輸:{name:"yuchao";age:"26"},所以通過post方式發(fā)送的請求中包含內(nèi)容這一項,而get請求直接將內(nèi)容附在url之后
正是由于數(shù)據(jù)傳輸方式不同導(dǎo)致get傳輸數(shù)據(jù)量需要在url字節(jié)限制范圍之內(nèi),而post幾乎無限制。同時get參數(shù)放置于url中也不利于安全。
Accept:表示瀏覽器可以接受的類型,一般瀏覽器都會發(fā)給服務(wù)器*表示通配所有類型。text/html類型就表示我們常說的html文檔。
當(dāng)我們規(guī)定了一種類型時候而服務(wù)器沒有這種類型可以返回,則會拋出一個406狀態(tài)碼的錯誤(no acceptable)
Accept-Encoding:瀏覽器自身聲明接受的編碼方式,通常是壓縮方法;
Accept-Language:瀏覽器自身聲明可以接受的語言例如中文:zh-CN;
cookie:將cookie數(shù)據(jù)發(fā)送給服務(wù)器
Connection:可選值有:
keep-alive:當(dāng)一個網(wǎng)頁打開完成后,客戶端和服務(wù)器之間用于傳輸HTTP數(shù)據(jù)的TCP連接不會關(guān)閉,如果客戶端再次訪問這個服務(wù)器上的網(wǎng)頁,會繼續(xù)使用這一條已經(jīng)建立的連接,
重新向該服務(wù)器發(fā)送請求時候不會重新經(jīng)過三次握手建立鏈接,而是直接可以進(jìn)行請求,這個請求時間段可以由服務(wù)器端Keep-Alive字段進(jìn)行設(shè)置,
當(dāng)過了這個時間段之后沒有任何請求則關(guān)閉該連接。http1.0中默認(rèn)是close,而目前應(yīng)用的1.1版本中默認(rèn)是keep-alive長連接。具體應(yīng)用看下面response介紹該key;
Connection: close? 代表一個Request完成后,客戶端和服務(wù)器之間用于傳輸HTTP數(shù)據(jù)的TCP連接會關(guān)閉, 當(dāng)客戶端再次發(fā)送Request,需要重新建立TCP連接。
User-Agent:客戶端使用的瀏覽器以及操作系統(tǒng)
Cache-Control:瀏覽器緩存機(jī)制,一般會有max-age=值,或者no-cache或者public、private;
If-Modified-Since:瀏覽器緩存內(nèi)容最后修改時間;
if-None-Match:和ETag一起工作,比較兩者值 獲取內(nèi)容是否改變。
response部分分析:
status:返回狀態(tài)碼,
HTTP/1.1中定義了5類狀態(tài)碼, 狀態(tài)碼由三位數(shù)字組成,第一個數(shù)字定義了響應(yīng)的類別
100-199 ?提示信息 - 表示請求已被成功接收,繼續(xù)處理
200-299 ?成功 - 表示請求已被成功接收,理解,接受
300-399 ?重定向 - 要完成請求必須進(jìn)行更進(jìn)一步的處理
400-499 ?客戶端錯誤 - ?請求有語法錯誤或請求無法實現(xiàn)
500-599 ?服務(wù)器端錯誤 - ? 服務(wù)器未能實現(xiàn)合法的請求
我們來看一下一些常見的狀態(tài)碼:
200:OK,表明請求成功完成,所有資源成功發(fā)送給客戶端;
302:重定向,例如google在中國被黑掉之后,只能轉(zhuǎn)戰(zhàn)利用香港服務(wù)器去請求,我們輸入www.google.com,
服務(wù)器就會返回302 Found,并且客戶端接收到的response中l(wèi)ocation字段包含一個新的url地址,然后瀏覽器會根據(jù)這個地址重新發(fā)送一個新url的request;
304:使用的緩存文件
400:客戶端請求與語法錯誤,不能被服務(wù)器解讀;
403:服務(wù)器拒絕服務(wù);
404:請求資源不存在;
500 Internal Server Error 服務(wù)器發(fā)生了不可預(yù)期的錯誤503 Server Unavailable 服務(wù)器當(dāng)前不能處理客戶端的請求,一段時間后可能恢復(fù)正常
Keep-Alive:長連接設(shè)置的值,如下圖截圖:
有兩個值:timeout以及max,例如:Keep-Alive:timeout=5,max=100,只有當(dāng)connection為keep-alive并且服務(wù)端支持時候才會生效。
其中timeout表示超時時間,max表示最大連接數(shù)。即:在5秒之內(nèi)服務(wù)器始終保持空閑連接,在這五秒之內(nèi)可以發(fā)送請求不必重新建立連接,超過這個時間則會重新建立連接進(jìn)行請求。
在保持持久連接之間每發(fā)送一個請求max值就會減少一個,直到為0為止則會自動斷開連接。
一般實際開發(fā)中,這個值的設(shè)置要根據(jù)具體網(wǎng)頁中嵌入的請求個數(shù)去設(shè)置:例如網(wǎng)頁中有20個圖片,五個外部腳本,三個css樣式表。則可以根據(jù)傳輸速度設(shè)置超時時間5-20秒之內(nèi),max值設(shè)置為30-100;
這樣設(shè)計初衷就是為了既能減少不必要的tcp連接,又能避免頻繁的請求造成服務(wù)器連接池冗余。
這個值從根本上來說跟前端沒有太多關(guān)系,但是在網(wǎng)站性能優(yōu)化很是關(guān)鍵。選擇多次建立tcp連接還是選擇空余一段時間請求被浪費(fèi),就要看實際需求以及能否設(shè)置出一個合理的Keep-Alive值
Conent-Length:表示返回實體內(nèi)容長度大小,一般應(yīng)用在返回靜態(tài)頁面或者一張圖片并且數(shù)據(jù)量不大時候被設(shè)置;大小為bite字節(jié);例如一張圖片的請求:Connent-Length:630;請求一個圖片截圖如下:
Transfer-Encoding:即服務(wù)器端不是一個已知的固定的返回實體時候,服務(wù)器會一邊產(chǎn)生數(shù)據(jù),一邊發(fā)送給客戶端,
這時候服務(wù)器就需要用Transfer-Encoding:chunked分塊編碼來代替Conent-Length,設(shè)置該key后Content-Length就失效了。
對于前段來說只需關(guān)心返回的狀態(tài)是否是成功即可,但是對于后臺需要用到這個設(shè)置來判斷客戶端是否接受完全部數(shù)據(jù)。詳細(xì)請參考
Date:服務(wù)器返回數(shù)據(jù)時間,我經(jīng)常就用這個值來取得服務(wù)器時間
Etag:與if-modified-since配合使用;
Last-Modified:作用: 用于指示資源的最后修改日期和時間。一般都用來處理緩存,
Content-Type:作用:WEB服務(wù)器告訴瀏覽器自己響應(yīng)的對象的類型和字符集,例如:Content-Type: text/html; charset=utf-8,Content-Type: image/jpeg
server:指明服務(wù)器軟件版本;
Referer:告訴服務(wù)器該請求是在哪個鏈接發(fā)過來的,據(jù)此可以統(tǒng)計從某個頁面跳轉(zhuǎn)過來次數(shù);
X-powered0by:表示該網(wǎng)站開發(fā)技術(shù)
ajax修改獲取header:
利用xmlHttp.setRequestHeader來設(shè)置request請求頭:例如:xmlHttp.setRequestHeader('cache-control','no-cache');
利用xmlHttp.getResponseHeader來獲取response頭信息;例如:xmlHttp.getResponseHeader("Date");
另外 request.setCharacterEncoding("UTF-8")也可以設(shè)置發(fā)送到服務(wù)端數(shù)據(jù)編碼格式(一般來說發(fā)送的編碼格式跟服務(wù)端解析格式必須是一致的)