當(dāng)瀏覽器輸入網(wǎng)址后

瀏覽器首先向DNS域名解析服務(wù)器發(fā)送請(qǐng)求。

DNS反解析：根據(jù)瀏覽器請(qǐng)求地址中的域名，到DNS服務(wù)器中找到對(duì)應(yīng)的服務(wù)器外網(wǎng)IP地址

通過(guò)找到外網(wǎng)IP，向?qū)?yīng)的服務(wù)器發(fā)請(qǐng)求（首先訪問(wèn)服務(wù)器的WEB站點(diǎn)管理工具：準(zhǔn)確來(lái)說(shuō)是我們先基于工具在服務(wù)器上創(chuàng)建很多服務(wù)，當(dāng)有客戶端訪問(wèn)的時(shí)候，服務(wù)器會(huì)匹配出具體請(qǐng)求那個(gè)服務(wù)）

通過(guò)url地址中的端口號(hào)，找到服務(wù)器上對(duì)應(yīng)的服務(wù)，以及服務(wù)管理的項(xiàng)目資源文件

服務(wù)端根據(jù)請(qǐng)求的地址名稱或問(wèn)號(hào)傳參或者哈希值，把客戶端要的內(nèi)容進(jìn)行準(zhǔn)備和處理

把準(zhǔn)備的內(nèi)容響應(yīng)給客戶端（如果請(qǐng)求的是HTML文件或者css等這樣的資源文件，服務(wù)器返回的是資源文件中的源代碼【不是文件本身】）

客戶端瀏覽器接收到服務(wù)器返回的源代碼，基于自己內(nèi)部的渲染引擎（內(nèi)核）開始進(jìn)行頁(yè)面繪制和渲染

• 首先DOM結(jié)構(gòu)，生成DOM TREE
• 自上而下運(yùn)行代碼，加載css等資源內(nèi)容
• 根據(jù)css生成帶樣式的 RENDER TREE
• 開始渲染和繪制

客戶端請(qǐng)求

打開請(qǐng)求：發(fā)送請(qǐng)求之前的一些配置

HTTP METHOD 請(qǐng)求方式

• POST：向服務(wù)端推送數(shù)據(jù)（傳向服務(wù)端發(fā)送的多，向服務(wù)端獲取的少）
• GET： 向服務(wù)端推送數(shù)據(jù)（傳向服務(wù)端發(fā)送的少，向服務(wù)端獲取的多）
• PUT： 像服務(wù)端存放一些內(nèi)容（一般是存放文件）
• DELETE： 刪除服務(wù)端的的某些內(nèi)容（一般是刪除一些文件）
• HEAD： 只想獲取響應(yīng)頭信息，不要響應(yīng)主體的內(nèi)容
• OPTIONS && TRACE： 一般使用它向服務(wù)器發(fā)送一個(gè)探測(cè)性請(qǐng)求，如果服務(wù)器端返回信息了，說(shuō)明客戶端和服務(wù)器端建立了連接，我們可以繼續(xù)執(zhí)行其它請(qǐng)求了（TRACE就是干這件事的，但是axios這個(gè)AJAX類庫(kù)在基于cross domain進(jìn)行跨域請(qǐng)求的時(shí)候，就是先發(fā)送OPTIONS請(qǐng)求進(jìn)行探測(cè)嘗試，如果能連通服務(wù)器，才會(huì)發(fā)送其他請(qǐng)求）
• CONNECT： 使用TCP直接去連接 的，所以不適合在網(wǎng)頁(yè)開發(fā)中使用

URL 向服務(wù)器端發(fā)送請(qǐng)求API（Application Programming Interface）接口地址 3.ASYNC設(shè)置AJAX同步或者異步，默認(rèn)是異步（寫TRUE也是異步），FALSE是同步，項(xiàng)目中都是用異步編程，防止阻塞后影響后部代碼執(zhí)行 4.USER-NAME/USER-PASS: 用戶名和密碼一般不設(shè)置

