http請求概述

白木_洋發表於2019-03-18
HTTP

當瀏覽器輸入網址後

  1. 瀏覽器首先向DNS域名解析伺服器傳送請求。
  2. DNS反解析：根據瀏覽器請求地址中的域名，到DNS伺服器中找到對應的伺服器外網IP地址
  3. 通過找到外網IP，向對應的伺服器發請求（首先訪問伺服器的WEB站點管理工具：準確來說是我們先基於工具在伺服器上建立很多服務，當有客戶端訪問的時候，伺服器會匹配出具體請求那個服務）
  4. 通過url地址中的埠號，找到伺服器上對應的服務，以及服務管理的專案資原始檔
  5. 服務端根據請求的地址名稱或問號傳參或者雜湊值，把客戶端要的內容進行準備和處理
  6. 把準備的內容響應給客戶端（如果請求的是HTML檔案或者css等這樣的資原始檔，伺服器返回的是資原始檔中的原始碼【不是檔案本身】）
  7. 客戶端瀏覽器接收到伺服器返回的原始碼，基於自己內部的渲染引擎（核心）開始進行頁面繪製和渲染
  • 首先DOM結構，生成DOM TREE
  • 自上而下執行程式碼，載入css等資源內容
  • 根據css生成帶樣式的 RENDER TREE
  • 開始渲染和繪製

客戶端請求

開啟請求：傳送請求之前的一些配置

  1. HTTP METHOD 請求方式
  • POST：向服務端推送資料（傳向服務端傳送的多，向服務端獲取的少）
  • GET： 向服務端推送資料（傳向服務端傳送的少，向服務端獲取的多）
  • PUT： 像服務端存放一些內容（一般是存放檔案）
  • DELETE： 刪除服務端的的某些內容（一般是刪除一些檔案）
  • HEAD： 只想獲取響應頭資訊，不要響應主體的內容
  • OPTIONS && TRACE： 一般使用它向伺服器傳送一個探測性請求，如果伺服器端返回資訊了，說明客戶端和伺服器端建立了連線，我們可以繼續執行其它請求了（TRACE就是幹這件事的，但是axios這個AJAX類庫在基於cross domain進行跨域請求的時候，就是先傳送OPTIONS請求進行探測嘗試，如果能連通伺服器，才會傳送其他請求）
  • CONNECT： 使用TCP直接去連線 的，所以不適合在網頁開發中使用
  1. 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---');
複製程式碼

區別：

  1. GET一般應用於（向伺服器傳遞的少一些），而POST是傳給伺服器的多一些，如果POST是基於問號傳參方式的話會出現一些問題：URL會拼接很長，瀏覽器對於URL的長度有最大限度（谷歌8Kb 火狐7KB IE2KB ...）超過的部分瀏覽器就把他截掉了，所以POST都是使用請求主題傳參的，請求主體是沒有限制的，專案中會做大小限制，以防請求傳送資料過大會遲遲完不成。
  2. GET不安全，POST相對安全 因為GET是基於問號傳參把資訊傳遞給伺服器的，容易被駭客進行URL劫持，POST是基於請求主題傳遞的，相對來說不容易被劫持，所以登陸註冊等安全性操作，應該用POST請求
  3. 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方式傳參?號後面url
    function formatParams(data) {
        var arr = [];
        for (var item in data) {
            arr.push(item + "=" + data[item]);
        }
        arr.push(("v=" + Math.random()).replace("."));
        return arr.join("&");
    }
複製程式碼

相關文章