web开发中常见的几种异步请求方式(ajax、axios、fetch等)

拉布拉多拉的多
570 阅读4分钟

什么是异步请求

异步请求是一种在网络编程和Web开发中常见的技术，主要用于提高应用程序的响应性和性能。在传统的同步请求中，客户端发送一个请求后必须等待服务器返回响应才能继续执行后续操作，这可能导致用户界面冻结或响应延迟。而异步请求允许客户端在等待服务器响应的同时继续执行其他任务，从而提升用户体验。

什么是AJAX

Ajax（Asynchronous JavaScript and XML）是一种在Web开发中使用的技术，它允许网页在不重新加载整个页面的情况下从服务器请求和接收数据，并动态更新页面的一部分。这提供了更好的用户体验，因为用户无需等待整个页面的刷新即可看到更新的内容。以下是Ajax的基本原理：

  1. 创建XMLHttpRequest对象：

    • 浏览器中的JavaScript代码创建一个XMLHttpRequest对象实例。这个对象提供了与服务器进行异步通信的能力。

  2. 设置请求：

    • 使用XMLHttpRequest对象的open()方法设置请求类型（如GET或POST）、URL以及是否异步。例如：

      xhr.open('GET', 'https://api.example.com/data', true);

  3. 发送请求：

    • 调用XMLHttpRequest对象的send()方法发送请求。对于GET请求，通常无需参数；对于POST请求，需要传递数据作为参数。

  4. 监听响应：

    • 设置onreadystatechange事件处理器来监听服务器的响应状态。当服务器返回数据时，readyState属性会改变，从而触发事件处理器。

      xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求已完成且成功，处理响应数据
        processResponse(xhr.responseText);
    }
};

    • readyState属性状态的含义和变化：

    1. xhr.readyState为0：表示 XMLHttpRequest对象已经创建，默认为0，但是没有调用open()方法。
    2. xhr.readyState为1：表示open()方法已经被调用，这个地方你已经指定了请求类型(POST或GET),URL以及是否异步了。
    3. xhr.readyState为2：表示send()方法被调用，服务器响应的头部信息已经到达客户端，但是响应的数据未开始接收。
    4. xhr.readyState为3：表示响应体数据开始接收，接收完成这个属性值就会变为4。
    5. xhr.readyState为4：表示响应数据完全被接收，这个时候的请求已经完成，我们可以通过status属性确定结果。

    常见的状态码例子：

    • 200 OK（请求已成功，返回了所请求的信息）
    • 404 Not Found（请求的资源不存在）状态码表示请求包含语法错误，或无法完成请求

  5. 处理响应：

    • 当服务器返回数据时，通常是以字符串形式返回，可以是JSON、XML或其他格式。使用JavaScript解析这些数据并更新DOM（Document Object Model），以展示新的内容。

    下面是输出了一个Ajax的实例对象，得到的结果：

    image.png image.png

  6. 更新DOM：

    • 使用JavaScript操作DOM元素，根据从服务器接收到的数据来更新页面的某一部分，而无需刷新整个页面。 文章后面我们会用一个实例来用于更新页面dom元素，达到异步更新的操作。

  7. 错误处理：

    • 在onreadystatechange事件处理器中，还需要检查status属性，以确定服务器是否成功处理了请求。如果不是200 OK状态，可能需要采取相应的错误处理措施。

常见的几种异步异步获取电影列表并页面部分更新的demo

使用原始的XMLHttpRequest方法：

<!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')
        btn.addEventListener('click',()=>{
            //朝后端发一个请求，获取到需要的数据
            let xhr = new XMLHttpRequest(); // 创建了一个ajax实例
            xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',true);  // 请求准备
            xhr.send()
            xhr.onreadystatechange = ()=>{  //onreadystatechange实时检测请求的每个阶段
                if(xhr.readyState == 4 && xhr.status == 200){
                    let ul = document.getElementById('ul')
                    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)
                    }
                }
            }
        })
    </script>
</body>
</html>

使用JQuery方法：

jQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作

在使用前需要引入 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>它的库才能使用，具体方法如下：

<script>
        function getDate(){
            $.ajax({
                url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
                method: 'GET',
                data: {
                    name: 'xxx',
                    age: 18 
                },
                success: function(data){
                    let ul = document.getElementById('ul')
                    const movieList = data.movieList;
                    for(let i = 0; i < movieList.length;i++){
                        const li = document.createElement('li')
                        li.innerText = `` // 这里填入和上一个方法一样的
                        ul.appendChild(li)
                    }
                }
            })
        }
    </script>

使用Axios方法：

image.png 使用fetch方法：

image.png

这些方法的使用都很简单，按照上面的代码很容易就实现页面部分更新，他们的原理都是对XMLHttpRequest方法进行封装，让代码使用起来更加优雅，更加方便的。

当我们实现后，页面最终的效果如下图所示：点击按钮，获取的数据将在ul标签内使用。 image.png

总结

Ajax的使用极大地丰富了Web应用的功能，使其能够更接近桌面应用的交互体验。现代Web开发中，虽然Ajax一词可能不如早期那样频繁提及，但其背后的异步通信原理仍然被广泛采用，例如通过Fetch API或使用各种JavaScript框架（如React、Vue、Angular等）中的封装API来简化异步请求的处理。

avatar
文章
阅读
粉丝