ajax知识点以及请求方式

最新推荐文章于 2024-09-02 17:34:07 发布

Pumpkin125

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量171

点赞数

分类专栏： ajax请求文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_62890580/article/details/126336184

版权

ajax请求专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        ajax: async javascript and xml； 异步的js和xml；是实现页面刷新的的一门技术
        ajax有一个核心对象 XMLHttpRequest;内置在浏览器内部的
        操作核心对象：
        1. 实例化核心对象
          var xhr =   new XMLHttpRequest()
        2. 建立连接
            xhr.open(请求方式，请求连接地址，同步异步)

        3. 发送请求
            xhr.send(参数)

        4. 获取数据
     -->
    <div class="imgbox"></div>
    <script>
        // var xhr = new XMLHttpRequest()

        // xhr.open('get','https://api.it120.cc/small4/banner/list')

        // xhr.send()

        // xhr.onreadystatechange = function(){
        //     if(xhr.readyState==4 && xhr.status==200){
        //         console.log(xhr.response)
        //         console.log(JSON.parse(xhr.response).data)

        //         let _html = ''
        //         JSON.parse(xhr.response).data.forEach(item=>{
        //             _html +=  '<img src="'+item.picUrl+'"/>'
        //         })

        //         console.log(_html)
        //         document.querySelector('.imgbox').innerHTML = _html
        //     }
        // }


        function axios(method, url) {
            return new Promise((resolve, reject) => {
                var xhr = new XMLHttpRequest()

                xhr.open(method, url)

                xhr.send()

                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        console.log(xhr.response)
                        console.log(JSON.parse(xhr.response).data)
                        resolve(JSON.parse(xhr.response).data)

                        // let _html = ''
                        // JSON.parse(xhr.response).data.forEach(item => {
                        //     _html += '<img src="' + item.picUrl + '"/>'
                        // })

                        // console.log(_html)
                        // document.querySelector('.imgbox').innerHTML = _html
                    }
                }
            })

        }

        axios('get','https://api.it120.cc/small4/banner/list').then(res=>{
            console.log('axios',res)
        })
    </script>
</body>

</html>