likes
comments
collection
share

JS中的AJAX，异步创建交互式网页的技术

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

axync javascript and XML

一种异步的创建交互式网页的技术，可以在不刷新页面的情况下更新网页内容

  1. 无需重新加载页面：AJAX允许在不重新加载整个页面的情况下与服务器进行通信，这意味着用户可以在页面上进行操作，而无需等待页面刷新，从而获得更流畅的体验。
  2. 动态内容更新：通过AJAX，可以动态地向服务器请求数据，并在不刷新页面的情况下更新页面的特定部分。这使得用户可以实时看到更新的内容，而不需要重新加载整个页面。

许多网站都有着使用例子，这里看看咱们本网站的例子 JS中的AJAX，异步创建交互式网页的技术

点击在红色框框内的内容，会发现不重新加载整个页面的情况下也可以使得用户可以实时看到更新的内容

前端与后端基本的信息交互可以简单理解为下图

JS中的AJAX，异步创建交互式网页的技术

其中前端发送给后端的http请求便是今天要介绍的：前端通过AJAX技术发送一个请求使数据能够进行交互

开始实践操作

XMLHttpRequest()

先使用最原始的方法来进行构建

创建一个按钮，并给它添加一个点击事件

<!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')//获取ul元素
        btn.addEventListener('click',() => {
           
        })
    </script>
</body>
</html>

接着朝后端发一个请求，获取到所需要的数据，而原生的JS属性封装了一个很好用的方法XMLHttpRequest()，是一个内置的构造函数其创建了一个按键ajax实例，而这个函数又内置了一些方法

xhr.open方法配置了即将发出的HTTP请求：

  • 'GET'：请求类型，这里是GET请求，用于从服务器检索数据。
  • 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList'：请求的URL，即接口地址。
  • true：表示此请求为异步请求。如果是false，则请求为同步，这将阻塞浏览器直到请求完成。

xhr.send()方法实际发送HTTP请求到服务器。

<script>
        let btn = document.getElementById('btn')
        let ul = document.getElementById('ul')//获取ul元素
        btn.addEventListener('click',() => {
            let xhr = new XMLHttpRequest() //创建了一个按键ajax实例
            xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',true) 
            //open方法用来设置请求的参数 /http为接口地址  ture代表异步请求/false代表同步请求
            xhr.send()
           
        })
    </script>

这时测试一下会看到每点击一次，浏览器都会发送一次HTTP请求并在服务器接收到数据

JS中的AJAX，异步创建交互式网页的技术

而在我们前端发送请求给后端，后端会再返回数据xhr.onreadystatechange = () => {会监听请求状态变化，这个事件处理程序会在xhr对象的readyState属性改变时被调用。

  1. readyState 0 (未初始化): 请求尚未初始化。XMLHttpRequest对象已经创建，但是open()方法还没有被调用。
  2. readyState 1 (载荷): 请求已经建立，但是还没有发送到服务器。open()方法已经被调用，但是send()方法还没有被调用。
  3. readyState 2 (已发送): 请求已经发送到服务器，但服务器还未做出响应。send()方法已经被调用，等待服务器响应。
  4. readyState 3 (正在接收): 服务器已经开始响应，但响应尚未完成。响应体（response body）正在加载中，这时可以通过responseText或responseXML属性获取部分数据，但数据可能尚不完整。
  5. readyState 4 (完成): 请求已完成，且响应已就绪。这表示请求已成功或失败，响应已经完全接收完毕。此时可以访问所有的响应信息，包括HTTP状态码（通过status属性）和响应内容（通过responseText或responseXML属性）。无论请求成功还是失败（例如404错误），只要服务器响应完成，readyState就会变为4。

监听到readyState 4 (完成)且服务器状态码为200时（即已经数据已经传输到浏览器上）时开始解析响应数据、遍历并渲染数据

    <script>
        let btn = document.getElementById('btn')
        let ul = document.getElementById('ul')//获取ul元素
        btn.addEventListener('click',() => {
            let xhr = new XMLHttpRequest() //创建了一个按键ajax实例
            xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',true) 
            //open方法用来设置请求的参数 /http为接口地址  ture代表异步请求/false代表同步请求
            xhr.send()
            xhr.onreadystatechange = () => {   //检测请求的每个阶段
                if(xhr.readyState === 4 && xhr.status === 200){
                    console.log(JSON.parse(xhr.responseText))
                }
            }
        })
    </script>

使用JSON.parse(xhr.responseText)将从服务器接收到的字符串形式的响应数据转换为JavaScript对象。

JS中的AJAX，异步创建交互式网页的技术

为了能让获取到的数据以列表的形式在网页中显示

于是接着进行操作从中提取movieList数组作为后续操作的对象。

再循环遍历movieList数组，对每个电影项执行以下操作：

  • 创建一个新的<li>元素（代表列表项）。
  • 设置该列表项的innerHTML，显示电影名称(movieList[i].nm)和明星演员(movieList[i].star)，中间以破折号连接。（这个信息得看你得到的数据的属性）
  • 将这个列表项追加到一个名为ul的元素（假设是一个<ul>标签）中，实现电影信息的动态渲染。
            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.innerHTML =`${movieList[i].nm}--${movieList[i].star}` //movieList[i].nm + '--' + movieList[i].star
                        ul.appendChild(li)//document.getElementById('ul').appendChild(li)
                    }
                }
            }

