likes
comments
collection
share

石器时代到新时代，AJAX的前世今生

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

AJAX，异步的Javascript和XML，能够不用加载整个页面的情况下，更新部分网页内容的技术，提供了更流畅、快速的网页交互体验，即使它的名字中有包含XML，但是现在普遍用JSON格式来交换数据。

目前，比较流行的库就是axios、jQuery还有所谓的官方打造的fetch API，为什么会出现这么多第三方库呢？问就是官方“太懒”......接下来，我们一起聊一聊“从钻木取火到用Zipper打火机”。

一、Ajax的关键技术

  • 异步通信：它的核心是异步处理，这就代表着用户可以继续与用户交互的同时，脚本在后台发送请求、接收响应，而不用等待这个过程的完成。
  • XMLHttpRequest对象：这是实现Ajax功能的关键JavaScript对象，用于在浏览器和服务器之间异步传输数据。虽然名字中包含XML，但实际上Ajax可以传输任何形式的数据，包括JSON、HTML片段等。
  • JavaScript：用于操作DOM（文档对象模型），基于用户的事件触发Ajax请求，并处理从服务器返回的数据。

接下来，我们来体验一下使用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.innerHTML = `${movieList[i].nm}--${movieList[i].star}`   //moveList[i].nm+'--'+moveList[i].star
                        ul.appendChild(li)
                    }
                }
            }
        })
    </script>
</body>

</html>
  • 在js中，只给我们提供了一个，也是唯一一个能与后端交互数据的对象XMLHttpRequest，第三方库以及Fetch方法，都是在这个对象上，进行封装的，接下来，我们来仔细聊聊它的实现过程，其他封装好的库和方法，我们只要会使用就OK了。
  1. 我们在btn按钮上添加了监听时间，这也是ajax常常应用的场景，form表单的提交，动态的加载内容等.....
  2. 触发click事件，调用箭头函数，函数内部创建一个ajax实例xhr，用于与后端进行数据的交互。
  3. 调用open方法，传入三个参(Http请求方法，URL,是否异步)，然后send方法发送请求
  4. 实时检测每个阶段，请求发送成功的话，xhr.readyState的值为4，xhr.status的值为200，这是协议内定好的状态码，然后再往html中添加DOM元素
  5. 一个动态加载的前后端数据交互的小demo就完成了

值得注意的是，在open方法中，我们进行了异步的处理，同步操作会阻塞用户界面的更新，直到我们数据交互的完成，无法及时的响应用户的交互，极大的造成了用户体验不佳。异步请求允许这些耗时的任务子啊后台进行，提高了整体的流畅性和响应速度。

在浏览器的开发者模式可以查看网络请求的状态

石器时代到新时代，AJAX的前世今生

二、HTTP库axios

直接提供了一个简洁的API，让GET、POST等类型的请求变得简单直观。

<!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);
            })
        }
    </script>
</body>
</html>

石器时代到新时代，AJAX的前世今生 发送请求后，.then调用回调函数，传入参数为请求返回的结果，.then方法让我们能够以非阻塞的方式处理异步操作的结果，使得代码更加清晰和易于维护。

三、JavaScript库jQuery

jQuery内置了对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 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',
               success:function(data){
                console.log(data);
               },
            })
        }
    </script>
</body>
</html>

在jQuery中$可以用来发起AJAX请求，如$.ajax({...})、$.get()、$.post()等，使得异步数据交互变得简单易行。在这里，success调用回调函数。

四、"官方的"fecth

兄弟们，dddd，话不多说，仔细揣摩代码找不同......

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

尽管随着原生JavaScript的进步和现代框架（如React、Vue等）的兴起，这些第三方库和AIP的封装，它们见证着历史，XMLHttpRequest的引入，彻底改变了Web应用的开发模式，开启了现代Web应用开发的新篇章，使得JavaScript成为处理前后端交互、构建复杂Web应用不可或缺的工具。如今我们学习这些，可能不会应用在工作开发中，但它会帮助我们更好的理解和掌握这些技术的更新迭代，着实让人回味无穷。

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