AJAXAJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。

AJAX（Asyn JavaScript and XML） 是一种用于创建快速动态网页的技术。 AJAX 的核心是允许在不重新加载整个网页的情况下，与服务器进行数据交换。这意味着网页可以在后台与服务器通信，获取新的数据，然后仅更新页面的部分内容，而不是重新加载整个页面，从而提供了更流畅和响应迅速的用户体验。

今天我们来创建个AJAX实例：

jQuery方法：

<!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>
    <ul></ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        function getData() {
            $.ajax({
                url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
                method: 'GET',
                data:{
                    name: 'Ro9nin',
                    age: 18
                },
                success: function(data){
                    console.log(data);
                }
            })
        }
    </script>
</body>
</html>

这段HTML代码展示了如何使用jQuery库来发起一个异步的HTTP GET请求（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>
    <!-- 引入jQuery库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>

这部分是HTML文档的头部信息，定义了文档类型、语言、字符集、视口设置等元信息。<script>标签引入了jQuery库的CDN链接，版本为3.7.1，这使得在后续的JavaScript代码中可以使用jQuery提供的功能。

<body>
    <!-- 定义按钮，点击时触发getData函数 -->
    <button onclick="getData()">获取电影数据</button>
    <ul></ul> <!-- 列表用于展示数据 -->
</body>

这是HTML文档的主体部分，包含了一个按钮和一个无序列表。按钮有一个onclick属性，当用户点击按钮时，会执行getData()函数。列表元素<ul>是用于将来显示从服务器获取的电影数据的容器。

<script>
    function getData() {
        /* 使用jQuery发起AJAX请求 */
        $.ajax({
            url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList', 
            // 请求的URL
            method: 'GET', // HTTP方法
            data: { // 发送给服务器的数据
                name: 'Ro9nin',
                age: 18
            },
            success: function(data){ // 成功回调函数
                console.log(data); // 打印响应数据
            }
        });
    }
</script>

这部分是一个内联的<script>标签，包含了JavaScript代码。getData()函数在被调用时，使用jQuery的$.ajax()方法发送一个异步GET请求到指定的URL。

url选项指定了请求的目标URL，这里是https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList，用于返回电影列表数据。
method选项指定了请求的方法，这里是GET方法。
data选项包含了要发送给服务器的查询字符串参数，例如name和age。
success选项定义了一个回调函数，当请求成功完成时执行。这里只是简单地将返回的数据打印到控制台。当AJAX请求成功时，服务器返回的数据会被传递给success回调函数中的data参数，然后使用console.log()将其输出到浏览器的控制台中，便于开发者查看和调试。

原生JS中的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);
            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)
                    }
                    
                }
            }
        })
    </script>
</body>
<html>

这段HTML代码展示了如何使用原生JavaScript和XMLHttpRequest对象来发起一个异步的HTTP GET请求（通常称为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>

这是HTML文档的基本结构，其中包含了一个按钮和一个无序列表。按钮有一个id属性值为btn，列表的id属性值为ul。

<script>
    // 获取DOM元素
    let btn = document.getElementById('btn');
    let ul = document.getElementById('ul');

这段代码通过document.getElementById方法获取了页面上ID为btn和ul的DOM元素，并将它们分别存储在变量btn和ul中。

// 添加点击事件监听器
btn.addEventListener('click',() =>{
            // 朝后端发一个请求，获取到需要的数据
            let xhr = new XMLHttpRequest();// 创建了一个ajax实例
           // 初始化请求 xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',true);
            // 发送请求
            xhr.send()
            // 设置onreadystatechange处理函数
            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) // 将列表项添加到列表中
                    }
                    
                }
            }
        })

这里使用addEventListener方法给按钮添加了一个点击事件监听器。当按钮被点击时，会执行一个箭头函数（()=>{...}）。

在事件处理函数内部，首先创建了一个新的XMLHttpRequest对象，该对象用于发送异步请求。

使用xhr.open方法初始化请求，指定了请求的类型（GET）、目标URL和是否异步（true）。

