知識不怕舊，關鍵在於在舊知識的基礎上不斷創新與提高！
引入一個問題：開啟一個瀏覽器，在位址列輸入一個網址，按下 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() 設定請求頭
後面就是讓我們動動自己的小手，實現你自己程式碼吧！