Ajax 介绍

1. 什么是 Ajax

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它通过在后台与服务器进行小规模的数据交换，实现异步更新网页的部分内容，而无需重新加载整个页面。这种异步性质使得用户可以在不打断其余网页功能的情况下与网页交互。

Ajax的核心思想是利用JavaScript来实现异步通信，这样网页可以向服务器发送请求并在后台获取数据。这一过程是无需干扰用户体验的，因为页面的其余部分可以继续运行。

2. Ajax 关键概念和技术

XMLHttpRequest对象（XHR） ：这是在JavaScript中使用的核心对象，用于与服务器进行通信。XHR对象可以发送请求并接收服务器的响应，从而实现数据的异步传输。
服务器端技术：服务器端需要提供一些接口或服务来响应Ajax请求。常见的服务器端技术包括PHP、Node.js、Python等，它们可以处理来自客户端的请求并返回数据。
数据交换格式：虽然名为Asynchronous JavaScript and XML，但实际上您可以使用各种数据格式进行通信，如JSON（JavaScript Object Notation）、HTML或纯文本。

3. Ajax 的工作流程

①. 用户触发事件：工作流程的起点是用户在网页上执行了某些操作，例如点击按钮、填写表单或滚动页面等。这些操作可能会触发需要向服务器请求数据或更新页面内容的需求。

②. 创建 XMLHttpRequest 对象：当用户触发了事件，JavaScript 代码会创建一个 XMLHttpRequest 对象（XHR），这是实现 Ajax 的核心对象之一。可以通过 new XMLHttpRequest() 来创建此对象。

③. 初始化请求：一旦创建了 XMLHttpRequest 对象，就需要调用其 open() 方法来初始化请求。在这个方法中，您可以指定请求的类型（GET、POST等）、URL 和是否使用异步模式（true 或 false）等参数。

④. 发送请求：一旦初始化了请求，就可以通过调用 XMLHttpRequest 对象的 send() 方法来发送请求。如果是 GET 请求，则通常不需要发送数据；而对于 POST 请求，则可以在 send() 方法中传递需要发送的数据。

⑤. 等待服务器响应：发送请求后，浏览器会继续执行其他 JavaScript 代码，而不会阻塞页面。同时，XMLHttpRequest 对象会等待服务器的响应。

⑥. 处理服务器响应：一旦服务器响应到达，XMLHttpRequest 对象会触发相应的事件（如 onreadystatechange 事件），开发人员可以通过监听这些事件来处理服务器的响应。在响应中，通常包含了所请求的数据或其他相关信息。

⑦. 更新页面内容：一旦接收到服务器的响应数据，可以通过 JavaScript 来更新页面的相应部分，这样用户就可以看到最新的数据或更新的内容，而无需重新加载整个页面。

⑧. 完成请求：当请求完成后，XMLHttpRequest 对象的 readyState 属性会变为 4，表示请求已完成。此时可以执行一些清理工作或者处理后续操作。

这就是 Ajax 的基本工作流程。通过这种方式，可以实现网页的异步更新，提高用户体验，并在不影响其他网页功能的情况下与服务器进行交互。

4. readyState

readyState 是 XMLHttpRequest 对象的一个属性，用于表示请求的状态。当向服务器发送请求时，readyState 属性会随着请求的不同阶段而变化，具体取值如下：

①. 0（UNSENT） ：表示 XMLHttpRequest 对象已经创建，但尚未调用 open() 方法。即刚刚创建了 XMLHttpRequest 对象。

②. 1（OPENED） ：表示 open() 方法已经被调用，但尚未调用 send() 方法。即已经初始化了请求，但尚未发送。

③. 2（HEADERS_RECEIVED） ：表示 send() 方法已经被调用，并且服务器已经返回响应头部。此时 responseText 属性包含部分数据，但是响应体的数据还未接收完全。

③. 3（LOADING） ：表示服务器已经返回了响应头部和部分数据，但是响应体的数据还在接收中。此时 responseText 属性包含部分数据，但是响应体的数据还在解析中。

④. 4（DONE） ：表示请求已经完成，且响应已经完全接收。此时 responseText 属性包含了完整的响应数据。

通过检查 readyState 属性的值，可以确定请求的当前状态，从而实现更精细的控制和处理。例如，在 readyState 变为 4 时，可以处理接收到的响应数据，更新页面内容等。

5. status

status 属性是 XMLHttpRequest 对象的一个属性，用于表示 HTTP 请求的状态码。当向服务器发送请求后，服务器会返回一个 HTTP 状态码作为响应，而这个状态码可以通过 status 属性来获取。

