likes
comments
collection
share

JavaScript里程碑——Ajax

作者站长头像
站长
· 阅读数 20

前言

曾几何时，当前端还在处于切图仔时代的时候，突然就迎来了磅礴式的发展，不仅有了JS，而在短暂的发展后，更多更好的前端技术被开发出来，而Ajax也是其中之一，而正是Ajax使得前端能够足够强大去适应时代。

Ajax，全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页内容的技术。Ajax使得网页可以实现更快速、更动态的交互，因为它允许浏览器在后台与服务器交换数据并局部更新页面。

Ajax

Ajax（Asynchronous JavaScript and XML）这一术语是在2005年2月由Adaptive Path的Jesse James Garrett在他的文章《Ajax: A New Approach to Web Applications》中首次正式提出的。虽然Ajax技术的组件和方法在此之前已经存在并被个别使用，如微软在1999年发布的IE5中就内嵌了类似Ajax的技术，但直到2005年，随着Google Maps和Google Suggest等产品的发布，Ajax才开始被广泛认知和流行起来。这些应用展示了如何利用Ajax实现网页的异步交互，从而极大地提升了用户体验，使得Ajax成为Web开发中的一个重要技术。

虽然现在也已逐步淘汰，但不可否认的Ajax的基本原理和应用场景仍然在Web开发中占据重要地位，Ajax的学习也是前端学习不可避免的难关。

Ajax实例

我们可以通过一个简单的实例---获取电影列表，来了解Ajax是多么强大。

需求：通过一个按钮就可以拿到给定地址的电影列表

我们首先需要思考分解需求,有了思考才有个更好的编程体验

  1. 我们先需要获取DOM结构，按钮的点击事件，ul的添加li，都需要我们先获取DOM结构。
  2. 添加按钮的点击事件
  3. 点击按钮后会向后端发送请求并获取数据再添加到ul列表里，这一步就需要Ajax的帮助了

Ajax的使用，需要我们构建一个Ajax实例对象，前端向后端发送请求就只能用这个对象来配置和发送请求，然后我们就需要处理请求到的数据并呈现出来。

代码就几乎全出来了，一个好的编程习惯可以加快敲代码的速度！！

html结构

<button id="btn">获取电影列表</button>
 <ul id="ul"></ul>

我们只需要一个按钮以及一个电影列表即可。

JS代码部分

let btn = document.getElementById('btn');
        let ul  = document.getElementById('ul');
        btn.addEventListener('click',() =>{
            // 朝后端发一个请求，获取到需要的数据
            let xhr = new XMLHttpRequest();// 创建了一个ajax实例
            xhr.open('GET','数据源',true);
            xhr.send()
            xhr.onreadystatechange = () =>{// 检测请求的每个阶段
                if(xhr.readyState == 4 && xhr.status == 200){
                    console.log(JSON.parse(xhr.responseText));
                    const movieList = JSON.parse(xhr.responseText).movieList;

                    for(let i=0; i<movieList.length; i++){
                        const li = document.createElement('li');
                        li.innerText = `${movieList[i].nm} -- ${movieList[i].star}` //movieList[i].nm+"--"+movieList[i].star;
                        ul.appendChild(li)
                    }
                    
                }
            }
        })

  1. 获取DOM元素:

    • let btn = document.getElementById('btn'); 获取页面中id为'btn'的按钮元素。
    • let ul = document.getElementById('ul'); 获取页面中id为'ul'的无序列表元素。

  2. 添加点击事件监听器:

    • btn.addEventListener('click', () => { ... }) 为按钮添加一个点击事件监听器，当按钮被点击时，执行匿名函数内的代码。

  3. 创建XMLHttpRequest实例:

    • let xhr = new XMLHttpRequest(); 创建一个新的XMLHttpRequest对象，用于向服务器发送异步HTTP请求。

  4. 配置和发送请求:

    • xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList', true); 配置请求方法为GET，请求的URL指向一个模拟接口，用于获取电影列表数据，第三个参数true表示这是一个异步请求。
    • xhr.send(); 发送请求到服务器。

  5. 处理响应:

    • xhr.onreadystatechange = () => { ... } 设置一个事件处理器，用来监听请求状态的改变。

    • if(xhr.readyState == 4 && xhr.status == 200) { ... } 当请求完成（readyState == 4）并且服务器响应成功（status == 200）时，执行内部代码。

      • console.log(JSON.parse(xhr.responseText)); 解析从服务器返回的文本响应（JSON格式）并打印到控制台。
      • const movieList = JSON.parse(xhr.responseText).movieList; 将响应数据转换为JavaScript对象，并提取出movieList数组。
      • 使用for循环遍历movieList数组，为每部电影创建一个新的li元素，并设置其文本内容为电影名称（movieList[i].nm）和演员（movieList[i].star）。
      • ul.appendChild(li); 将新创建的li元素添加到无序列表（ul）中。

