likes
comments
collection
share

AJAX 简介与实现详解

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

简介

AJAX ，全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种网页开发技术，允许在不重新加载整个网页的情况下，通过JavaScript异步地与服务器交换数据并局部更新页面内容。这意味着用户可以与网页进行交互，看到部分内容变化，而无需等待整个页面重新加载。总结就是一句话：可以在不刷新页面的情况下更新页面的内容。

AJAX

AJAX的作用在于实现浏览器和服务器之间的异步数据交换，它就像是一个中间人一样帮助浏览器向服务器段发送一个http请求数据，然后服务器通过后端代码调用数据库在返回数据给浏览器。如下图：

AJAX 简介与实现详解

AJAX的实现步骤（这里我们取一个获取电影列表实例来解释）

  1. 获取页面元素：
let btn=document.getElementById("btn");
let ul=document.getElementById("ul");
  1. 添加点击事件监听器：
btn.addEventListener("click",()=>{...}

为按钮添加一个点击事件监听器，当按钮被点击时执行匿名函数内的代码。

  1. 创建 AJAX 请求实例：
let xhr = new XMLHttpRequest();

创建一个新的XMLHttpRequest对象，用于发送异步HTTP请求。

  1. 配置请求：
xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',true)

配置请求的类型（GET）、请求的URL及设置请求为异步模式。这里我们可以通过在open()方法中的第三个参数后面添加true或false来让他实现同步或者异步

  1. 发送请求：
xhr.send()

发送GET请求到指定的URL。

  1. 监听请求状态变化：
xhr.onreadystatechange=()=>{...}

设置一个事件处理器，当请求的状态改变时执行。这里监控的是请求的生命周期变化。

  1. 处理响应：
 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}`      
         ul.appendChild(li)
      }
  }

  • 当xhr.readyState == 4（请求完成）并且xhr.status == 200（请求成功）时，执行响应处理逻辑。

    • console.log(JSON.parse(xhr.responseText)) 打印出从服务器返回的原始文本数据，经过JSON解析后的对象。

    • 解析得到的电影列表const movieList = JSON.parse(xhr.responseText).movieList。

    • 使用for循环遍历电影列表，对于每一个电影：

      • 创建一个新的<li>元素。
      • 将电影名称和评分信息设置为<li>的文本内容。
      • 将这个新的<li>元素添加到无序列表ul中。

全部代码

<!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}`      
                        ul.appendChild(li)
                    }
                }
            }
        })
    </script>
</body>
</html>

可以看一下这个案例的实现效果：

AJAX 简介与实现详解 当我们点击获取电影列表，浏览器会通过我们给的那个url链接下载一个movieList：

AJAX 简介与实现详解

然后通过我们处理响应的那段代码可以将我们拿到的json数据处理成一个Array类型的数据：

AJAX 简介与实现详解

不过如果让我们每次都写这么多代码才能实现，那我们肯定是不愿意的，那我们就可以使用一些工具了。

jquery

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        function getData() {
    // 使用$.ajax配置请求参数
    $.ajax({
        // 请求的URL地址
        url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
        // 请求的方法类型，这里是GET
        method: 'GET',
        // 请求携带的数据，以对象形式提供
        data: {
            name: 'pp',       // 示例参数：用户名
            age: 18           // 示例参数：年龄
        },
        // 请求成功后的回调函数，data参数包含服务器响应的数据
        success: function(data) {
            // 在控制台打印返回的全部数据，便于调试
            console.log(data);
            // 从返回的数据中提取movieList数组
            const movieList = data.movieList;
            // 遍历movieList数组，为每个项目创建一个<li>元素并附加到页面的<ul>元素中
            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>

可能代码还有点多，这里还有一个方法

Fetch

fetch 是es6新增加的，是一个现代的、基于 Promise 的 Web API，用于发起网络请求。

<button onclick="getData()">获取数据</button>
    <ul id="ul"></ul>
    <script>
        function getData(){
            fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
            .then(res=>{
                return res.json()
                .then((data)=>{
                    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>

总结

AJAX 的核心是利用 XMLHttpRequest 对象发送和接收数据，通过监听状态变化和处理响应数据来更新页面。使用现代工具如 jQuery 或 Fetch API 能够简化和优化 AJAX 请求的处理流程，提升开发效率和用户体验。

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