為Ajax：

當今數字時代，互聯網的發展讓我們的網頁愈發交互且動感十足。你是否曾想過這些令人驚艷的網頁是如何實現的呢？答案之一就在于 Ajax（Asynchronous JavaScript and XML）技術。在本文中動手實現屬于你自己的 Ajax 請求！

Ajax，這個聽起來充滿未知魔力的縮寫，實際上代表了一種讓網頁實現異步數據交換的技術。通過 Ajax，我們能夠在不刷新整個頁面的情況下，動態地加載和更新數據，為用戶提供更加流暢和即時的體驗。

你是否曾想過，這些異步請求是如何工作的？只需一點前端魔法的指引，你也能夠輕松掌握手寫 Ajax 的技巧。

在本文中，我們將深入了解 Ajax 的工作原理，并通過實際動手的方式，逐步構建一個簡單而強大的異步請求。

手寫代碼：

 // 兼容性·IE6.0以前 現在沒什么必要 IE -> Edge
                const xhr =
                    XMLHttpRequest
                        ? new XMLHttpRequest()
                        : new ActiveXObject('Microsoft.XMLHTTP')
                xhr.open('GET', url, false)
                // 宏任務 事件
                xhr.onreadystatechange = function () {
                    if (xhr.readyState !== 4)
                        // 叼一下 表現一下 304 Not Modified 沒有修改
                        if (xhr.status === 200 || xhr.status === 304) {
                            resolve(xhr.responseText);
                        } else {
                            rejecct(new Error(xhr.responseText))
                        }
                }
                xhr.send();
                // onreadyStateChange 
                // setTimeout(() => {
                //     resolve('gigi')
                // }, 1000)
            })
        };

在這段代碼中，主要完成了使用 XMLHttpRequest 對象進行同步（xhr.open('GET', url, false)）Ajax 請求的操作。讓我逐步解釋這段

代碼：

• 創建 XMLHttpRequest 對象：

const xhr = XMLHttpRequest
                ? new XMLHttpRequest()
                : new ActiveXObject('Microsoft.XMLHTTP');

if (window.XMLHttpRequest) { 
// 現代瀏覽器支持
XMLHttpRequest xhr = new XMLHttpRequest();
} else { 
// 舊版 Internet Explorer 使用 ActiveXObject 
xhr = new ActiveXObject('Microsoft.XMLHTTP'); }

xhr.open('GET', url, false);

• 這行代碼使用 open 方法初始化 XMLHttpRequest 對象。它指定了請求的類型（GET）、URL 和是否使用異步（false 表示同步）。值得注意的是，同步請求在現代 web 開發中已不推薦使用，因為它可能會導致頁面凍結，用戶體驗差，且在主流瀏覽器中逐漸被廢棄。

1. 監聽 onreadystatechange 事件：

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4)
        if (xhr.status === 200 || xhr.status === 304) {
            resolve(xhr.responseText);
        } else {
            reject(new Error(xhr.responseText))
        }
};

1. onreadystatechange 事件是一個在 XMLHttpRequest 對象的 readyState 屬性發生變化時觸發的事件。readyState 屬性表示請求的狀態，其中 4 表示請求已完成。當 readyState 不等于 4 時，這段代碼不執行任何操作，因為這表示請求仍在進行中。當 readyState 等于 4 時，表示請求已完成，進入這個條件分支。

在這個條件分支中，檢查 xhr.status，它表示 HTTP 響應的狀態碼。狀態碼 200 表示成功，而 304 表示資源未被修改，可以從緩存中加載。如果狀態碼是 200 或 304，則將 Promise 置為成功狀態，調用 resolve 函數，傳遞響應文本 (xhr.responseText)。如果狀態碼不是 200 或 304，則說明請求失敗，將 Promise 置為拒絕狀態，調用 reject 函數，并傳遞一個包含錯誤信息的新 Error 對象。講到這里，我要提醒一下大家，在面試的過程中，當你的代碼中出現狀態碼，那么請做好準備，面試官很有可能會把所有的HTTP狀態碼都問你一遍，這其實是好事，可以增加你在面試過程中的時間，幫你更輕松的度過面試死亡時間，因為比起面試官的其他問題，這個狀態碼簡直不要太簡單，希望大家有時間就看看，并沒有多少。我在文章結尾會補充說明把狀態碼發出來，希望對你有所幫助。

