前端一面基礎知識 ⑤——Http、Ajax、跨域（看圖輕鬆掌握HTTP面試相關知識）_EvenyYlzz

前言

根據慕課網的《快速搞定前端技術一面匹配大廠面試要求》課程所整理的題目，陸續更新。如果你覺得本文相關知識點你已經掌握，你可以檢視我之前的相關文章哦

常考面試題

1.Http常見的狀態碼有哪些

Http狀態碼分類

1xx 伺服器收到請求
2xx 請求成功
3xx 重定向
4xx 客戶端錯誤
5xx 服務端錯誤

「常見狀態碼」

200 請求處理成功
204 請求處理成功
301 永久性重定向
302 臨時性重定向
303 臨時性重定向，並明確表示客戶端要用GET方法請求資源
304 資源已找到，但客戶端快取資源未過期，仍可使用
400 請求報文中存在語法錯誤
401（總共返回兩次） ①需要認證（彈出認證視窗）②認證失敗
403 沒有許可權，拒絕訪問
404 無法找到請求的資源（①網址錯了 ②伺服器拒絕請求，不說明理由）
500 伺服器內部資源錯誤
503 伺服器超載，停機維護

2.Http常見的header有哪些

2.1 Request Headers

①Accept 瀏覽器可接收的資料樣式
②Accept-Encoding 瀏覽器可接收的壓縮演算法，如gzip
③Accept-Language 瀏覽器可接收的語言，如zh-CN
④Connection：keep-alive 一次TCP連結重複使用
⑤Cookie 是用於管理服務端和客戶端直接的狀態，其本質上就是一堆儲存在客戶端的資料
⑥Host 用來實現虛擬主機技術
⑦User-Agent 簡稱UA，瀏覽器資訊
⑧Content-type 傳送資料的格式，如application/json

2.2 Response Headers

①Content-type 返回資料的格式
②Content-length 返回資料的大小，例如多少位元組
③Content-Encoding 返回資料的壓縮演算法，如gzip
④Set-Cookie 伺服器端向客戶端傳送 cookie
⑤Cache-control 指定快取機制、快取邏輯
⑥Expires 控制快取失效的日期（也控制快取過期，但已經被cache-control替代）
⑦Last-Modified 在伺服器端最後被修改的時間
⑧Eatg 是一個可以與Web資源關聯的記號（ETag沒改變，則返回狀態304然後不返回，這也和Last-Modified一樣。測試Etag主要在斷點下載時比較有用）

2.3 快取相關的Headers

①Cache-control
②Expires
③Last-Modified
④If-Modified-Since 從瀏覽器作為請求頭髮出，與伺服器端的Last-Modified作比較，時間一致則返回304繼續使用，時間不一致則使用從伺服器端返回的最新資源
⑤Etag
⑥If-None-Match 當你第一次發起HTTP請求時，伺服器會返回一個Etag，並在你第二次發起同一個請求時，客戶端會同時傳送一個If-None-Match，而它的值就是Etag的值（此處由發起請求的客戶端來設定）。然後，伺服器會比對這個客服端傳送過來的Etag是否與伺服器的相同，如果相同，就將If-None-Match的值設為false，返回狀態為304，客戶端繼續使用本地快取，

3.描述一下Http的快取機制

3.1 什麼是快取？

開啟一個網站，不需要再重新向服務端獲取的資源，因為該資源未改變，則該資源稱作快取

3.2 哪些資源可以被快取？

靜態資源（JS、CSS、Img）

3.3 ①Http快取——強制快取

由伺服器端返回的（cache-control：xxx值）欄位控制強制快取邏輯

①max-age 以秒為單位，控制資源可以持續使用的時長為多少秒
②no-cache 強制客戶端直接向伺服器傳送請求,也就是說每次請求都必須向伺服器傳送。伺服器接收到請求，然後判斷資源是否變更，是則返回新內容，否則返回304，未變更。這個很容易讓人產生誤解，使人誤以為是響應不被快取。實際上Cache-Control: no-cache是會被快取的，只不過每次在向客戶端（瀏覽器）提供響應資料時，快取都要向伺服器評估快取響應的有效性
③no-store 禁止一切快取（這個才是響應不被快取的意思）
④private 只能針對個人使用者，而不能被代理伺服器快取
⑤public 指示響應可被任何快取區快取

3.4 ②Http快取——協商快取（對比快取，是伺服器端快取策略）

協商快取，也叫對比快取。瀏覽器初次請求之後，伺服器會返回資源和資源標識，然後瀏覽器第二次發出請求時，則會帶著資源標識發到伺服器端。伺服器端會對接收到的資源標識與伺服器上的資源標識進行對比，如果一致則返回304標識資源可繼續使用，如果不一致則返回200和最新的資源

使用較多的兩種資源標識
①Last-Modified 和對應的 If-Modified-Since （資源的最後修改時間） ②Etag 和對應的 If-None-Match （資源的唯一標識，類似人的指紋）

③對比Last-Modified 和 Etag

