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直接去鏈接 的，因此不適合在網頁開發中使用

2. 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("&");
    }
複製代碼