web交互方式---ajax_ZenDei技術網路在線

知識不怕舊，關鍵在於在舊知識的基礎上不斷創新與提高！引入一個問題：打開一個瀏覽器，在地址欄輸入一個網址，按下 enter 鍵到看到整個頁面，中間都經歷了哪些事情? 這是一個前端的面試題，相信很多朋友都知道，知道瞭解的朋友可以略過這一塊。 1、HTTP請求階段：向伺服器發送請求瀏覽器首先向DNS域 ...

知識不怕舊，關鍵在於在舊知識的基礎上不斷創新與提高！

引入一個問題：打開一個瀏覽器，在地址欄輸入一個網址，按下 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() 設置請求頭

後面就是讓我們動動自己的小手，實現你自己代碼吧！