ajax與XHR的理解和使用

ajax理解

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 不是新的編程語言，而是一種使用現有標准的新方法。
AJAX 是與服務器交換數據並更新部分網頁的藝術，在不重新加載整個頁面的情況下 ;通過在后台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新

Ajax簡介(MDN文檔)
Asynchronous JavaScript + XML（異步JavaScript和XML）, 其本身不是一種新技術，而是一個在 2005年被Jesse James Garrett提出的新術語，用來描述一種使用現有技術集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。當使用結合了這些技術的AJAX模型以后， 網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要重載（刷新）整個頁面。這使得程序能夠更快地回應用戶的操作

XMLHttpRequest 是 AJAX 的基礎,XMLHttpRequest API是Ajax的核心

XMLHttpRequest 用於在后台與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新

理解XHRHttpRequest

使用 XMLHttpRequest (XHR)對象可以與服務器交互, 也就是發送 ajax 請求
前端可以獲取到數據，而無需讓整個的頁面刷新。
這使得 Web 頁面可以只更新頁面的局部，而不影響用戶的操作

區別一般 http 請求與 ajax 請求

ajax 請求是一種特別的 http 請求
對服務器端來說, 沒有任何區別, 區別在瀏覽器端
瀏覽器端發請求: 只有 XHR 或 fetch 發出的才是 ajax 請求, 其它所有的都是非 ajax 請求

瀏覽器端接收到響應
一般請求: 瀏覽器一般會直接顯示響應體數據, 也就是我們常說的刷新/跳轉頁面
ajax 請求: 瀏覽器不會對界面進行任何更新操作, 只是調用監視的回調函數並傳入響應相關數據

傳統的XHR請求模式

// ajax的基本請求步驟
// 1.創建對象
const xhr = new XMLHttpRequest();
// 2.初始換
xhr.open('Get', 'http....');
// 發送請求
xhr.send();
// 處理響應回調
xhr.onreadystatechange = function(){
 console.log(`xhr`, xhr)
 // 返回狀態碼
 if(xhr.readyState === 4){
     // 判斷響應狀態碼為2xx
     if(xhr.status >= 200 && xhr.status <= 300){
         // 控制台輸出響應體
         console.log(`xhr.response`, xhr.response)
     }else{
         // 輸出響應狀態碼
         console.log(`xhr.status`, xhr.status)
     }
 }
}

// Promise處理ajax請求
const p = new Promise((resolve, reject) => {
 // ajax的基本請求步驟
 // 1.創建對象
 const xhr = new XMLHttpRequest();
 // 2.初始換
 xhr.open('Get', 'http....');
 // 發送請求
 xhr.send();
 // 處理響應回調
 xhr.onreadystatechange = function(){
     console.log(`xhr`, xhr)
     // 返回狀態碼
     if(xhr.readyState === 4){
         // 判斷響應狀態碼為2xx
         if(xhr.status >= 200 && xhr.status <= 300){
             // 控制台輸出響應體
             // console.log(`xhr.response`, xhr.response)
             resolve(xhr.response)
         }else{
             // 輸出響應狀態碼
             // console.log(`xhr.status`, xhr.status)
             reject(xhr.status)
         }
     }
 }
});
// 調用then方法
p.then(value => {
 console.log(value);
},reason => {
 console.warn(reason)
})

---