// 創(chuàng)建AJAX實(shí)例：IE6是不兼容的，使用new ActiveXObject來(lái)實(shí)現(xiàn)的let xhr = new XMLHttpRequest();// 打開請(qǐng)求：發(fā)送請(qǐng)求之前的一些配置項(xiàng)xhr.open([HTTP METHOD], [URL], [USER-NAME], [USER-PASS])// 事件監(jiān)聽：一般監(jiān)聽的都是 READY-STATE-CHANGE 事件（AJAX狀態(tài)改變事件），基于這個(gè)事件可以獲取服務(wù)器返回的響應(yīng)頭和響應(yīng)主題內(nèi)容xhr.onreadystatechange=()=>{if(xhr.readyState === 4 && xhr.status === 200) {xhr.responseText;}}// 發(fā)送AJAX請(qǐng)求：從這步開始，當(dāng)前AJAX任務(wù)開始，如果是同步的，后面代碼會(huì)等待請(qǐng)求成功后執(zhí)行，反之不會(huì)xhr.send([請(qǐng)求主體內(nèi)容]) 復(fù)制代碼

常用的POST && GET請(qǐng)求方式

傳遞服務(wù)器的方式不一樣 GET是URL問(wèn)號(hào)傳參的方式把信息傳到服務(wù)器，POST是基于 請(qǐng)求主題把信息傳到服務(wù)器。

[GET]xhr.open('GET', '/status/list?id=100&name=zhangsan');[POSt]xhr.send('---URL---'); 復(fù)制代碼

區(qū)別：

GET一般應(yīng)用于（向服務(wù)器傳遞的少一些），而POST是傳給服務(wù)器的多一些，如果POST是基于問(wèn)號(hào)傳參方式的話會(huì)出現(xiàn)一些問(wèn)題：URL會(huì)拼接很長(zhǎng)，瀏覽器對(duì)于URL的長(zhǎng)度有最大限度（谷歌8Kb 火狐7KB IE2KB ...）超過(guò)的部分瀏覽器就把他截掉了，所以POST都是使用請(qǐng)求主題傳參的，請(qǐng)求主體是沒(méi)有限制的，項(xiàng)目中會(huì)做大小限制，以防請(qǐng)求發(fā)送數(shù)據(jù)過(guò)大會(huì)遲遲完不成。

GET不安全，POST相對(duì)安全 因?yàn)镚ET是基于問(wèn)號(hào)傳參把信息傳遞給服務(wù)器的，容易被駭客進(jìn)行URL劫持，POST是基于請(qǐng)求主題傳遞的，相對(duì)來(lái)說(shuō)不容易被劫持，所以登陸注冊(cè)等安全性操作，應(yīng)該用POST請(qǐng)求

GET會(huì)產(chǎn)生不可控的緩存，POST不會(huì) 不可控：是瀏覽器自主記憶的緩存，我們無(wú)法基于js控制，項(xiàng)目中我們會(huì)把這個(gè)緩存干掉， GET緩存產(chǎn)出是因?yàn)橄蚰硞€(gè)頁(yè)面請(qǐng)求多次，瀏覽器會(huì)把之前的數(shù)據(jù)從緩存中拿到返回，導(dǎo)致拿不到新的數(shù)據(jù)（post不會(huì)）

// GET請(qǐng)求處理緩存的方案：在URL后面添加一個(gè)隨即小數(shù)每次會(huì)獲得新數(shù)據(jù)xhr.open('GET', `/status/list?id=100&name=zhangsan&_=${Math.random()}`); 復(fù)制代碼

關(guān)于XMLHttpRequest常用內(nèi)置方法

var xhr = XMLHttpRequest() (ie6以下是new ActiveXObject('Microsoft.XMLHTTP')) xhr.response 響應(yīng)主題 xhr.responseText 響應(yīng)主題內(nèi)容（JSON或者XML格式字符串都可以） xhr.responseXML 響應(yīng)主體內(nèi)容是XML文檔 xhr.status 返回HTTP狀態(tài)碼 xhr.statusText 狀態(tài)碼描述 xhr.timeout 設(shè)置請(qǐng)求超時(shí)的時(shí)間 xhr.withCredentials 是否允許跨域 （FALSE） xhr.abort() 強(qiáng)制中斷AJAX請(qǐng)求 xhr.getAllResponseHeaders() 獲取所有響應(yīng)頭信息