優先使用Etag，因為它是資源唯一標識
Last-Modified 只能精確到秒級
如果資源被重複生成，而內容不變，則Etag會更準確

3.5 ③【Http快取——綜述】

首先瀏覽器發出Http請求，假設有cache-control控制強制快取，先判斷快取是否過期，例如是max-age

①在規定時間內沒有過期那麼就會直接讀取上次快取的資源，直接頁面呈現。假設強制快取過期了，那麼就會判斷是否有Etag和Last-Modified協商快取欄位，有的話就會帶著If-None-Match，If-Modified-Since欄位傳送請求，然後伺服器接收後判斷快取是否還可繼續使用
②可以使用則返回304然後讀取快取，頁面呈現
③如果不可使用那麼就會返回200和最新的資源，然後頁面呈現
④如果沒有Etag和Last-Modified協商快取欄位，那麼就會直接發起Http請求，請求最新的資源，然後伺服器返回最新的資源，直接頁面呈現

4.手寫一個簡易的Ajax

Ajax技術的核心是XMLHttpRequest物件。對於XMLHttpRequest這裡不做詳解，只講解手寫方法中涉及的部分知識點。

4.1 open()方法

open()方法用於初始化一個請求。open()方法接收三個引數：

第一個引數 method：要傳送的請求的型別。比如GET、POST、PUT、DELETE等。
第二個引數 url：請求的URL。
第三個引數 async：是否非同步傳送請求的布林值。true為非同步傳送請求。

4.2 readyState屬性

readyState屬性表示請求/響應過程的當前活動階段。這個屬性的值如下：

0（UNSENT）未初始化。尚未呼叫open()方法
1（OPENED）啟動。已經呼叫open()方法，但沒有呼叫send()方法
2（HEADERS_RECEIVED）傳送。已經呼叫send()方法，但尚未接收到響應
3（LOADING）接收。已經接收到部分響應資料
4（DONE）完成。已經接收到全部響應資料

function ajax ( url , successFn ){

    const xhr = new XMLHttpRequest()
    xhr.open( 'GET' , url , true)
    // true非同步，避免卡住， false為同步

    xhr.onreadystatechange = function() {
        if( xhr.readyState == 4 ){
            if( xhr.status == 200 ){
                successFn(xhr.responseText)
            }
        }
    }

    xhr.send(null)
}
複製程式碼

5.手寫一個Ajax要求結合promise

function ajax(url) {
    const p = new Promise((resolve, reject) => {
    
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        // true非同步，避免卡住， false為同步
        
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
            
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                } else if (xhr.status === 404) {
                    reject(new Error("404 not found"));
                }
                
            }
        };
        
        xhr.send(null);
    });
    return p;
}
複製程式碼

6.跨域是什麼，為什麼會產生跨域問題

出於瀏覽器的同源策略限制，瀏覽器會拒絕跨域請求

同源策略

ajax請求時，瀏覽器要求當前網頁和server服務端必須同源（安全問題）
同源：即協議、域名、埠三者必須一致
例如：前端：http://a.com:8080/，後端：http://b.com/api/xxx，此時前端的協議為http、域名為a.com、埠為8080，而後端的協議為https、域名為b.com、埠沒寫但https預設為80埠，所以三者都不一樣，只要有一個不一樣，瀏覽器就會截獲請求，這就是跨域問題

7.如何解決跨域問題

所有的跨域，都必須經過server端允許和配合未經server端允許就實現跨域，說明常見解決跨域的方式有JSONP、CORS和代理跨域，這裡只對JSONP做簡單講解

JSONP

①<script>可跨過跨域限制
②伺服器可以任意動態拼接資料返回
③所以，<script>就可以獲得跨域的資料，只要服務端願意配合返回

簡單舉例，HTML檔案

<script>
 window.callback = function (data) {
     console.log(data)
    }
</script>
<script src="http://localhost:8080/jsonp.js"></script>
複製程式碼

JSONP.js檔案

callback({ name: "zhangsan" })
複製程式碼

跨域詳解，可以參考這篇文章深入跨域問題

8.描述cookie、localStorage、sessionStorage的區別

①本身用於瀏覽器和server通訊
②被借用到本地儲存，可通過document.cookie=" "設定缺點：
①儲存大小為最大4KB
②Http請求時需要傳送到服務端，增加請求資料量

localStorage和sessionStorage

①HTML5專門為儲存而設計的，最大可存5M
②API簡單易用，localStorage.setItem(' ',' ')、localStorage.getItem('')、sessionStorage.setItem(' ',' ')、sessionStorage.getItem('')
③不會隨著Http請求被髮送出去
④區別：localStorage永久有效，除非手動從控制檯刪除，sessionStorage存在於當前會話，瀏覽器關閉則會清除

寫在文末

如果你覺得我寫得還不錯的話，可以給我點個贊哦^^，如果哪裡寫錯了、寫得不好的地方，也請大家評論指出，以供我糾正。（這個系列也快完結了哦，可以複習複習前面的）

其它文章

本文使用 mdnice 排版