JS中的AJAX，异步创建交互式网页的技术

jquery——js库

jquery是个大型js库，其中封装了很多好用的函数，可供直接调用，也是非常的方便

复制链接再引用即可

JS中的AJAX，异步创建交互式网页的技术

除了可以使用addEventListener创建点击事件外，还可以直接在HTML元素上使用onclick属性从而创建点击事件

  • onclick="getData()" : 指定了当按钮被点击时应执行的操作。这里，onclick是一个事件属性，用于绑定点击（click）事件。当用户点击这个按钮时，浏览器会调用名为getData的JavaScript函数。
<!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>//jquery的引用
</body>
</html>

getData它使用jQuery库中的$.ajax方法来发送一个异步的GET请求到指定的API地址，以获取电影列表数据。

  • $.ajax({...}) : 调用了jQuery的ajax方法来执行异步HTTP请求。

    • url : 指定请求的目标URL，即模拟的电影列表API地址。
    • method: 'GET' : 指定HTTP请求的方法为GET。对应XMLHttpRequest()中的.open方法
    • data: {...} : 请求时携带的数据对象。在这个例子中，尽管发起了GET请求，但尝试传递name和age参数。这些数据通常会附加到URL上作为查询字符串。
    • success: function(data){...} : 当请求成功时（HTTP状态码为200系列），会调用此回调函数。
    <script>
        function getData(){
            $.ajax({
                url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
                method: 'GET',//type: 'get',
                data:{
                    name: 'gaga',
                    age:'19'
                },//可有可无
                success: function(data){
                    console.log(data)
                }
            })
        }
    </script>

点击点击事件后能得到服务器返回的数据，也能得到我们请求时携带的数据对象

当然data是可有可无的，去掉它就得到纯粹的服务器返回的数据

JS中的AJAX，异步创建交互式网页的技术

axios库

和jQuery库类似，Axios 是一个基于 谷歌开发 的 HTTP 库，可运行在浏览器和 node.js 环境中。

用法也是非常简单：点击该按钮会执行getData()函数。getData()函数使用axios库发送一个GET请求到指定的URL，然后在控制台打印请求返回的数据。

  • .then(): 这是一个Promise链的方法，当axios.get()发出的HTTP GET请求成功并收到响应时会被调用。
<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(function(response){
                console.log(response.data)
            })
        }
    </script>
</body>

发现需要的数据在data中，于是使用console.log()打印出响应中的data部分。 JS中的AJAX，异步创建交互式网页的技术

fetch方法

js中原生的方法

直接fetch你的接口

    <script>
        function getData(){
            fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
            .then((res) => {
                //console.log(res);
                return res.json()//把res对象转成json对象,即格式化一下
            })
            .then((data) => {
                console.log(data)
            })
        }
    </script>

Fetch API是现代浏览器提供的原生HTTP请求方法，可以用于替代XMLHttpRequest进行异步通信。

  1. 第一个.then() :

    • (res)箭头函数，作为fetch()返回的Promise的链式调用的第一个处理程序。当请求成功完成时，该函数会被调用，res参数是包含响应信息的对象。
    • return res.json()：这行代码将响应体转换为JSON格式。res.json()返回一个新的Promise，该Promise在JSON解析完成后resolve，允许进一步的链式调用。这一步是必要的，因为原始响应是一个Response对象，需要转换才能方便地操作其中的JSON数据。

  2. 第二个.then() :

    • 当上一个Promise（即res.json()） resolve后，这个箭头函数会被调用。此时data参数就是从服务器返回并已被解析成JavaScript对象的响应数据。函数通过console.log(data)将这些数据打印到浏览器的控制台。

总结

AJAX一种异步的创建交互式网页的技术，可以在不刷新页面的情况下更新网页内容，实现前端与后端信息交互

其中含有多种方法：

  1. 原生的JS属性封装了的方法XMLHttpRequest()
  2. 调用已经封装好的库，其中含有AJAX方法jquery库和axios库
  3. 现代浏览器提供的原生HTTP请求方法Fetch
转载自:https://juejin.cn/post/7379816515552444442
评论
请登录