實(shí)現(xiàn)簡(jiǎn)易的AJAX庫(kù)

ajax({url: "", //請(qǐng)求地址type: "POST",//請(qǐng)求方式data: { name: "super", age: 20 },//請(qǐng)求參數(shù)dataType: "json",success: function (response, xml) {// 此處放成功后執(zhí)行的代碼},error: function (status) {// 此處放失敗后執(zhí)行的代碼}});function ajax(option) {options = options || {};options.type = (options.type || "GET").toUpperCase();options.dataType = options.dataType || "json";var params = formatParams(options.data);var xhr;//創(chuàng)建 - 第一步if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else if(window.ActiveObject) { //IE6及以下xhr = new ActiveXObject('Microsoft.XMLHTTP');}//連接 和 發(fā)送 - 第二步if (options.type == "GET") {xhr.open("GET", options.url + "?" + params, true);xhr.send(null);} else if (options.type == "POST") {xhr.open("POST", options.url, true);//設(shè)置表單提交時(shí)的內(nèi)容類型xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send(params);}//接收 - 第三步// xhr.status狀態(tài)碼// 200 OK成功（只能證明服務(wù)器返回信息了，但是信息不一定是業(yè)務(wù)所需要的）// 301 Moved Permanently 永久轉(zhuǎn)移（永久重定向：域名更改，訪問(wèn)原始域名重定向到新的域名）// 302 Move temporarily 臨時(shí)轉(zhuǎn)移（臨時(shí)重定項(xiàng)：307：網(wǎng)站現(xiàn)在是基于HTTPS協(xié)議運(yùn)作的，如果訪問(wèn)的是HTTP協(xié)議，會(huì)基于307重定向到HTTPS協(xié)議上）// 302一般用作服務(wù)器負(fù)載均衡：當(dāng)一臺(tái)服務(wù)器達(dá)到最大并發(fā)數(shù)的時(shí)候，會(huì)把后續(xù)訪問(wèn)的用戶臨時(shí)轉(zhuǎn)移到其他服務(wù)器機(jī)組上處理// 偶爾真實(shí)項(xiàng)目中會(huì)把所用的圖片單獨(dú)放到服務(wù)器上“圖片處理服務(wù)器”，這樣減少主服務(wù)器的壓力，當(dāng)用戶向主服務(wù)器訪問(wèn)圖片的時(shí)候，主服務(wù)器都把它轉(zhuǎn)移到圖片服務(wù)器上處理// 304 Not Modified設(shè)置緩存：對(duì)于不經(jīng)常更新的文件，例如：css/js/html/img等，服務(wù)器會(huì)結(jié)合客戶端設(shè)置304緩存，第一次加載的資源會(huì)緩存到客戶端了，下次在獲取的時(shí)候，會(huì)從緩存中加獲取，如果更新了，服務(wù)端會(huì)通過(guò)最后修改時(shí)間來(lái)強(qiáng)制讓客戶端從服務(wù)器從新拉取，基于Ctrl+F5強(qiáng)制刷新頁(yè)面，304的緩存就沒(méi)有用了。// 400 Bad Request 請(qǐng)求參數(shù)錯(cuò)誤// 401 Unauthorized 無(wú)權(quán)限訪問(wèn)// 404 NOt Found 找不到資源（地址不存在）// 413 Request Entity Too Large 和服務(wù)器交互的內(nèi)容資源超過(guò)服務(wù)器最大限制xhr.onreadystatechange = function () {if (xhr.readyState == 4) {var status = xhr.status;if (status >= 200 && status < 300 || status == 304) {options.success && options.success(xhr.responseText, xhr.responseXML);} else {options.error && options.error(status);}}}}// 拼接get方式傳參?號(hào)后面urlfunction formatParams(data) {var arr = [];for (var item in data) {arr.push(item + "=" + data[item]);}arr.push(("v=" + Math.random()).replace("."));return arr.join("&");} 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5c8ce423518825431116c76b

總結(jié)

以上是生活随笔為你收集整理的http请求概述的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。