柚子快報(bào)邀請(qǐng)碼778899分享：網(wǎng)絡(luò)協(xié)議 網(wǎng)絡(luò) HTTP 協(xié)議
柚子快報(bào)邀請(qǐng)碼778899分享：網(wǎng)絡(luò)協(xié)議 網(wǎng)絡(luò) HTTP 協(xié)議
文章目錄
一、概念二、請(qǐng)求報(bào)文的組成三、HTTP 的請(qǐng)求行四、HTTP 請(qǐng)求頭五、HTTP 的請(qǐng)求體六、響應(yīng)報(bào)文的組成1、響應(yīng)行2、響應(yīng)頭3、空行4、響應(yīng)體
七、創(chuàng)建 HTTP 服務(wù)1、操作步驟2、測(cè)試3、注意事項(xiàng)
八、獲取 HTTP 請(qǐng)求報(bào)文九、設(shè)置 HTTP 響應(yīng)報(bào)文十、網(wǎng)頁(yè)資源的基本加載過(guò)程十一、靜態(tài)資源服務(wù)1、網(wǎng)站根目錄或靜態(tài)資源目錄2、網(wǎng)頁(yè)中的 URL（1）絕對(duì)路徑（2） 相對(duì)路徑（3）網(wǎng)頁(yè)中使用 URL 的場(chǎng)景小結(jié)
3、設(shè)置資源類型（mime類型）4、GET 和 POST 請(qǐng)求場(chǎng)景小結(jié)
十二、GET和POST請(qǐng)求的區(qū)別
一、概念
HTTP（hypertext transport protocol）協(xié)議；中文叫超文本傳輸協(xié)議 是一種基于TCP/IP的應(yīng)用層通信協(xié)議 這個(gè)協(xié)議詳細(xì)規(guī)定了 瀏覽器 和萬(wàn)維網(wǎng) 服務(wù)器 之間互相通信的規(guī)則
協(xié)議中主要規(guī)定了兩個(gè)方面的內(nèi)容
客戶端：用來(lái)向服務(wù)器發(fā)送數(shù)據(jù)，可以被稱之為請(qǐng)求報(bào)文服務(wù)端：向客戶端返回?cái)?shù)據(jù)，可以被稱之為響應(yīng)報(bào)文
報(bào)文：可以簡(jiǎn)單理解為就是一堆字符串
二、請(qǐng)求報(bào)文的組成
請(qǐng)求行請(qǐng)求頭空行請(qǐng)求體
三、HTTP 的請(qǐng)求行
請(qǐng)求方法（get、post、put、delete等）請(qǐng)求 URL（統(tǒng)一資源定位器）
示例：
例如：http://www.baidu.com:80/index.html?a=100&b=200#logo
- http： 協(xié)議（https、ftp、ssh等）
- www.baidu.com 域名
- 80 端口號(hào)
- /index.html 路徑
- a=100&b=200 查詢字符串
- #logo 哈希（錨點(diǎn)鏈接）
HTTP協(xié)議版本號(hào)
四、HTTP 請(qǐng)求頭
格式：『頭名：頭值』 常見的請(qǐng)求頭有：
請(qǐng)求頭解釋Host主機(jī)名Connection連接的設(shè)置 keep-alive（保持連接）；close（關(guān)閉連接）Cache-Control緩存控制 max-age = 0 （沒有緩存）UpgradeInsecureRequests將網(wǎng)頁(yè)中的http請(qǐng)求轉(zhuǎn)化為https請(qǐng)求（很少用）老網(wǎng)站升級(jí)User-Agent用戶代理，客戶端字符串標(biāo)識(shí)，服務(wù)器可以通過(guò)這個(gè)標(biāo)識(shí)來(lái)識(shí)別這個(gè)請(qǐng)求來(lái)自哪個(gè)客戶端 ，一般在PC端和手機(jī)端的區(qū)分Accept設(shè)置瀏覽器接收的數(shù)據(jù)類型Accept-Encoding設(shè)置接收的壓縮方式AcceptLanguage設(shè)置接收的語(yǔ)言 q=0.7 為喜好系數(shù)，滿分為1Cookie后面單獨(dú)講
五、HTTP 的請(qǐng)求體
請(qǐng)求體內(nèi)容的格式是非常靈活的，
（可以是空）==> GET請(qǐng)求（也可以是字符串，還可以是JSON）===> POST請(qǐng)求
例如：
字符串：keywords=手機(jī)&price=2000JSON：{“keywords”:“手機(jī)”,“price”:2000}
六、響應(yīng)報(bào)文的組成
1、響應(yīng)行
HTTP/1.1 200 OK
HTTP/1.1：HTTP協(xié)議版本號(hào)200：響應(yīng)狀態(tài)碼 參考：響應(yīng)狀態(tài)碼OK：響應(yīng)狀態(tài)描述
響應(yīng)狀態(tài)碼和響應(yīng)字符串關(guān)系是一一對(duì)應(yīng)的。
2、響應(yīng)頭
Cache-Control:緩存控制 private 私有的，只允許客戶端緩存數(shù)據(jù)
Connection 鏈接設(shè)置
Content-Type:text/html;charset=utf-8 設(shè)置響應(yīng)體的數(shù)據(jù)類型以及字符集,響應(yīng)體為html，字符集
utf-8
Content-Length:響應(yīng)體的長(zhǎng)度，單位為字節(jié)
3、空行
4、響應(yīng)體
響應(yīng)體內(nèi)容的類型是非常靈活的，常見的類型有 HTML、CSS、JS、圖片、JSON
七、創(chuàng)建 HTTP 服務(wù)
使用 nodejs 創(chuàng)建 HTTP 服務(wù)
1、操作步驟
//1. 導(dǎo)入 http 模塊
const http = require('http');
//2. 創(chuàng)建服務(wù)對(duì)象 create 創(chuàng)建 server 服務(wù)
// request 意為請(qǐng)求. 是對(duì)請(qǐng)求報(bào)文的封裝對(duì)象, 通過(guò) request 對(duì)象可以獲得請(qǐng)求報(bào)文的數(shù)據(jù)
// response 意為響應(yīng). 是對(duì)響應(yīng)報(bào)文的封裝對(duì)象, 通過(guò) response 對(duì)象可以設(shè)置響應(yīng)報(bào)文
const server = http.createServer((request, response) => {
response.end('Hello HTTP server');
});
//3. 監(jiān)聽端口, 啟動(dòng)服務(wù)
server.listen(9000, () => {
console.log('服務(wù)已經(jīng)啟動(dòng), 端口 9000 監(jiān)聽中...');
});
http.createServer 里的回調(diào)函數(shù)的執(zhí)行時(shí)機(jī)： 當(dāng)接收到 HTTP 請(qǐng)求的時(shí)候，就會(huì)執(zhí)行
2、測(cè)試
瀏覽器請(qǐng)求對(duì)應(yīng)端口
http://127.0.0.1:9000
3、注意事項(xiàng)
（1） 命令行 ctrl + c 停止服務(wù) （2）當(dāng)服務(wù)啟動(dòng)后，更新代碼 必須重啟服務(wù)才能生效 （3）響應(yīng)內(nèi)容中文亂碼的解決辦法
response.setHeader('content-type','text/html;charset=utf-8');
（4）端口號(hào)被占用
Error: listen EADDRINUSE: address already in use :::9000
關(guān)閉當(dāng)前正在運(yùn)行監(jiān)聽端口的服務(wù) （ 使用較多 ） 修改其他端口號(hào)
（5）HTTP 協(xié)議默認(rèn)端口是 80 。HTTPS 協(xié)議的默認(rèn)端口是 443, HTTP 服務(wù)開發(fā)常用端口有 3000，8080，8090，9000 等
如果端口被其他程序占用，可以使用 資源監(jiān)視器 找到占用端口的程序，然后使用 任務(wù)管理器 關(guān)閉 對(duì)應(yīng)的程序
八、獲取 HTTP 請(qǐng)求報(bào)文
想要獲取請(qǐng)求的數(shù)據(jù)，需要通過(guò) request 對(duì)象
含義語(yǔ)法重點(diǎn)掌握請(qǐng)求方法request.method*請(qǐng)求版本request.httpVersion請(qǐng)求路徑request.url*URL 路徑require(‘url’).parse(request.url).pathname*URL 查詢字符串require(‘url’).parse(request.url, true).query*請(qǐng)求頭request.headers*請(qǐng)求體request.on(‘data’, function(chunk){}) request.on(‘end’, function(){})
注意事項(xiàng)：
request.url 只能獲取路徑以及查詢字符串，無(wú)法獲取 URL 中的域名以及協(xié)議的內(nèi)容request.headers 將請(qǐng)求信息轉(zhuǎn)化成一個(gè)對(duì)象，并將屬性名都轉(zhuǎn)化成了『小寫』關(guān)于路徑：如果訪問(wèn)網(wǎng)站的時(shí)候，只填寫了 IP 地址或者是域名信息，此時(shí)請(qǐng)求的路徑為『 / 』關(guān)于 favicon.ico：這個(gè)請(qǐng)求是屬于瀏覽器自動(dòng)發(fā)送的請(qǐng)求
示例代碼：
提取http的報(bào)文
// 1.導(dǎo)入http模塊
const http = require('http')
// 2.創(chuàng)建服務(wù)
const server = http.createServer((req, res) => {
// 獲取請(qǐng)求的方法
console.log(req.method);
// 獲取請(qǐng)求的 url
console.log(req.url); // 只包含 url 中的路徑與查詢字符串
// 獲取 http 協(xié)議的版本號(hào)
console.log(req.httpVersion);
// 獲取 http 的請(qǐng)求頭
console.log(req.headers);
res.setHeader('content-type', 'text/html;charset=utf-8');
res.end('你好')
})
// 3.監(jiān)聽端口 啟動(dòng)服務(wù)
server.listen(9000, () => {
console.log('服務(wù)已啟動(dòng)...');
})
提取http報(bào)文的請(qǐng)求體
// 1.導(dǎo)入http模塊
const http = require('http')
// 2.創(chuàng)建服務(wù)
const server = http.createServer((req, res) => {
// 1、聲明一個(gè)變量
let body = ''
// 2、綁定事件
req.on('data', chunk => {
body += chunk
})
// 3、綁定end事件
req.on('end', () => {
console.log(body);
res.end('hello')
})
})
// 3.監(jiān)聽端口 啟動(dòng)服務(wù)
server.listen(9000, () => {
console.log('服務(wù)已啟動(dòng)...');
})
請(qǐng)求練習(xí)
//1、引入http模塊
const http = require("http");
//2、建立服務(wù)
const server = http.createServer((request,response)=>{
let {url,method} = request; //對(duì)象的解構(gòu)賦值
//設(shè)置響應(yīng)頭信息
//解決中文亂碼
response.setHeader("Content-Type","text/html;charset=utf-8")
if(url == "/register" && method == "GET"){
response.end("注冊(cè)頁(yè)面");
}else if(url=="/login" && method == "GET"){
response.end("登錄頁(yè)面");
}else{
response.end("
404 Not Found
")}
})
//3、監(jiān)聽端口
server.listen(8000,()=>{
console.log('服務(wù)啟動(dòng)中....');
})
九、設(shè)置 HTTP 響應(yīng)報(bào)文
作用語(yǔ)法設(shè)置響應(yīng)狀態(tài)碼response.statusCode設(shè)置響應(yīng)狀態(tài)描述response.statusMessage （ 用的非常少 ）設(shè)置響應(yīng)頭信息response.setHeader(‘頭名’, ‘頭值’)設(shè)置響應(yīng)體response.write(‘xx’) response.end(‘xxx’)
示例代碼
write 和 end 的兩種使用情況：
//1. write 和 end 的結(jié)合使用 響應(yīng)體相對(duì)分散
response.write('xx');
response.write('xx');
response.write('xx');
response.end(); //每一個(gè)請(qǐng)求，在處理的時(shí)候必須要執(zhí)行 end 方法的
//2. 單獨(dú)使用 end 方法 響應(yīng)體相對(duì)集中
response.end('xxx');
示例代碼：
http設(shè)置響應(yīng)
const http = require('http');
const server = http.createServer((req, res) => {
// 1、設(shè)置響應(yīng)狀態(tài)碼 后面的碼會(huì)覆蓋前面的
// res.statusCode = 200
// res.statusCode = 404
// 2、設(shè)置響應(yīng)狀態(tài)描述
// res.statusMessage = 'xxx';
// 3、設(shè)置響應(yīng)頭
// res.setHeader('content-type', 'text/html;charset=utf-8');
// res.setHeader('Server', 'Node.js');
// res.setHeader('myHeader', 'test test test');
// 4、設(shè)置響應(yīng)體 寫了write之后，end內(nèi)部不傳參
// res.write('love')
// res.write('love')
// res.write('love')
// res.write('love')
// res.write('love')
// 5、end 多個(gè)不行，少了也不行
res.end('Welcome')
})
server.listen(9000, () => {
console.log('服務(wù)已啟動(dòng)... 端口 9000 監(jiān)聽中...');
})
響應(yīng)練習(xí) 搭建 HTTP 服務(wù)，響應(yīng)一個(gè) 4 行 3 列的表格，并且要求表格有 隔行換色效果 ，且 點(diǎn)擊 單元格能 高亮顯示
const http = require('http');
const server = http.createServer((req, res) => {
res.end(
`
`
)
})
server.listen(9000, () => {
console.log('服務(wù)已啟動(dòng)... 端口 9000 監(jiān)聽中...');
})
響應(yīng)練習(xí)-優(yōu)化
服務(wù)文件
const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer((req, res) => {
let html = fs.readFileSync(path.resolve(__dirname, './table.html'))
res.end(html)
})
server.listen(9000, () => {
console.log('服務(wù)已啟動(dòng)... 端口 9000 監(jiān)聽中...');
})
table.html
十、網(wǎng)頁(yè)資源的基本加載過(guò)程
網(wǎng)頁(yè)資源的加載都是循序漸進(jìn)的，首先獲取 HTML 的內(nèi)容， 然后解析 HTML 在發(fā)送其他資源的請(qǐng)求，如CSS，Javascript，圖片等。 理解了這個(gè)內(nèi)容對(duì)于后續(xù)的學(xué)習(xí)與成長(zhǎng)有非常大的幫助
十一、靜態(tài)資源服務(wù)
靜態(tài)資源是指 內(nèi)容長(zhǎng)時(shí)間不發(fā)生改變的資源 ，例如圖片，視頻，CSS 文件，JS文件，HTML文件，字體文件等動(dòng)態(tài)資源是指 內(nèi)容經(jīng)常更新的資源 ，例如百度首頁(yè)，網(wǎng)易首頁(yè)，京東搜索列表頁(yè)面等
1、網(wǎng)站根目錄或靜態(tài)資源目錄
HTTP 服務(wù)在哪個(gè)文件夾中尋找靜態(tài)資源，那個(gè)文件夾就是 靜態(tài)資源目錄 ，也稱之為 網(wǎng)站根目錄
2、網(wǎng)頁(yè)中的 URL
網(wǎng)頁(yè)中的 URL 主要分為兩大類：相對(duì)路徑與絕對(duì)路徑
（1）絕對(duì)路徑
絕對(duì)路徑可靠性強(qiáng)，而且相對(duì)容易理解，在項(xiàng)目中運(yùn)用較多
形式特點(diǎn)http://ajiaming.com/web直接向目標(biāo)資源發(fā)送請(qǐng)求，容易理解。網(wǎng)站的外鏈會(huì)用到此形式//ajiaming.com/web與頁(yè)面 URL 的協(xié)議拼接形成完整 URL 再發(fā)送請(qǐng)求。大型網(wǎng)站用的比較多/web與頁(yè)面 URL 的協(xié)議、主機(jī)名、端口拼接形成完整 URL 再發(fā)送請(qǐng)求。中小型網(wǎng)站
（2） 相對(duì)路徑
相對(duì)路徑在發(fā)送請(qǐng)求時(shí)，需要與當(dāng)前頁(yè)面 URL 路徑進(jìn)行 計(jì)算 ，得到完整 URL 后，再發(fā)送請(qǐng)求，學(xué)習(xí)階段用的較多 例如當(dāng)前網(wǎng)頁(yè) url 為 http://www.ajiaming.com/course/h5.html
形式最終的 URL./css/app.csshttp://www.ajiaming.com/course/css/app.cssjs/app.jshttp://www.ajiaming.com/course/js/app.js../img/logo.pnghttp://www.ajiaming.com/img/logo.png../../mp4/show.mp4http://www.ajiaming.com/mp4/show.mp4
（3）網(wǎng)頁(yè)中使用 URL 的場(chǎng)景小結(jié)
包括但不限于如下場(chǎng)景：
a 標(biāo)簽 hreflink 標(biāo)簽 hrefscript 標(biāo)簽 srcimg 標(biāo)簽 srcvideo audio 標(biāo)簽 srcform 中的 actionAJAX 請(qǐng)求中的 URL
3、設(shè)置資源類型（mime類型）
媒體類型（通常稱為 Multipurpose Internet Mail Extensions 或 MIME 類型 ）是一種標(biāo)準(zhǔn)，用來(lái)表示文檔、文件或字節(jié)流的性質(zhì)和格式。
mime 類型結(jié)構(gòu)： [type]/[subType] 例如： text/html text/css image/jpeg image/png application/json
HTTP 服務(wù)可以設(shè)置響應(yīng)頭 Content-Type 來(lái)表明響應(yīng)體的 MIME 類型，瀏覽器會(huì)根據(jù)該類型決定如何處理資源
下面是常見文件對(duì)應(yīng)的 mime 類型
html: 'text/html',
css: 'text/css',
js: 'text/javascript',
png: 'image/png',
jpg: 'image/jpeg',
gif: 'image/gif',
mp4: 'video/mp4',
mp3: 'audio/mpeg',
json: 'application/json'
對(duì)于未知的資源類型，可以選擇 application/octet-stream 類型，瀏覽器在遇到該類型的響應(yīng) 時(shí)，會(huì)對(duì)響應(yīng)體內(nèi)容進(jìn)行獨(dú)立存儲(chǔ)，也就是我們常見的 下載 效果
require('http').createServer((request, response) => {
//獲取請(qǐng)求的方法已經(jīng)路徑
let { url, method } = request;
//判斷請(qǐng)求方式以及請(qǐng)求路徑
if (method == "GET" && url == "/index.html") {
//需要響應(yīng)文件中的內(nèi)容
let data = require('fs').readFileSync(__dirname + '/index.html');
response.end(data);
} else if (method == "GET" && url == "/css/app.css") {
//需要響應(yīng)文件中的內(nèi)容
let data = require('fs').readFileSync(__dirname + '/public/css/app.css');
response.end(data);
} else if (method == "GET" && url == "/js/app.js") {
//需要響應(yīng)文件中的內(nèi)容
let data = require('fs').readFileSync(__dirname + '/public/js/app.js');
response.end(data);
}
else {
//404響應(yīng)
response.statusCode = 404;
response.end("
404 Not Found
");}
}).listen(80, () => {
console.log('80端口正在啟動(dòng)中....');
})
很明顯上面的代碼，當(dāng)只要有一個(gè)請(qǐng)求路徑就需要進(jìn)行判斷，顯然這種方式不夠完美，那么我們需要封裝
require('http').createServer((request, response) => {
//獲取請(qǐng)求的方法已經(jīng)路徑
let { url, method } = request;
//文件夾路徑
let rootDir = __dirname + '/public';
//拼接文件路徑
let filePath = rootDir + url;
//讀取文件內(nèi)容
fs.readFile(filePath, (err, data) => {
//判斷
if (err) {
//如果出現(xiàn)錯(cuò)誤，響應(yīng)404狀態(tài)碼
response.statusCode = 404;
response.end('
404 Not Found
');} else {
//響應(yīng)文件內(nèi)容
response.end(data);
}
})
}).listen(80, () => {
console.log('80端口正在啟動(dòng)中....');
})
4、GET 和 POST 請(qǐng)求場(chǎng)景小結(jié)
GET 請(qǐng)求的情況：
在地址欄直接輸入 url 訪問(wèn)點(diǎn)擊 a 鏈接link 標(biāo)簽引入 cssscript 標(biāo)簽引入 jsimg 標(biāo)簽引入圖片form 標(biāo)簽中的 method 為 get （不區(qū)分大小寫）ajax 中的 get 請(qǐng)求
POST 請(qǐng)求的情況：
form 標(biāo)簽中的 method 為 post（不區(qū)分大小寫）AJAX 的 post 請(qǐng)求
十二、GET和POST請(qǐng)求的區(qū)別
GET 和 POST 是 HTTP 協(xié)議請(qǐng)求的兩種方式。
GET 主要用來(lái)獲取數(shù)據(jù)，POST 主要用來(lái)提交數(shù)據(jù)GET 帶參數(shù)請(qǐng)求是將參數(shù)綴到 URL 之后，在地址欄中輸入 url 訪問(wèn)網(wǎng)站就是 GET 請(qǐng)求，POST 帶參數(shù)請(qǐng)求是將參數(shù)放到請(qǐng)求體中POST 請(qǐng)求相對(duì) GET 安全一些，因?yàn)樵跒g覽器中參數(shù)會(huì)暴露在地址欄GET 請(qǐng)求大小有限制，一般為 2K，而 POST 請(qǐng)求則沒有大小限制
柚子快報(bào)邀請(qǐng)碼778899分享：網(wǎng)絡(luò)協(xié)議 網(wǎng)絡(luò) HTTP 協(xié)議
精彩內(nèi)容
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Scoopon優(yōu)惠集