常见的 HTTP 状态码包括：

2xx：表示成功处理请求，例如 200（OK）表示请求成功。
3xx：表示需要进一步的操作以完成请求，例如 301（Moved Permanently）表示请求的资源已被永久移动到新位置。
4xx：表示客户端错误，例如 404（Not Found）表示请求的资源不存在。
5xx：表示服务器错误，例如 500（Internal Server Error）表示服务器在执行请求时发生了错误。

通过检查 status 属性的值，可以确定请求的结果状态。例如，如果 status 的值为 200，则表示请求成功；而如果为 404，则表示请求的资源未找到。

例如当请求成功时，status值为200：

在处理 Ajax 请求时，通常会根据 status 属性的值来判断请求是否成功，并根据实际情况采取相应的处理措施。

Ajax 简单应用

接下来我们一起看 Ajax 的代码示例，分别运用 XMLHttpRequest、jQuery、fetch 和 axios 四种方式实现与服务器的通信和数据交换。数据交换为一部分的电影列表信息。

HTML 结构

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

一个按钮（id 为 btn）用于触发 Ajax 请求。
一个空的无序列表（id 为 list），用于展示从服务器获取的电影列表。

XMLHttpRequest

let btn = document.getElementById('btn');
let ul = document.getElementById('list');

btn.addEventListener('click', () => {
    // 创建一个Ajax实例
    let xhr = new XMLHttpRequest(); 
    // 配置发送的参数
    xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get', true);
    xhr.send();
    // 监听请求的过程
    xhr.onreadystatechange = () => {
        // 检查请求的状态
        if (xhr.readyState == 4 && xhr.status == 200) { 
            // 解析JSON格式的响应数据
            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;
                ul.appendChild(li);
            }
        }
    }
})

document.getElementById获取按钮和列表的 DOM 元素
添加一个点击事件监听器到按钮上，当按钮被点击时，会触发一个 Ajax 请求。
创建一个 XMLHttpRequest 对象。
使用 open 方法配置请求的类型（GET）和目标 URL（电影列表的 API）。
调用 send 方法发送请求。
使用 onreadystatechange 监听请求状态的变化：

①. 当 readyState 变为 4 且 status 为 200 时，表示请求成功，且服务器返回了正确的响应。

②. 解析响应文本，将其转换为 JavaScript 对象。

③. 遍历电影列表，并将每个电影的信息（名称和主演）添加到页面上的列表中。

通过这段代码，你可以在点击按钮时从指定的 API 获取电影列表，并将电影名称和主演信息显示在页面上。这是一个使用 Ajax 实现异步数据加载并更新页面内容的基本示例。

页面更新后：

jQuery

首先需要引入 JQuery 库

// 首先在头部引入JQuery库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

js 部分：

let btn = document.getElementById('btn');
let ul = document.getElementById('list');

