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)
})