AJAX是如何憑一己之力提高前端程序員的工資水平的？詳情 - 前端,程序員,ajax 幸福的鬧鐘動態日志

作者：阿達西鏈接：juejin.cn/post/7395396352183009290

emmm，今天無意間聽到一個比較奇怪的信息，就是在很早之前，前端工程師只是一個切圖崽，而且工資也不是很高。説白了，就是沒含金量的工作。因為那時候的Web應用相對簡單，主要關注於頁面的靜態內容和基本的交互。所以前端開發的工作主要集中在HTML、CSS和基礎的JavaScript上。
但是自從AJAX出現後，前端程序員就不再是之前的那種純純切圖崽了。

這也就説明AJAX對於前端開發的重要性了，所以本篇文章主要就來聊聊一下這個的前因後果。(順便吆喝一聲，技術大廠，前後端測試撈人，感興趣一起共事）

AJAX的介紹

在聊這個前因後果前我覺得還是有必要介紹一下AJAX的概念的。AJAX（Asynchronous JavaScript and XML）是一種創建交互式網頁應用的技術集合。它的英文單詞翻譯過來就是一種異步的創建交互式網頁的技術。它的核心思想就是在不重新加載整個頁面的情況下從服務器獲取數據並更新頁面的部分內容。

在AJAX前的前端開發

在AJAX出現之前的前端開發，主要側重於構建靜態或半靜態的Web頁面，那時候的Web應用通常依賴於完全頁面的重新加載來顯示新的數據或狀態。就我這種在學校裏面學過web的大學牲來説，靜態頁面沒有這動態頁面的花花繞繞，做起來還是比較簡單的。而頁面的數據交互就主要依賴於後端，也就是説後端不僅需要對數據進行處理，還要負責相應的業務邏輯以及與前端進行數據交互。嗯，就是後端幾乎做了所有的工作，而前端只用做一些簡單的頁面，開發的重點在於頁面佈局、樣式設計以及簡單的動態效果。

下面就是我們那時候的前端常需要做的一些工作：
HTML：用於構建網頁的結構。CSS：用於定義網頁的樣式和佈局。JavaScript：用於實現基本的交互功能，如表單驗證、簡單的動畫效果等。表單提交：用户填寫表單並提交後，服務器處理數據並返回一個新的HTML頁面。鏈接跳轉：用户點擊鏈接時，加載一個新的URL地址對應的HTML頁面。服務器端腳本：服務器端使用腳本語言（如PHP, ASP, JSP等）來生成HTML頁面。隱藏表單和iframe：在某些情況下，使用隱藏的表單或iframe來實現數據的異步加載。

AJAX的出現改變了前端開發的地位

AJAX的出現極大地改變了前端開發的方式，並且依靠它的核心特點，大大的改善了用户的體驗。
前端不再是隻會切頁面的切圖崽了，他也可以接替一些後端的工作，這樣前端的地位也就比之前更高了。下面通過一個簡單的例子來演示一下前端應用如何通過AJAX實現與後端的交互的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">獲取電影列表</button>
    <ul id="ul"></ul>

    <script>
        let btn = document.getElementById('btn');
        let ul = document.getElementById('ul');

        btn.addEventListener('click', ()=>{
            // 朝後端發送一個請求，獲取到需要的數據
            let xhr = new XMLHttpRequest();  //創建了一個ajax實例
            xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',true)
            // ture 表示異步請求
            xhr.send();  //發起請求
            xhr.onreadystatechange = () =>{
                //實時檢測請求的每個階段
                if(xhr.readyState == 4&&xhr.status == 200){                    
                    // 4表示請求結束
                    const movieList=JSON.parse(xhr.responseText).movieList
                    for(let i=0;i<movieList.length;i++){
                        const li = document.createElement('li');
                        // li.innerHTML = movieList[i].nm+'--'+movieList[i].star;
                        //es6模板字符串
                        li.innerHTML = `${movieList[i].nm}--${movieList[i].star}`
                        ul.appendChild(li);
                    }
                }
            }
        })
    </script>
</body>
</html>

可能這有點不太清楚裏面的意思，這段代碼主要就是通過AJAX從後端獲取數據，然後顯示到前端頁面上。

AJAX的核心就是XMLHttpRequest對象，就讓我來給大家介紹一下AJAX的主要流程吧！

XMLHttpRequest是用於在客户端和服務器之間進行異步通信的接口，它允許我們使用 JavaScript 向服務器發送請求並處理服務器的響應。
首先我們就需要實例化這個對象，這樣才能夠使用它上面的一些方法。然後我們需要使用open()方法配置我們的AJAX請求，如在這裏我們配置了請求類型，請求URL，以及異步的標誌xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movi...',true)通過send()方法發送請求。如果是POST請求，還需要在send()方法中傳遞請求體數據。通過XMLHttpRequest對象的onreadystatechange事件處理器監聽狀態的改變，然後我們可以在指定的狀態下進行相應的操作了。我們一般在最後一個狀態進行，因為此時請求已經結束，我們可以拿到我們請求的數據了。xhr.readyState == 4&&xhr.status == 200這段代碼就用來判斷是否已經請求結束，且是否請求成功。我如果請求成功的話，就可以拿請求到的數據進行相應的操作。從這個例子上我們可以淺淺的看出一點AJAX的作用了吧？

那如果沒有AJAX該怎麼做呢？

那就是在用户點擊按鈕時，我們不是通過 AJAX 發送請求，而是直接將用户重定向到一個 URL，這個 URL 返回包含電影列表的新 HTML 頁面。服務器端響應：服務器端接收到請求後，動態生成包含電影列表的 HTML 內容，並將其返回給瀏覽器。頁面刷新：瀏覽器接收到響應後，會加載新的 HTML 頁面，從而顯示電影列表。

總之，後端需要做巨大量的工作，如下：

app.get('/movie/movieList', (req, res) => {
    const movieList = getMovieList();
    let html = '<ul>';
    movieList.forEach(movie => {
        html += `<li>${movie.nm} -- ${movie.star}</li>`;
    });
    html += '</ul>';
    res.send(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Movie List</title>
        </head>
        <body>
            ${html}
        </body>
        </html>
    `);
});

我省略了獲取數據的方法，不過大致後端就要進行這些操作，看着就噁心，別看了。在沒有 AJAX 的情況下，通過完全頁面刷新來實現數據的更新是一種常見做法。這種方法雖然可以實現類似的功能，但是用��體驗和性能都不如使用 AJAX。

AJAX的推動了技術的發展

AJAX的出現促進了新的前端技術和框架的發展，如React、Vue.js等，這些工具進一步簡化了異步數據交換的過程。但是也正是這些技術的出現，極大了簡化了AJAX的使用，使最傳統的使用方式已經很難再適應現在的技術了，包括之前很多年前大佬們封裝的JQuery庫也慢慢很少被使用。因為我們現在很少再使用原生的HTML進行開發，更多的是使用vue或react框架進行開發。
現在最常用的庫就是Axios，它是一個建立在 AJAX 技術之上的現代化 HTTP 客户端庫，它為開發者提供了更強大且易於使用的 API。具體的使用我就不過多的介紹了，大家感興趣的可以去查看一下它的官方文檔，總之很方便，比AJAX更方便。

js官方新更新的Fetch

Fetch 是現代瀏覽器提供的原生 API。他與axios很相似，不過他的語法直觀，更易於學習。下面給大家演示一下如何使用fetch完成我們之前使用AJAX完成的操作，大家看着代碼的優雅度，是不是就感覺比AJAX更直觀。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="getData()">獲取電影列表</button>

    <script>
        getData=()=>{
            fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
            .then((res)=>{
                return res.json()
            })
            .then((data)=>{
                console.log(data);
            })
        }
    </script>
</body>
</html>