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>

总结

虽然现在AJAX已经使用的较少了，但是我们最常使用的Axios和fetch都是在AJAX的基础是封装优化来的，所以说，AJAX的重要性还是很高的！不要忘记了我们的大功臣——AJAX。

AJAX是如何凭一己之力提高前端程序员的工资水平的？

AJAX的介绍

在AJAX前的前端开发

AJAX的出现改变了前端开发的地位

AJAX的推动了技术的发展

js官方新更新的Fetch

总结

幸福的闹钟

引用和评论

建议收藏！这个程序员一身反骨，不愿写周报，于是做了个神器

CSS团队协作规范

疫情特殊时期，致 SegmentFault 思否全体员工的一封公开信

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

100个React最佳实践小技巧

CSS 现在终于支持高度 auto 过渡动画了