ajax封装（两种方式）

封装ajax请求的两种方式

WangMr_Zihao

2183人浏览 · 2022-05-06 18:26:00

WangMr_Zihao · 2022-05-06 18:26:00 发布

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学无止境,永远对学习保持一种敬畏的态度!</title>
</head>

<body>
    <div class="box"></div>
    <script>
        /**
         * 1.ajax全称 (async javascript and xml)  异步js和xml   它是可以实现页面局部刷新的一门技术
         * 它有一个核心对象:
         * XMLHttpRequest()      这是浏览器内置的一个API    用于实例化核心对象
         * **/

        // 1.实例化XMLHttpRequest()
        // var xhr = new XMLHttpRequest();

        // 2.建立连接       xhr.open('请求方式','接口地址','同步或异步')    默认是异步
        // xhr.open('get', 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata');

        // 3.发送请求           send里面可以传参数      xhr.send('a=1&b=2')
        // xhr.send();

        // 4.接收数据
        /* xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.response);
                console.log(JSON.parse(xhr.response));
                let arr = JSON.parse(xhr.response).message;
                let _html = '';
                arr.forEach(item => {
                    _html += `<div>${item.goods_id}</div>`
                })
                document.querySelector('.box').innerHTML = _html;
            }
        } */

        // 仿axios的封装        (es6)       利用es6promise拿数据
        /* function dog(params) {
            return new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest();
                xhr.open(params.method, params.url);
                xhr.send(params.data);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        resolve(JSON.parse(xhr.response));
                    }
                }
            })
        }

        dog({ method: 'get', url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata' }).then(res => {
            console.log(res);
        }) */

        // es6没出来之前封装请求      利用回调函数拿数据        缺点:请求过多,会产生回调地狱,导致请求分不清楚
        /* function dog(params, callback) {
            let xhr = new XMLHttpRequest();
            xhr.open(params.method, params.url);
            xhr.send(params.data);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    callback(JSON.parse(xhr.response))
                }
            }
        }

        dog({ method: 'get', url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata' }, res => {
            console.log(res);
        }) */

    </script>
</body>

</html>