概述
- 客戶(hù)端和服務(wù)器之間交互的時(shí)候傀蓉，客戶(hù)端不僅可以發(fā)送請(qǐng)求給服務(wù)器撩幽，還可以把一些內(nèi)容傳遞給服務(wù)器；服務(wù)器接收到請(qǐng)求后退唠，也會(huì)把一些內(nèi)容返回給客戶(hù)端鹃锈； 客戶(hù)端 <----> 服務(wù)器
- [HTTP報(bào)文] 客戶(hù)端和服務(wù)器之間傳輸?shù)膬?nèi)容統(tǒng)稱(chēng)為HTTP報(bào)文
- 首部(頭)：通用首部、請(qǐng)求頭瞧预、響應(yīng)頭屎债、自定義頭
- 主體：請(qǐng)求主體仅政、響應(yīng)主體
AJAX的四步
- 1、 創(chuàng)建AJAX對(duì)象
var xhr=new XMLHttpRequest; - 2盆驹、打開(kāi)請(qǐng)求的URL地址(配置一些基礎(chǔ)參數(shù))
xhr.open([http method],[Request url and parameters],[sync/async],[user name],[user pass]); - 3圆丹、綁定事件,用來(lái)監(jiān)聽(tīng)AJAX狀態(tài)的改變,在不同狀態(tài)做不同的事情
xhr.onreadystatechange=function(){
if(xhr.readyState===4 && /^2\d{2}$/.test(xhr.status)){
xhr.responseText;//->獲取響應(yīng)主體內(nèi)容
}
} - 4、發(fā)送AJAX請(qǐng)求
xhr.send([post data]);
細(xì)節(jié)：
1躯喇、創(chuàng)建AJAX對(duì)象使用XMLHttpRequest在IE6瀏覽器中不兼容辫封，我么需要使用ActiveXObject來(lái)做處理
2、http method ->HTTP請(qǐng)求方式
不管使用哪一種方式廉丽，客戶(hù)端都可以把數(shù)據(jù)傳遞給服務(wù)器倦微，服務(wù)器也會(huì)把數(shù)據(jù)返回給客戶(hù)端Request url 請(qǐng)求的URL地址，我們通過(guò)這個(gè)地址就可以找到對(duì)應(yīng)的服務(wù)器以及對(duì)應(yīng)的服務(wù)正压，再以及對(duì)應(yīng)的目錄地址(我們想要的). 真實(shí)項(xiàng)目中欣福，這個(gè)地址后臺(tái)開(kāi)發(fā)提供給前端的(API文檔).
async/sync 同步或者異步，不寫(xiě)默認(rèn)是true->異步焦履，寫(xiě)成false是同步
同步：AJAX請(qǐng)求沒(méi)有完成劣欢，其它事情做不了
異步：AJAX請(qǐng)求沒(méi)有完成，繼續(xù)可以做其它的事情
HTTP方法以及GET系列請(qǐng)求和POST系列請(qǐng)求的區(qū)別:
本質(zhì):get系列的一般應(yīng)用于給服務(wù)器的少裁良，從服務(wù)器拿的多這種需求，而post系列的一般應(yīng)用于校套，給服務(wù)器的多价脾，從服務(wù)器拿的少。在真實(shí)項(xiàng)目中笛匙，GET系列的話(huà)侨把，我們傳遞給服務(wù)器內(nèi)容一般都通過(guò)問(wèn)號(hào)傳參的方式，而POST系列一般都把數(shù)據(jù)放在請(qǐng)求主體中傳遞給服務(wù)器(約定俗成的規(guī)范)妹孙。
GET 從服務(wù)器獲取資源
POST 往服務(wù)器發(fā)送資源
HEAD 服務(wù)器響應(yīng)報(bào)文只需包含起始行和首部秋柄，不需要返回響應(yīng)主體。
DELETE 告訴服務(wù)器刪除某個(gè)資源
PUT 往服務(wù)器發(fā)送資源GET請(qǐng)求沒(méi)有POST請(qǐng)求傳遞給服務(wù)器的內(nèi)容多
GET: xhr.open('get','/getAll?name=zf&age=7');
POST: xhr.open('post'.'/register');
xhr.send('{"name":"劉曉洋","age":8...}');//->在SEND中傳遞的內(nèi)容就是通過(guò)請(qǐng)求主體的方式把數(shù)據(jù)傳遞給服務(wù)器,我們一般都用JSON格式的字符串給服務(wù)器傳遞對(duì)應(yīng)的內(nèi)容蠢正。
每一個(gè)瀏覽器對(duì)于URL的長(zhǎng)度都是由大小限制的(谷歌8KB骇笔、火狐7KB、IE2KB)嚣崭，所以使用GET請(qǐng)求我們不會(huì)給服務(wù)器傳遞太多的內(nèi)容笨触，因?yàn)槌^(guò)限制的部分瀏覽器就會(huì)自己把它截了；而POST理論上不會(huì)受到限制的雹舀。GET請(qǐng)求會(huì)出現(xiàn)緩存(這里的緩存我們無(wú)法控制),POST不會(huì)
不想要緩存的話(huà),我們?cè)诿恳淮握?qǐng)求的時(shí)候在URL的末尾追加一個(gè)隨機(jī)數(shù)即可
xhr.open('get','/getAll?name=zf&age=7&_='+Math.random());GET請(qǐng)求沒(méi)有POST請(qǐng)求安全
GET特點(diǎn)：
1芦劣、html中所有的href和src以及通過(guò)地址欄訪(fǎng)問(wèn)的資源，都是get方法
2说榆、沒(méi)有請(qǐng)求主體
3虚吟、因?yàn)樵摲椒](méi)有請(qǐng)求主體寸认，所以需要把參數(shù)格式為請(qǐng)求參數(shù)，拼接到URL后面
4串慰、對(duì)發(fā)送的數(shù)據(jù)有大小限制（因?yàn)闉g覽器對(duì)URL的長(zhǎng)度有大小限制 ie 2k偏塞，chrome 8k，ff 7k）
5模庐、可以被瀏覽器緩存（通過(guò)響應(yīng)首部實(shí)現(xiàn)）POST特點(diǎn)：
1烛愧、有請(qǐng)求主體
2、沒(méi)有大小限制
3掂碱、永遠(yuǎn)不會(huì)被瀏覽器緩存
4怜姿、數(shù)據(jù)即可以放在請(qǐng)求主體中，也可以放在請(qǐng)求參數(shù)中HEAD特點(diǎn)：
1疼燥、和GET特點(diǎn)一模一樣
2沧卢、沒(méi)有響應(yīng)主體
3、該方法既沒(méi)有請(qǐng)求主體醉者，也沒(méi)有響應(yīng)主體DELETE特點(diǎn)：
1但狭、和GET特點(diǎn)一模一樣
2、響應(yīng)成功的狀態(tài)碼為202PUT特點(diǎn)：
1撬即、和POST特點(diǎn)一模一樣
2立磁、該方法有冪等性，而POST沒(méi)有
冪等性= X^n===X
AJAX這件事的開(kāi)始和結(jié)束:
- 從執(zhí)行SEND后才發(fā)送的請(qǐng)求,AJAX這件事才開(kāi)始;到xhr.readyState===4的時(shí)候剥槐，服務(wù)器才把所有的內(nèi)容返回給客戶(hù)端唱歧，此時(shí)AJAX這件事才結(jié)束。
- userName/userPass:一般不用
- xhr.onreadystatechange:AJAX的一個(gè)事件,當(dāng)AJAX狀態(tài)發(fā)生改變的時(shí)候就會(huì)觸發(fā)這個(gè)事件,如果給這個(gè)事件綁定了方法,那么方法也會(huì)被執(zhí)行
- xhr.readyState:
0 UNSEND 未發(fā)送粒竖，執(zhí)行完成new XMLHttpRequest的時(shí)候狀態(tài)就為0了
1 OPENED 已打開(kāi)颅崩，執(zhí)行完成xhr.open狀態(tài)變?yōu)?了
2 HEADERS_RECEIVED 響應(yīng)頭信息已經(jīng)接收
3 LOADING 響應(yīng)主體內(nèi)容正在加載
4 DONE 響應(yīng)主體內(nèi)容加載完成 - xhr.timeout=3000 ->設(shè)置超時(shí)時(shí)間 xhr.ontimeout=function(){}
xhr.abort() ->終止AJAX執(zhí)行
getAllResponseHeaders() ->獲取響應(yīng)頭中的所有信息
getResponseHeader([key]) ->獲取響應(yīng)頭中的指定信息 xhr.getResponseHeader('Date') ->獲取響應(yīng)頭中存儲(chǔ)的服務(wù)器時(shí)間
setRequestHeader([key],[value]) ->設(shè)置請(qǐng)求頭信息
URL內(nèi)容
- URI 統(tǒng)一資源標(biāo)識(shí)符
- URL 統(tǒng)一資源定位符
- 作用：標(biāo)識(shí)該資源在整個(gè)互聯(lián)網(wǎng)上的唯一位置。
- 格式：
http://zhangyatao:123456@www.baidu.com:80
http://www.baidu.com/s?wd=a&b=2&c=3
<方案>://<<用戶(hù)名>>:<<密碼>>@<域名>:<端口>/<請(qǐng)求路徑>?<請(qǐng)求參數(shù)>#<hash>hash - 名詞解釋?zhuān)?br>
方案：標(biāo)識(shí)該請(qǐng)求使用什么協(xié)議去請(qǐng)求蕊苗，如果不填寫(xiě)沿后，瀏覽器設(shè)置默認(rèn)方案為http
端口：指定與服務(wù)器交互的端口。如果不填寫(xiě)會(huì)根據(jù)方案選擇默認(rèn)端口朽砰。
默認(rèn)端口：
http -> 80
https -> 443
ftp -> 21
請(qǐng)求路徑：指定請(qǐng)求的資源路徑
請(qǐng)求參數(shù)的格式是固定的：?key=value&key1=value1&key2=value2
請(qǐng)求參數(shù)：針對(duì)該次請(qǐng)求的過(guò)濾條件
錨點(diǎn)：高級(jí)功能->實(shí)現(xiàn)前端路由
URI是URL的超集->URI包括URL URN
網(wǎng)址訪(fǎng)問(wèn)的流程
1尖滚、解析URL
2、DNS解析（domain naming service） 把域名解析為ip地址
3瞧柔、使用URL指定的協(xié)議熔掺，通過(guò)ip和端口去連接服務(wù)器
4、等待服務(wù)器響應(yīng)
5非剃、連接成功之后置逻，發(fā)送請(qǐng)求
6、等到服務(wù)器響應(yīng)
7备绽、接收服務(wù)器響應(yīng)
8券坞、渲染收到的數(shù)據(jù)并斷開(kāi)連接
http協(xié)議：
原因：全世界90%的互聯(lián)網(wǎng)流量都是通過(guò)http協(xié)議傳輸鬓催；ajax的內(nèi)部原始就是操作的http協(xié)議；每一個(gè)前端開(kāi)發(fā)人員必須掌握該協(xié)議恨锚；
超文本傳輸協(xié)議
作用：負(fù)責(zé)連接并傳輸http客服端和http服務(wù)器之間的數(shù)據(jù)宇驾。
請(qǐng)求：http客戶(hù)端發(fā)送給http服務(wù)器
響應(yīng)：http服務(wù)器返回給http客戶(hù)端
順序是固定的：先請(qǐng)求 后響應(yīng)
請(qǐng)求和響應(yīng)中的數(shù)據(jù)，統(tǒng)稱(chēng)為報(bào)文猴伶。
事務(wù)：事務(wù)包含[1,無(wú)限大)個(gè)事件课舍，只有當(dāng)包含的所有事件都完成，那么這個(gè)事務(wù)才算完成他挎，否則失敗筝尾。
http協(xié)議是一個(gè)事務(wù)，包含請(qǐng)求和響應(yīng)兩個(gè)事件办桨。當(dāng)請(qǐng)求和響應(yīng)都完成之后筹淫，http才算完成，否則失敗呢撞。
報(bào)文的結(jié)構(gòu)：
請(qǐng)求報(bào)文：
1损姜、起始行（請(qǐng)求行）
作用：標(biāo)識(shí)該請(qǐng)求基本信息
http方法、請(qǐng)求地址殊霞、http版本號(hào)2摧阅、首部(附屬信息)
cookie
user-agent
PC:
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2679.0 Safari/537.36
mobile:
Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.13、主體（存放數(shù)據(jù)）
文件上傳绷蹲、注冊(cè)用戶(hù)
響應(yīng)報(bào)文：
- 1逸尖、起始行（響應(yīng)的基本信息）
http版本號(hào)、服務(wù)器響應(yīng)碼瘸右、狀態(tài)碼描述符 - 2、首部
date
content-length - 3岩齿、主體
xhr.status：服務(wù)器響應(yīng)的狀態(tài)碼
- 1xx http協(xié)議正在初始化
101 切換協(xié)議 websocket - 2xx http客戶(hù)端請(qǐng)求成功
200 成功
202 服務(wù)器接受該請(qǐng)求 - 3xx 重定向和緩存
301 永久移動(dòng)
302 臨時(shí)移動(dòng)
站點(diǎn)或者頁(yè)面之前的跳轉(zhuǎn)太颤，需要設(shè)置Location響應(yīng)首部，來(lái)指定跳轉(zhuǎn)的地址
301會(huì)降低搜索引擎權(quán)重盹沈，而302不會(huì)龄章。
304 請(qǐng)求的靜態(tài)資源未改變（緩存）
需要使用2個(gè)響應(yīng)首部和2請(qǐng)求首部
響應(yīng)首部：
last-modified 標(biāo)識(shí)請(qǐng)求的靜態(tài)資源在服務(wù)器上最后一次修改的時(shí)間（GMT格式）
etag 實(shí)體標(biāo)簽，服務(wù)器會(huì)給每個(gè)靜態(tài)資源打上一個(gè)標(biāo)簽乞封，只要這個(gè)靜態(tài)資源已修改做裙，那么將會(huì)生成一個(gè)新標(biāo)簽。
請(qǐng)求首部：
if-modified-since 該靜態(tài)資源上一次請(qǐng)求時(shí)在服務(wù)器最后一次修改的時(shí)間
if-none-match 該靜態(tài)資源上一次請(qǐng)求時(shí)再服務(wù)器中的實(shí)體標(biāo)簽
強(qiáng)緩存
expire
過(guò)期時(shí)間肃晚，單位是GMT锚贱。過(guò)期時(shí)間沒(méi)有到期之前，一直使用不會(huì)去服務(wù)器請(qǐng)求該資源关串。
缺點(diǎn)：因?yàn)槊看涡ｒ?yàn)該資源有沒(méi)有到期拧廊，都是根據(jù)瀏覽器時(shí)間去校驗(yàn)监徘，而瀏覽器時(shí)間是可以更改的。所以該緩存方案有一定的誤差吧碾。
cache-control：max-age 緩存多少秒 - 4xx http客戶(hù)端請(qǐng)求失敗
400 錯(cuò)誤的請(qǐng)求
缺少參數(shù)凰盔、方案錯(cuò)誤、端口錯(cuò)誤倦春、url長(zhǎng)度過(guò)長(zhǎng)
401 未認(rèn)證
403 禁止訪(fǎng)問(wèn)
404 未找到該資源 - 5xx http服務(wù)器錯(cuò)誤
只要出現(xiàn)5xx的狀態(tài)碼户敬，一定是服務(wù)器的錯(cuò)誤，和前端沒(méi)有任何關(guān)系睁本。
MIME Type
多用途因特網(wǎng)郵件擴(kuò)展
作用：標(biāo)識(shí)請(qǐng)求或響應(yīng)數(shù)據(jù)的格式
MIME Type在http協(xié)議是通過(guò)通用首部Content-Type來(lái)標(biāo)識(shí)尿庐。
html text/html
css text/css
js text/javascript
json application/json
png image/png
jpg image/jpeg
jpeg image/jpeg
gif image/gif
格式：父類(lèi)型/子類(lèi)型
注意事項(xiàng)：當(dāng)內(nèi)容為文本時(shí)，可以通過(guò)content-type來(lái)指定內(nèi)容的編碼格式
返回UTF-8格式的html
content-type: text/html; charset=utf-8
http版本號(hào)之間的區(qū)別：
- http的版本號(hào) 0.9添履、 1.0屁倔、 1.1、 2.0
- 1.1和2.0的區(qū)別
1暮胧、多路復(fù)用
2锐借、首部壓縮
3、服務(wù)器推送
4往衷、數(shù)據(jù)格式從字符串改為數(shù)據(jù)幀
表單提交有一個(gè)專(zhuān)門(mén)的Content-Type application/x-ww-form-urlencoded
