接口调用方式 -- 原生ajax （获取多个接口地址）

最新推荐文章于 2024-02-22 11:34:25 发布

卡夫卡的baby

最新推荐文章于 2024-02-22 11:34:25 发布

阅读量325

点赞数

分类专栏： jQuery 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_72303943/article/details/130987249

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原生ajax

自己封装一个ajax对象。发送异步请求：

ajax.js:

function ajax(json){

    // 传递过来的json对象 如果存在 我们就打印出来
    var json = json || {}
    console.log(json);

    // 如果请求地址是空 程序就不往下执行了
    if(!json.url){
        return false    
    }

    // console.log('小李子是蠢猪');

    // 把数据发送方式转大写
    json.type = (json.type || 'post').toUpperCase()
    // console.log(json.type);

    // 发送ajax请求
    // 1.首先要创建一个Ajax对象
    var xlz = new XMLHttpRequest()

    if(window.XMLHttpRequest){
        xlz = new XMLHttpRequest();
    }else{
        xlz = new ActiveXObject('microsoft.XMLHttp');
    }
    console.log(xlz);

    // 2.发送请求
    if(json.type == 'GET'){
        xlz.open('get', json.url, true)
        xlz.send()
    }else if(json.type == 'POST'){
        xlz.open('post', json.url, true)
        xlz.send()
    }

    // 3.将从服务器上  请求到的数据 显示在 页面上
    xlz.onreadystatechange = function(){
        // console.log(xlz.readyState);
        // console.log(xlz.status);

        // 响应已就绪
        if(xlz.readyState == 4 && xlz.status == 200){
            // console.log(typeof xlz.responseText);
            // console.log(resObj);
            var resObj = JSON.parse(xlz.responseText)
            json.success(resObj)
        }
    }
   

    return json
}

index.html中操作：

<title>原生js 如何封装一个ajax对象 然后用这个ajax对象 发送异步请求</title>
</head>
<body>
    <button id="btn">点击，发送请求</button>

    <ul id="jsonData"></ul>


    <script src="./js/ajax.js"></script>

    <script>
        // 网易云音乐api -- 获取banner轮播图 接口地址
        var apiUrl = `http://localhost:3000/banner`
        // var apiUrl = ``

        // 抓取元素
        var btn = document.querySelector('#btn')
        var ulO = document.querySelector('#jsonData')

        btn.onclick = function(){
            // 调用执行
            ajax({
                // 请求地址
                url: apiUrl,
                // 数据发送方式
                type:'post',
                // 服务器返回的数据类
                dataType:'json',
                // 服务器返回的数据
                success:function(res){
                    // console.log('打印服务器返回给我们的数据');
                    // console.log(res.banners);

                    var strHTML = ``
                    // 遍历数组
                    res.banners.forEach((item)=>{
                        // console.log(item.imageUrl);
                        strHTML += `<li><img src="${item.imageUrl}" alt=""></li>`
                    })
                    // console.log(strHTML);
                    // 向ul里放置内容
                    ulO.innerHTML = strHTML

                }
            })
        }

    </script>

预览效果：

获取多个接口地址的写法（获取热门歌手、电台主播新人榜）：

HTML代码：

<title>原生js 如何封装一个ajax对象 然后用这个ajax对象 发送异步请求</title>
</head>
<body>
    <button id="btn">点击，发送请求</button>
    <ul id="jsonData"></ul>


    <script src="./js/ajax.js"></script>

    <script>
        // 网易云音乐api -- 获取banner轮播图 接口地址
        var apiUrl = `http://localhost:3000/banner`
        // var apiUrl = ``

        // 网易云音乐api--- 获取热门歌手 接口地址
        // var apiUrl = `http://localhost:3000/top/artists`

        // 网易云音乐api--- 获取电台主播新人榜 接口地址
        // var apiUrl = `http://localhost:3000/dj/toplist/newcomer`

        // 抓取元素
        var btn = document.querySelector('#btn')
        var ulO = document.querySelector('#jsonData')

        btn.onclick = function(){
            // 调用执行
            ajax({
                // 请求地址
                url: apiUrl,
                // 数据发送方式
                type:'post',
                // 服务器返回的数据类
                dataType:'json',
                // 服务器返回的数据
                success:function(res){
                    console.log('打印服务器返回给我们的数据');
                    // console.log(res.newcomer);
                    // console.log(res.artists);
                    console.log(res.banners);

                   
                }
            })
        }

    </script>

获取热门歌手预览效果：

获取电台主播新人榜预览效果：