web交互方式---ajax

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

引入一個問題：打開一個瀏覽器，在地址欄輸入一個網址，按下 enter 鍵到看到整個頁面，中間都經歷了哪些事情?

這是一個前端的面試題，相信不少朋友都知道，知道了解的朋友能夠略過這一塊。

一、HTTP請求階段：向服務器發送請求

　瀏覽器首先向DNS域名解析服務器發送請求，DNS域名解析服務器對該地址進行解析，根據瀏覽器請求地址中的域名，到DNS服務器中找到對應的服務器外網IP地址，進而經過找到的外網IP，向對應的服務器發送請求，經過URL地址中攜帶的端口號，找到服務器上對應的服務，以及服務所管理的項目源文件；

二、HTTP響應階段：服務器把客戶端須要的內容準備好，而且返回給客戶端

　服務器端根據請求地址中的路徑名稱、問號傳參或者哈希值，把客戶端須要的內容進行準備和處理，把準備的內容響應給客戶端；

　注意：若是請求的是HTML或者CSS等這樣的資源文件，服務器返回的是資源文件中的源代碼

三、瀏覽器渲染階段

　客戶端瀏覽器接受到服務器返回的源代碼，基於本身內部的渲染引擎（內核）開始進行頁面的繪製和渲染。

URL，在上訴中一個很重要的媒介：https://i.cnblogs.com/helloworld.html?name=xxx&sex=xxx#boy，咱們再來認識認識這個東西是什麼？

一、URL / URN / URI

　URI = URL + URN

　URI：統一資源標識符

　URL：統一資源定位符

　URN：統一資源名稱

二、傳輸協議（http）：用來傳輸客戶端和服務器端交互的信息（這是個很重要的東西）

　HTTP：超文本傳輸協議（除了傳遞普通的文本，還能夠傳遞文件流或者進制編碼等信息），是目前最經常使用的WEB傳輸協議

　HTTPS：基於SSL（Secure Sockets Layer 安全套接層）加密的HTTP傳輸協議，比HTTP更加的安全

擴展：FTP：文件傳輸協議，通常用來實現資源文件在服務器上的上傳下載

三、域名：i.cnblogs.com

　這個沒什麼好說的，基本就是爲了語義化，好記

四、端口號（8080）：用來區分同一臺服務器上不一樣服務的標識

　HTTP  =>  默認端口號 80

　HTTPS  =>  默認端口號 443

　FTP  =>  默認端口號 21

　端口號範圍：0~65535之間

五、請求路徑名稱：/helloworld.html

　（1）有後綴信息：/helloworld.html

　　通常都是請求當前服務對應的項目目錄中，helloworld.html頁面

　（2）無後綴信息：/helloworld

　　通常都不是用來請求資源文件的，而是用於AJAX數據請求的接口地址

六、問號傳參及哈希值：?name=xxx&sex=xxx#boy

　在HTTP事務中，問號傳參是客戶端把信息傳遞給服務器的一種方式(也有多是跳轉到某一個頁面，把參數值傳遞給頁面用來標識的)

　哈希值通常都跟客戶端服務器交互沒啥關係，主要用於頁面中的錨點定位和HASH路由切換

看了這麼可能是不是以爲囉嗦了呢，別急，正題這不就來了嗎！

 AJAX ：async javascript and xml 異步的 JS 和 XML 

一、操做

 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([請求主體內容]);

二、HTTP請求方式

　全部的請求均可以給服務器端傳遞內容，也均可以從服務器端獲取內容

　GET：從服務器端獲取數據(給少拿多)

　POST：向服務器端推送數據(給多拿少)

　DELETE：刪除服務器端的某些內容（通常是刪除一些文件）

　PUT：向服務器上存放一些內容（通常也是存放文件）

　HEAD：只想獲取服務器返回的響應頭信息，不要響應主體中的內容

　OPTIONS：通常使用它向服務器發送一個探測性請求，若是服務器端返回的信息了，說明當前 > 客戶端和服務器端創建了鏈接，咱們能夠繼續執行其它請求了

三、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不會

四、AJAX狀態

　- 0 ：剛開始建立XHR，尚未發送

　- 1 ：已經執行了OPEN這個操做

　- 2 ：已經發送AJAX請求（AJAX任務開始），響應頭信息已經被客戶端接收了（響應頭中包含了：服務器的時間、返回的HTTP狀態碼...）

　- 3 ：響應主體內容正在返回

　- 4 ：響應主體內容已經被客戶端接收

五、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 服務器超負荷

六、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() 設置請求頭

後面就是讓咱們動動本身的小手，實現你本身代碼吧！