前言

什么是ajax？

Ajax，全称为Asynchronous JavaScript and XML（异步JavaScript与XML），是一种网页开发技术，它使得网页能够在不重新加载整个页面的情况下与服务器交换数据并局部更新页面内容。这一技术极大地提高了用户体验，因为它让用户感觉网页响应更快、交互更流畅。

一种异步的创建交互式网页的技术(允许网页在不完全刷新的情况下与服务器交换数据并更新部分内容)。

关键特性：

异步（Asynchronous） ：这是Ajax的核心，意味着在执行Ajax请求时，用户仍然可以继续与网页的其他部分交互，而不会因为等待服务器响应而造成页面"冻结"。
后台数据交换：Ajax使得浏览器在后台与服务器进行数据交换，这些数据可以是XML、JSON、HTML或者其他格式，但JSON因其轻量和易于解析的特性，现已成为最常用的格式。
局部更新：通过JavaScript操作DOM（文档对象模型），可以只更新页面的部分内容，而不是整个页面重绘，提高了效率和用户体验。
技术组合：Ajax并不是一个新的编程语言，而是利用现有的Web技术（如JavaScript、XML、HTML、CSS以及XMLHttpRequest对象）的一种新方式。

工作流程：

用户交互：用户触发一个事件，比如点击按钮。
JavaScript调用：浏览器中的JavaScript代码创建一个XMLHttpRequest对象，并向服务器发送一个请求。
服务器处理：服务器接收到请求后处理数据，可能查询数据库，然后返回响应，这个响应通常是JSON或XML格式的数据，也可以是HTML片段。
客户端接收：JavaScript接收到来自服务器的响应，并通过DOM操作来更新页面的指定部分，展示新的数据或结果。

正文

通过连接后端来爬取电影数据，后端接口：https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get，设置一个按钮来通过点击该按钮实现将爬取到的电影数据通过无序列表展示出来。

html

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <button id="btn">获取电影列表</button>
    <ul id="list">

    </ul>
</body>
</html>

readyState为ajax的状态，不同的数值为不同的状态

0 -- xhr刚创建
1 -- open执行
2 -- 请求发送出去，响应头被接收
3 -- 响应体正在解析
4 -- 解析完成

status为状态码

1xx（信息性状态码） : 表示接收的请求正在处理。例如，100 Continue 表示请求可以继续。
2xx（成功状态码） : 表示请求已成功被服务器接收、理解，并接受。最常见的如：
- 200 OK: 请求成功，服务器已成功处理请求。
- 201 Created: 请求成功并且服务器创建了新的资源。
- 204 No Content: 服务器成功处理了请求，但不需要返回任何实体内容。
3xx（重定向状态码） : 需要客户端采取进一步的操作才能完成请求。例如：
- 301 Moved Permanently: 请求的资源已永久移动到新位置。
- 302 Found: 临时重定向，资源临时位于其他位置。
- 304 Not Modified: 资源未修改，可以直接使用缓存。
4xx（客户端错误状态码） : 表示客户端的请求有误。例如：
- 400 Bad Request: 服务器无法理解请求的格式。
- 401 Unauthorized: 请求要求用户的身份认证。
- 403 Forbidden: 服务器理解请求客户端的请求，但是拒绝执行此请求。
- 404 Not Found: 服务器无法找到请求的资源。
5xx（服务器错误状态码） : 表示服务器在处理请求的过程中发生了错误。例如：
- 500 Internal Server Error: 服务器遇到了不知道如何处理的情况。
- 502 Bad Gateway: 作为网关或代理工作的服务器从上游服务器收到了无效的响应。
- 503 Service Unavailable: 服务器目前无法使用（由于超载或停机维护）。

XMLHttpRequest

思路：

通过id来获取btn的按钮元素，并将其命名为btn，为其绑定一个监听事件，当点击该按钮的时候，触发回调函数；
通过id来获取ul的列表元素，实现将爬取到的电影数据通过li显示在ul里；
在回调函数中，通过new XMLHttpRequest()来创建一个ajax实例xhr；
通过给xhr配置了请求的方法（GET）、请求的URL(上述给出了后端接口)以及是否异步执行（true表示异步）；
xhr发送Ajax请求到服务器；
xhr调用XMLHttpRequest对象的onreadystatechange事件绑定一个事件处理函数来监听请求的过程，该函数会在请求状态改变时被调用；
判断xhr的状态码是否为4，为4则表示解析完成，再判断状态码status是否为200；
满足上述条件后，通过使用JSON.parse(xhr.responseText)解析从服务器得到的响应文本为JavaScript对象，并获取里面的movieList对象；

xhr.responseText为：

JSON.parse(xhr.responseText)为：

movieList为：

通过遍历movieList对象并创建li，将其的innerText设置为获取到的电影的名字和演员，再将li加入ul中。

ini 复制代码

 <script>
      let btn = document.getElementById('btn');
      let ul = document.getElementById('list'); 
       btn.addEventListener('click',() => {
        // 朝一个接口发请求，获取到数据展示在页面上

        let xhr = new XMLHttpRequest(); // 创建一个ajax实例
        xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get', true); // 配置发送的参数  true --> 开启异步
        xhr.send();
        xhr.onreadystatechange = () => { // 监听请求的过程
           if (xhr.readyState == 4 && xhr.status == 200){ // 拿到了后端返回的数据
               // 展示在页面上
               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);
            }
           }

        }
      })
    </script>

jquery

导入jquery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

思路：

通过id来获取btn的按钮元素，并将其命名为btn，为其绑定一个监听事件，当点击该按钮的时候，触发回调函数；
通过id来获取ul的列表元素，实现将爬取到的电影数据通过li显示在ul里；
在回调函数中，通过$.ajax({ ... }) 使用jQuery的$.ajax方法来发起Ajax请求；
设置请求的URL地址，上面给出了后端接口，method为设置请求的方法为GET，是一个获取数据的请求， data 设置发送给服务器的数据对象，这里指定的username和age，会在检查栏的网络中的载荷中显示出来，实际上在这个GET请求中，这些数据并不会以这种方式附加到URL上。在实际应用场景中，如果是POST请求或需要在URL中附加查询参数的GET请求，这部分会有不同的处理方式；
success是一个回调函数，当Ajax请求成功完成（HTTP状态码为200系列）时被调用，res参数是服务器返回的数据，通常是一个JSON对象； res为：

获取代码解析返回的JSON对象中的movieList数组。
通过循环遍历movieList数组，为每个电影创建一个<li>元素，并设置其文本内容为电影名和演员，然后将这些<li>元素追加到页面上的无序列表ul中。