这样一个简单的Ajax实例就完成了，然而Ajax在现在已经显得臃肿复杂了，一些api库，例如axios、jquery以及fetch都可以更好、更简洁的完成这个任务，下面给出代码：

jquery实现

<body>
    <button onclick="getData()">获取电影数据</button>
    <ul></ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        function getData(){
            $.ajax({
                url:'数据源',
                method:'GET',
                data:{
                name:'ace',
                age:'18'
                },
                success: function(data){
                    console.log(data);
                }
            })
        }
    </script>
</body>

解析：

  1. HTML结构:

    • 有一个按钮，其onclick属性绑定到getData()函数，点击时执行此函数。
    • 一个无序列表<ul></ul>，用于动态展示获取到的电影数据。
    • 引入了jQuery库的CDN链接，版本为3.7.1，这使得在后续的JavaScript代码中可以使用jQuery提供的功能。

  2. JavaScript/jQuery代码:

    • function getData(){...} 定义了当按钮被点击时调用的函数。

    • $.ajax({ ... }) 是jQuery提供的Ajax请求方法，它接受一个配置对象作为参数，其中包含：

      • url：请求的目标地址，此处为模拟接口，提供电影列表数据。
      • method：请求的方法，这里是GET。
      • data：请求携带的数据对象，尽管在这个例子中设置了name和age，但因为是GET请求且接口可能并未设计接收这些参数，所以这部分可能不起作用或非必需，具体取决于服务端的接口设计。
      • success：请求成功后的回调函数，参数data包含了服务器返回的数据。这里简单地将数据打印到控制台。

fetch实现

<body>
    <button onclick="getData()">获取数据</button>
    <script>
        function getData(){
            fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
            .then((res)=>{
            return res.json();
           })
           .then((data)=>{
            console.log(data);
           })
        }
    </script>
</body>

解析：

  1. HTML结构:

    • 一个按钮，点击时执行JavaScript中的getData()函数。

  2. JavaScript代码:

    • function getData(){...} 定义了点击按钮时执行的函数。
    • fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList') 使用Fetch API发起一个HTTP GET请求到指定的URL，这个URL指向一个模拟的电影列表数据接口。
    • .then((res) => { return res.json(); }) 这是Fetch API的链式Promise处理方式。第一个.then()处理响应(res)，res.json()将响应体转换为JSON格式的Promise对象。这意味着它会等待服务器响应的数据被解析为JavaScript对象。
    • .then((data) => { console.log(data); }) 第二个.then()处理上一步返回的Promise，当数据解析完成后，data参数即为解析后的电影列表数据，这里简单地将数据打印到浏览器的控制台。

axios实现

<body>
    <button onclick="getData()">获取数据</button>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        function getData(){
            axios.get('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
           .then((res)=>{
            console.log(res.data);
           })
        }
    </script>
</body>

解析：

  1. HTML结构:

    • 一个按钮，点击时调用JavaScript中的getData()函数。
    • 引入了Axios库的CDN链接，版本可能会随时间更新，这里通过jsdelivr CDN引入了Axios的最小化版本。

  2. JavaScript代码:

    • function getData(){...} 定义了按钮点击时执行的函数。
    • axios.get('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList') 使用Axios的get方法发送GET请求到指定的URL，该URL指向一个模拟的电影列表API。
    • .then((res) => { console.log(res.data); }) 这是一个Promise的链式处理方法。当请求成功时，会执行这个.then()，其中res是对服务器响应的封装，res.data直接访问到响应体中的数据，这里将获取到的数据打印到浏览器的控制台。

这些api库，虽然较之原生Ajax显得更加简洁明了，但实际上是一样的，底层都是Ajax技术实现，只是封装的很好，用起来舒服都是人家在负重前行，hhh....

结语

Ajax作为JS中最重要的技术之一，不仅极大地提升了用户体验，还给前端带来了未来。

如果我的分享对你有用，不如点个赞吧！！！

我是Ace，我们下次分享再见！！！

转载自:https://juejin.cn/post/7392444932964778020
评论
请登录