btn.addEventListener('click', () => {
    $.ajax({
        url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get',
        type: 'get',
        data: {
            age: 18,
            name: '张三'
        },
        success: function (res) {
            console.log(res);
            const movieList = res.movieList;

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

$.ajax() 方法接受一个包含配置信息的对象作为参数：

① url：请求的 URL，即电影列表的 API 地址。

② type：请求的类型，这里是 GET 请求。

③ data：要发送到服务器的数据，这里是一个对象 {age: 18, name: '张三'}。

④ success：请求成功后的回调函数，接收服务器返回的数据作为参数 res。

⑥ 在成功回调函数中，解析响应数据并将电影列表信息添加到页面的列表中。

通过这段代码，可以实现通过点击按钮，使用 jQuery 发送 Ajax 请求获取电影列表，并将列表信息展示在页面上的功能。jQuery 提供了简洁而强大的 API，使得处理 Ajax 请求变得更加方便和简单。

页面更新后：

fetch

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

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

        // 给按钮添加点击事件监听器
        btn.addEventListener('click', () => {
            // 使用 fetch API 发送 GET 请求
            fetch("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?username='张三'&age=18")
            .then((res) => {
                // 当请求成功后，返回响应对象并将其解析为 JSON 格式
                return res.json();
            })
            .then((data) => {
                // 在第二个 then 中处理解析后的 JSON 数据
                // console.log(data);
                const movieList = data.movieList;
                for (let i = 0; i < movieList.length; i++) {
                     const li = document.createElement('li');
                     li.innerText = movieList[i].nm + '--' + movieList[i].star;
                     ul.appendChild(li);
                 }
            })
        })
    </script>
</body>

在回调函数中，使用 fetch API 发送了一个 GET 请求到指定的 URL。
使用 then() 方法处理 Promise 对象：
- 在第一个 then() 中，当请求成功后，返回响应对象，并将响应体解析为 JSON 格式。
- 在第二个 then() 中，处理解析后的 JSON 数据。

这段代码演示了使用 fetch API 发送 Ajax 请求，并在请求成功后处理响应数据。fetch API 是原生 JavaScript 提供的一种现代化的网络请求方法，使用起来更加简洁和方便，可以替代传统的 XMLHttpRequest 对象。

页面更新后：

axios

首先引入 axios 库：

// 在头部引入 axios 库
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>

js部分：

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

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

        btn.addEventListener('click', () => {
            axios.get("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?username='张三'&age=18")
            .then((response) => {
                console.log(response.data);
                const movieList = response.data.movieList;

                for (let i = 0; i < movieList.length; i++) {
                    const li = document.createElement('li');
                    li.innerText = movieList[i].nm + '--' + movieList[i].star;
                    ul.appendChild(li);
                }
            })
            .catch((error) => {
                console.error('Error fetching data: ', error);
            });
        });
    </script>
</body>

在回调函数中，使用 Axios 的 axios.get() 方法发送 GET 请求到指定的 URL。
使用 .then() 方法处理 Promise 对象，当请求成功后，响应的数据可以通过 response.data 获取。
将响应的数据解析并添加到页面的列表中。
使用 .catch() 方法捕获请求过程中的任何错误，并在控制台输出错误信息。

这段代码实现了通过 Axios 库发送 Ajax 请求，并在成功获取响应后将响应的数据解析并添加到页面的列表中。Axios 提供了简单而强大的 API，使得发送和处理 Ajax 请求变得更加简单和方便。

页面更新后：

四种方式分析与比较

XMLHttpRequest：

是原生 JavaScript 提供的对象，用于向服务器发送 HTTP 请求和接收服务器的响应。
使用相对繁琐，需要手动处理各个阶段的状态变化。
灵活性高，适用于需要精细控制的情况，但代码量较多。

jQuery：

是一个流行的 JavaScript 库，简化了 JavaScript 的开发，提供了丰富的功能和简洁的语法。
提供了简洁的 API，封装了 XMLHttpRequest 对象，使得发送 Ajax 请求更加简单和方便。
适用于需要兼容旧版浏览器或者想要快速实现功能的情况，但相对于其他方式，文件体积较大。

fetch：

是原生 JavaScript 提供的新的网络请求 API，使用 Promise 实现异步操作，语法更加现代化。
提供了简洁清晰的语法，并且支持流式操作，但需要手动处理 Promise 的状态。
适用于现代化的前端开发，但不支持跨域请求携带 cookie，且在 IE 浏览器上需要使用 polyfill。

axios：

是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境。
提供了简洁的 API，易于使用，并且具有强大的功能，如拦截请求和响应、转换请求和响应数据等。
支持跨域请求携带 cookie，并且有大量的社区支持和文档资料，但相对于其他方式，需要额外引入第三方库。

综上所述，选择哪种方式取决于个人偏好、项目需求以及目标浏览器的兼容性要求。XMLHttpRequest 是原生方式，适用于需要精细控制的情况；jQuery 提供了简单易用的 API，适用于快速实现功能或兼容旧版浏览器的情况；fetch 和 axios 是现代化的方式，适用于现代化的前端开发，但需要考虑兼容性和额外的依赖。

总结

以上介绍了使用四种不同的方式来发送 AJAX 请求：XMLHttpRequest、jQuery、fetch 和 axios。XMLHttpRequest 是原生 JavaScript 提供的对象，使用相对繁琐，但灵活性高；jQuery 提供了简洁的 API，适用于快速实现功能或兼容旧版浏览器；fetch 是原生 JavaScript 提供的新的网络请求 API，语法更加现代化，但需要手动处理 Promise 的状态；而 axios 是基于 Promise 的 HTTP 客户端，提供了简洁易用的 API，并具有强大的功能。选择哪种方式取决于个人偏好、项目需求以及目标浏览器的兼容性要求。

如果你觉得有学到东西，希望点赞收藏。

一起来了解Ajax：构建交互式网页的异步技术

Ajax 介绍

1. 什么是 Ajax

2. Ajax 关键概念和技术

3. Ajax 的工作流程

4. readyState

5. status

Ajax 简单应用

XMLHttpRequest

jQuery

fetch

axios

四种方式分析与比较

总结