• 發送請求：
• ini
• 復制代碼

xhr.send();

• 最后，使用 send 方法發送請求。

總體來說，這段代碼是一個非?；A的使用 XMLHttpRequest 對象進行同步 Ajax 請求的例子。然而，現代的 web 開發更傾向于使用異步請求，通常使用 fetch 或類似的 API，因為它們提供更好的性能和用戶體驗。

總結：

在本文中，我們深入研究了 Ajax 技術的本質，揭示了它在現代前端開發中的不可或缺的角色。通過手寫 Ajax，我們掌握了異步請求的核心概念，以及如何使用純粹的 JavaScript 在網頁上實現動態數據交換。

我們了解到，Ajax 不再是前端魔法師的專屬工具，而是每個開發者都能夠掌握的技能。通過實際動手的練習，我們發現了異步編程的奇妙之處，以及在網頁交互中如何利用 Ajax 構建更加響應式和流暢的用戶體驗。

但這只是前端開發旅程的開始。在未來的學習中，你可以進一步探索現代工具和框架，如 Fetch API、Axios 等，它們提供了更強大和便捷的方式來處理異步請求。同時，深入理解 Promise 和 async/await 等概念將使你更加游刃有余地處理異步編程挑戰。

無論你是初學者還是經驗豐富的開發者，手寫 Ajax 是一個深入理解前端技術根基的重要一步。希望本文能夠激發你對前端開發的興趣，并為你在這個令人興奮的領域中邁出更大的步伐提供了堅實的基礎。

感謝閱讀，愿你在前端的旅途中不斷探索、學習、創造，成為一位優秀的前端工程師！如果文章對你有所幫助，還望點個贊支持一下。

補充說明：HTTP狀態碼

HTTP 協議使用狀態碼（HTTP status codes）來表示請求的處理結果。狀態碼是服務器對客戶端發起的請求的響應的一部分，它提供了關于請求處理成功與否、出現錯誤的信息。

以下是常見的 HTTP 狀態碼，它們不僅適用于 HTML，也適用于其他資源的請求：

• 1xx（信息）：
• 100 Continue：服務器已經接收到請求頭，并且客戶端應繼續發送請求體。
• 2xx（成功）：
• 200 OK：請求成功。
• 201 Created：請求已經被實現，新資源已經依據請求的需要而建立。
• 204 No Content：服務器成功處理了請求，但沒有返回任何內容。
• 3xx（重定向）：
• 301 Moved Permanently：被請求的資源已永久移動到新位置。
• 302 Found：被請求的資源在新的位置臨時找到。
• 304 Not Modified：資源未被修改，可以使用緩存的版本。
• 4xx（客戶端錯誤）：
• 400 Bad Request：服務器未能理解請求。
• 401 Unauthorized：請求要求身份驗證。
• 403 Forbidden：服務器理解請求，但拒絕執行。
• 404 Not Found：服務器找不到請求的資源。
• 5xx（服務器錯誤）：
• 500 Internal Server Error：服務器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。
• 502 Bad Gateway：作為網關或代理工作的服務器嘗試執行請求時，從上游服務器接收到無效的響應。
• 503 Service Unavailable：服務器目前無法使用（由于超載或停機維護）。通常，這只是暫時狀態。

編寫你自己的Ajax：探索前端異步世界
原文鏈接：https://juejin.cn/post/7311893415151517736

open(method,url,async)//方法、處理URL，異步/同步
send(string)//post類型時傳遞參數