调用xhr.send方法发送请求，对于GET请求，此方法不需要参数。

接下来，设置了一个onreadystatechange事件处理器，该处理器会在XMLHttpRequest对象的状态改变时被调用。

在事件处理器中，检查了xhr.readyState是否为4（表示请求已完成）且xhr.status是否为200（表示请求成功）。

如果请求成功，使用JSON.parse方法解析服务器返回的xhr.responseText，并将结果赋值给movieList变量。

循环遍历movieList数组，为每一个电影创建一个新的li元素，设置其文本内容为电影名称和评分，并将这些li元素追加到ul元素中。

fetch方法：

<!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 src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        function getData() {
            fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
           .then((res) => {
                return res.json()
            })
            .then((data) =>{
                console.log(data);
            })
        }
    </script>
</body>
</html>

这段代码展示了如何使用现代浏览器的Fetch API来发起一个异步HTTP GET请求，以获取数据，并使用Axios库作为备用方案（尽管Axios在此示例中并未被调用）。下面是代码的详细解释：

<!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>

这是标准的HTML文档声明和头部信息，包括文档类型、语言、字符集和视口设置，确保页面在各种设备上都能适配。

<body>
    <button onclick="getData()">获取数据</button>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        function getData() {
            fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
           .then((res) => {
                return res.json()
            })
            .then((data) =>{
                console.log(data);
            })
        }
    </script>
</body>

这部分定义了一个按钮，当按钮被点击时，会触发getData函数的执行。getData函数负责发起网络请求获取数据。

通过<script>标签引入了Axios库，这是一个基于Promise的HTTP客户端，用于浏览器和Node.js。

<script> 脚本定义了getData函数，它使用Fetch API来发起一个GET请求。

fetch函数接受一个URL作为参数，发起一个异步请求。在本例中，请求的目标URL是https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList，这通常是一个模拟的API端点，用于返回电影列表数据。
.then((res) => { return res.json() })是一个Promise链中的第一个.then方法，它等待fetch请求完成。一旦请求成功，它会接收到一个Response对象（res），并调用res.json()方法将响应体转换成JSON格式。res.json()也是一个Promise，它将在解析完成后解析为JSON数据。
第二个.then((data) => { console.log(data); })是在JSON数据解析成功后的下一个Promise链上的.then方法。它接收解析后的JSON数据（data），并将其打印到控制台上，以便于调试和查看数据内容。

Axios方法：

<!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 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>
</html>

这段代码使用了Axios库来发起一个异步的HTTP GET请求，以获取数据并处理响应。下面是详细的代码解析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

这部分是HTML文档的头部，包含了文档类型、语言、字符集和视口元信息。<script>标签用于引入Axios库，这是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境，简化了HTTP请求的发送和响应的处理。

<body>
    <button onclick="getData()">获取数据</button>
        <script>
        function getData() {
            // 使用axios发起GET请求
            axios.get('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
            .then((res) => { // 处理响应
                console.log(res.data); // 打印数据
            });
        }
    </script>

在文档的主体部分，有一个按钮，当点击这个按钮时，会触发getData函数的执行，从而发起一个数据获取请求。

在内部的JS代码中定义了getData函数。函数中使用了Axios的axios.get方法来发送一个GET请求。

axios.get的第一个参数是请求的URL，即'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList'，这是一个模拟的API端点，用于返回电影列表数据。
axios.get返回一个Promise，当请求成功完成时，Promise会被解析为响应数据。我们使用.then方法来处理这个Promise，.then方法接受一个回调函数，这个函数在Promise解析时被调用。
在.then的回调函数中，参数res是Axios的响应对象，它包含了服务器响应的所有信息，包括状态码、头部和数据。res.data是服务器返回的实际数据。

这些示例展示了如何使用不同的技术来实现AJAX请求，包括jQuery、原生XMLHttpRequest、Fetch API以及Axios库。每种方法都有其适用场景和优势，选择哪一种取决于具体项目的需求和个人偏好。