知識不怕舊，關鍵在于在舊知識的基礎上不斷創新與提高！
引入一個問題：打開一個浏覽器，在位址欄輸入一個網址，按下 enter 鍵到看到整個頁面，中間都經曆了哪些事情?
這是一個前端的面試題，相信很多朋友都知道，知道了解的朋友可以略過這一塊。
1、HTTP請求階段：向伺服器發送請求
浏覽器首先向DNS域名解析伺服器發送請求，DNS域名解析伺服器對該位址進行解析，根據浏覽器請求位址中的域名，到DNS伺服器中找到對應的伺服器外網IP位址，進而通過找到的外網IP，向對應的伺服器發送請求，通過URL位址中攜帶的端口号，找到伺服器上對應的服務，以及服務所管理的項目源檔案；
2、HTTP響應階段：伺服器把用戶端需要的内容準備好，并且傳回給用戶端
伺服器端根據請求位址中的路徑名稱、問号傳參或者哈希值，把用戶端需要的内容進行準備和處理，把準備的内容響應給用戶端；
注意：如果請求的是HTML或者CSS等這樣的資源檔案，伺服器傳回的是資源檔案中的源代碼
3、浏覽器渲染階段
用戶端浏覽器接受到伺服器傳回的源代碼，基于自己内部的渲染引擎（核心）開始進行頁面的繪制和渲染。
URL，在上訴中一個很重要的媒介：https://i.cnblogs.com/helloworld.html?name=xxx&sex=xxx#boy，我們再來認識認識這個東西是什麼？
1、URL / URN / URI
URI = URL + URN
URI：統一資源辨別符
URL：統一資源定位符
URN：統一資源名稱
2、傳輸協定（http）：用來傳輸用戶端和伺服器端互動的資訊（這是個很重要的東西）
HTTP：超文本傳輸協定（除了傳遞普通的文本，還可以傳遞檔案流或者進制編碼等資訊），是目前最常用的WEB傳輸協定
HTTPS：基于SSL（Secure Sockets Layer 安全套接層）加密的HTTP傳輸協定，比HTTP更加的安全
擴充：FTP：檔案傳輸協定，一般用來實作資源檔案在伺服器上的上傳下載下傳
3、域名：i.cnblogs.com
這個沒什麼好說的，基本就是為了語義化，好記
4、端口号（8080）：用來區分同一台伺服器上不同服務的辨別
HTTP => 預設端口号 80
HTTPS => 預設端口号 443
FTP => 預設端口号 21
端口号範圍：0~65535之間
5、請求路徑名稱：/helloworld.html
（1）有字尾資訊：/helloworld.html
一般都是請求目前服務對應的項目目錄中，helloworld.html頁面
（2）無字尾資訊：/helloworld
一般都不是用來請求資源檔案的，而是用于AJAX資料請求的接口位址
6、問号傳參及哈希值：?name=xxx&sex=xxx#boy
在HTTP事務中，問号傳參是用戶端把資訊傳遞給伺服器的一種方式(也有可能是跳轉到某一個頁面，把參數值傳遞給頁面用來辨別的)
哈希值一般都跟用戶端伺服器互動沒啥關系，主要用于頁面中的錨點定位和HASH路由切換
看了這麼多是不是覺得啰嗦了呢，别急，正題這不就來了嗎！
AJAX ：async javascript and xml 異步的 JS 和 XML
1、操作
1 // 建立AJAX執行個體：IE6中是不相容的（忽略這萬惡的）
2 let xhr = new XMLHttpRequest();
3
4 // 打開請求：發送請求之前的一些配置項
5 // 1.HTTP METHOD 請求方式
6 // GET/DELETE/HEAD/OPTIONS/TRACE/CONNECT/POST/PUT
7 // 2.URL 向伺服器端發送請求的API
8 // 3.ASYNC 設定AJAX請求的同步異步，預設是異步（寫TRUE也是異步），FALSE是同步，一般都使用異步程式設計，防止阻塞後續代碼執行
9 // 4.USER-NAME/USER-PASS：使用者名密碼，一般不用
10 xhr.open([HTTP METHOD],[URL],[ASYNC],[USER-NAME],[USER-PASS]);
11
12 // 事件監聽：一般監聽的都是 READY-STATE-CHANGE 事件（AJAX狀态改變事件），基于這個事件可以擷取伺服器傳回的響應頭響應主體内容
13 xhr.onreadystatechange=()=>{
14 if(xhr.readyState===4 && xhr.status===200){
15 xhr.responseText;
16 }
17 };
18
19 // 發送AJAX請求：從這步開始，目前AJAX任務開始，如果AJAX是同步的，後續代碼不會執行，要等到AJAX狀态成功後在執行，反之異步不會
20 xhr.send([請求主體内容]); 2、HTTP請求方式
所有的請求都可以給伺服器端傳遞内容，也都可以從伺服器端擷取内容
GET：從伺服器端擷取資料(給少拿多)
POST：向伺服器端推送資料(給多拿少)
DELETE：删除伺服器端的某些内容（一般是删除一些檔案）
PUT：向伺服器上存放一些内容（一般也是存放檔案）
HEAD：隻想擷取伺服器傳回的響應頭資訊，不要響應主體中的内容
OPTIONS：一般使用它向伺服器發送一個探測性請求，如果伺服器端傳回的資訊了，說明目前 > 用戶端和伺服器端建立了連接配接，我們可以繼續執行其它請求了
3、GET VS POST（重點嘛）
（1）傳遞給伺服器資訊的方式不一樣
1 // GET是基于URL位址“問号傳參”的方式把資訊傳遞給伺服器
2 xhr.open(\'GET\',\'/haha/list?xxx=xxx&xxx=xxx\')
3
4 // POST是基于“請求主體”把資訊傳遞給伺服器
5 xhr.send(\'xxx=xxx&xxx=xxx\') （2）GET不安全，POST相對安全
（3）GET會産生不可控制的緩存,POST不會
4、AJAX狀态
- 0 ：剛開始建立XHR，還沒有發送
- 1 ：已經執行了OPEN這個操作
- 2 ：已經發送AJAX請求（AJAX任務開始），響應頭資訊已經被用戶端接收了（響應頭中包含了：伺服器的時間、傳回的HTTP狀态碼...）
- 3 ：響應主體内容正在傳回
- 4 ：響應主體内容已經被用戶端接收
5、HTTP網絡狀态碼
根據狀态碼能夠清楚的反映出目前互動的結果及原因
- 200 OK 成功(隻能證明伺服器成功傳回資訊了，但是資訊不一定是你業務需要的)
- 301 Moved Permanently 永久轉移（永久重定向）
- 302 Move temporarily 臨時轉移（臨時重定向 =>307）
- 304 Not Modified 設定緩存
- 400 Bad Request 請求參數錯誤
- 401 Unauthorized 無權限通路
- 404 Not Found 找不到資源(位址不存在)
- 413 Request Entity Too Large 和伺服器互動的内容資源超過伺服器最大限制
- 500 Internal Server Error 未知的伺服器錯誤
- 503 Service Unavailable 伺服器超負荷
6、XHR的屬性和方法
- xhr.response 響應主體内容
- xhr.responseText 響應主體的内容是字元串（JSON或者XML格式字元串都可以）
- xhr.responseXML 響應主體的内容是XML文檔
- xhr.status 傳回的HTTP狀态碼
- xhr.statusText 狀态碼的描述
- xhr.timeout 設定請求逾時的時間
- xhr.withCredentials 是否允許跨域（FALSE）
- xhr.abort() 強制中斷AJAX請求
- xhr.getAllResponseHeaders() 擷取所有響應頭資訊
- xhr.getResponseHeader([key]) 擷取KEY對應的響應頭資訊
- xhr.open() 打開URL請求
- xhr.overrideMimeType() 重寫MIME類型
- xhr.send() 發送AJAX請求
- xhr.setRequestHeader() 設定請求頭
後面就是讓我們動動自己的小手，實作你自己代碼吧！