什么是協(xié)議
就是協(xié)定，一式雙份或一式多份，雙方都遵從的一種規(guī)范
你來(lái)問(wèn)---我來(lái)答? 你怎么問(wèn)----我怎么答
互聯(lián)網(wǎng)能夠在全世界快速傳播丙挽，協(xié)議就是非常重要的一個(gè)原因
計(jì)算機(jī)的常見(jiàn)協(xié)議
FTP? HTTP? SMTP? POP3? PPP? TCP/IP
HTT協(xié)議工作流程
簡(jiǎn)稱(chēng)三次握手
常見(jiàn)的web服務(wù)器
nginx? ? ? ? ?請(qǐng)求數(shù)量可以非常大
apache? ? ? 請(qǐng)求數(shù)量較少
tomcat
lls
HTTP的請(qǐng)求與響應(yīng)
請(qǐng)求：
1. 請(qǐng)求行
2. 請(qǐng)求頭信息
3. 請(qǐng)求主體信息
4. 請(qǐng)求頭信息與主體信息之間之間要有一個(gè)空行
GET請(qǐng)求：
POST請(qǐng)求：
請(qǐng)求行：
1.請(qǐng)求方法：
GET POST HEAD DELETE PUT? TRACE OPTIONS
2.請(qǐng)求路徑：請(qǐng)求路徑是url的一部分比如http：//127.0.0.1：8080/server
3.所用的協(xié)議：
HTTP協(xié)議 常用的版本是1.1
請(qǐng)求頭信息：
1.post請(qǐng)求頭要注明請(qǐng)求主體的長(zhǎng)度
????content-length:length
2.服務(wù)器要想能夠解析到post數(shù)據(jù)還需要請(qǐng)求頭包含數(shù)據(jù)類(lèi)型
????content-type：application/x-www-form-urlencoded
????格式為key:value
請(qǐng)求主題：
????使用&拼接在一起的key=value鍵值對(duì)
請(qǐng)求格式
請(qǐng)求行（方法 路徑 協(xié)議）
請(qǐng)求頭信息（格式為key=value）
空行
請(qǐng)求主體（可選）（發(fā)送的內(nèi)容）
例子：
POST /index.php http/1.1
host:localhost
content-type:application/x-www-form-urlencoded
content-length:25
name=zhangsan
響應(yīng)格式
響應(yīng)行（協(xié)議 狀態(tài)碼 狀態(tài)文字）
響應(yīng)頭信息（格式為key=value）
空行
主體信息（也可能沒(méi)有）
例子：
HTTP/1.1 200 OK
content-type:text/html
content-length:25
hello
HTTP狀態(tài)碼
AJAX? GET請(qǐng)求
客戶端的請(qǐng)求
1.創(chuàng)建AJAX
let?xhr??=?new?XMLHttpRequest;
2.發(fā)送方法柳洋，這里是GET方法
xhr.open('GET','http://127.0.0.1:8080/server')
3.發(fā)送數(shù)據(jù)：
xhr.send();
4.監(jiān)聽(tīng)狀態(tài)
xhr.onreadystatechange?=?function(){
????????????if(xhr.readyState?==?4){
????????????????if(xhr.status?>=200?&&?xhr.status<=300){
????????????????????d.innerHTML?=?xhr.response;
????????????????}
????????????}
????????}
服務(wù)端的響應(yīng)
應(yīng)用nodejs來(lái)實(shí)現(xiàn)
1.npm安裝express框架
2.引入express
let?express?=?require('express');
3.創(chuàng)建應(yīng)用對(duì)象
let?app?=?express();
4.創(chuàng)建路由規(guī)則
app.get('/server',(request,response)=>{
????//設(shè)置響應(yīng)頭?設(shè)置允許跨域
????response.setHeader('Access-Control-Allow-origin','*');
????//響應(yīng)體
????response.send('馬程浩')
});
5.監(jiān)聽(tīng)端口啟動(dòng)服務(wù)
app.listen(8080,()=>{
????console.log('在8080端口監(jiān)聽(tīng)')
})
這樣就可以實(shí)現(xiàn)前后端的請(qǐng)求交互了
AJAX? POST請(qǐng)求
客戶端請(qǐng)求
注意：POST請(qǐng)求需要設(shè)置請(qǐng)求頭信息以及請(qǐng)求體信息請(qǐng)求頭可以自定義但是在nodejs中必須設(shè)置
服務(wù)器響應(yīng)
注意：
1.app接受請(qǐng)求在post請(qǐng)求中本來(lái)是app.post但是客戶端發(fā)送的請(qǐng)求中包含其他方式的請(qǐng)求，所以使用app.all進(jìn)行配置统求。
2.response.setHeader('Access-Control-Allow-Headers','*');這段代碼也是用來(lái)配置可以響應(yīng)其他請(qǐng)求的服務(wù)
