likes
comments
collection
share

发送Ajax请求的三种方式什么是 Ajax ajax 全称 async javaScript and xml，是一种异步

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

什么是 Ajax

ajax 全称 async javaScript and xml，是一种异步的创建交互式网页技术，它能与服务器交换数据，而不中断用户的操作，使得网页可以在不重新加载整个页面的情况下更新内容

接下来我们就用ajax技术获取指定接口中的数据，实现点击按钮就显示电影列表数据的效果

发送Ajax请求的三种方式什么是 Ajax ajax 全称 async javaScript and xml，是一种异步

XMLHttpRequest 基础版

三个步骤：

  1. 获取页面上的button按钮和ul列表DOM结点
  2. 为按钮订阅一个click事件
  3. 朝指定接口发送请求，获取到数据渲染在页面上
<html lang="en">
<body>
    <button id="btn">获取电影列表</button>
    <ul id="list">
        
    </ul>

    <script>
        // 获取页面上的按钮和列表
        let btn = document.getElementById('btn')
        let ul = document.getElementById('list')

        // 订阅一个click事件
        btn.addEventListener('click',() => {

        // 朝指定接口发送请求，获取到数据渲染在页面上
        let xhr = new XMLHttpRequest();               
        xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get',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++){
                    // movieList[i]
                    const li = document.createElement('li');
                    li.innerText = movieList[i].nm + '--' + movieList[i].star  // 拼接电影名和演员为一个字符串
                    ul.appendChild(li);  // 添加一个子标签/子结点

                }
            }
        }
        })
    </script>

</body>
</html>
  • let xhr = new XMLHttpRequest()：创建一个ajax实例，驱使浏览器朝后端发送一个请求
  • xhr.open('GET', 'xxx', true)：配置发送请求的参数，向地址xxx发送GET请求， "true"表示是否要开启异步
  • xhr.onreadystatechange = () => {}：监听请求的过程
  • xhr.readyState == 4 && xhr.status == 200：ajax状态为4并且状态码为200，代表拿到了后端返回的数据
  • JSON.parse(xhr.responseText).movieList ：把请求回来的数据字符串转换成一个对象

readyState —— ajax的五种状态

0 -- xhr刚创建，即xhr = new XMLHttpRequest()被执行的时候

1 -- open执行，配置已经生效

2 -- 请求发送出去，响应头被接收

3 -- 响应体正在解析

4 -- 解析完成

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>
    
    <!-- 引入 jQuery 库的 CDN 链接 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
</head>
<body>
    <button id="btn">jq获取电影列表</button>
    <ul id="list">
        
    </ul>

    <script>
        // 获取页面上的按钮和列表
        let btn = document.getElementById('btn')
        let ul = document.getElementById('list')

        // 订阅一个click事件
        btn.addEventListener ('click',() => {
            $.ajax({
                url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get',
                method: 'GET',
                data: {
                    username: '今天一定晴q',
                    age: 18
                },
                success: function (res) {
                    console.log(res);
                    const movieList = res.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>

主要是发送请求、获取数据的逻辑因为 jquery API 的封装变得更加简洁了：

$.ajax({ ... })：使用 jQuery 的 $.ajax 方法发起一个请求，在里面指定接口地址、请求方法和data发送给服务器的数据即传参，当请求成功时执行 success 回调函数，函数中执行将电影列表数据渲染到页面的逻辑代码

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 id="btn">fetch获取电影列表</button>
    <ul id="list">
        
    </ul>

    <script>
        let btn = document.getElementById('btn')
        let ul = document.getElementById('list')

        btn.addEventListener ('click',() => {
            fetch("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?username='今天一定晴q'&age=18")
            .then((res) => {
                console.log(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>
    
</body>
</html>

利用 fetch 去发送ajax请求的代码读起来就更加的语义化了：向接口地址 fetch 请求，然后得到响应体再解析，然后拿到我们想要的数据渲染到页面上

如果发送请求的同时要传参的话，就在接口地址后面添加一个 ？ 接上要传递的参数

以上就是发送ajax请求的三种方法啦，在开发过程中可以选择任意一种使用，希望对您有所帮助！

发送Ajax请求的三种方式什么是 Ajax ajax 全称 async javaScript and xml，是一种异步

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