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