當瀏覽器輸入網址后

瀏覽器首先向DNS域名解析服務器發送請求。

DNS反解析：根據瀏覽器請求地址中的域名，到DNS服務器中找到對應的服務器外網IP地址

通過找到外網IP，向對應的服務器發請求（首先訪問服務器的WEB站點管理工具：準確來說是我們先基于工具在服務器上創建很多服務，當有客戶端訪問的時候，服務器會匹配出具體請求那個服務）

通過url地址中的端口號，找到服務器上對應的服務，以及服務管理的項目資源文件

服務端根據請求的地址名稱或問號傳參或者哈希值，把客戶端要的內容進行準備和處理

把準備的內容響應給客戶端（如果請求的是HTML文件或者css等這樣的資源文件，服務器返回的是資源文件中的源代碼【不是文件本身】）

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

• 首先DOM結構，生成DOM TREE
• 自上而下運行代碼，加載css等資源內容
• 根據css生成帶樣式的 RENDER TREE
• 開始渲染和繪制

客戶端請求

打開請求：發送請求之前的一些配置

HTTP METHOD 請求方式

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

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

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

常用的POST && GET請求方式

傳遞服務器的方式不一樣 GET是URL問號傳參的方式把信息傳到服務器，POST是基于 請求主題把信息傳到服務器。

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

區別：

GET一般應用于（向服務器傳遞的少一些），而POST是傳給服務器的多一些，如果POST是基于問號傳參方式的話會出現一些問題：URL會拼接很長，瀏覽器對于URL的長度有最大限度（谷歌8Kb 火狐7KB IE2KB ...）超過的部分瀏覽器就把他截掉了，所以POST都是使用請求主題傳參的，請求主體是沒有限制的，項目中會做大小限制，以防請求發送數據過大會遲遲完不成。

GET不安全，POST相對安全 因為GET是基于問號傳參把信息傳遞給服務器的，容易被駭客進行URL劫持，POST是基于請求主題傳遞的，相對來說不容易被劫持，所以登陸注冊等安全性操作，應該用POST請求

GET會產生不可控的緩存，POST不會 不可控：是瀏覽器自主記憶的緩存，我們無法基于js控制，項目中我們會把這個緩存干掉， GET緩存產出是因為向某個頁面請求多次，瀏覽器會把之前的數據從緩存中拿到返回，導致拿不到新的數據（post不會）

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

關于XMLHttpRequest常用內置方法

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

實現簡易的AJAX庫

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

轉載于:https://juejin.im/post/5c8ce423518825431116c76b

總結

以上是生活随笔為你收集整理的http请求概述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。