一个Ajax的Dome

最新推荐文章于 2022-01-27 22:33:06 发布

Huterox

最新推荐文章于 2022-01-27 22:33:06 发布

阅读量681

点赞数 2

分类专栏：笔记 web学习文章标签： ajax js javascript html

本文链接：https://blog.csdn.net/FUTEROX/article/details/119420665

版权

笔记同时被 2 个专栏收录

66 篇文章 6 订阅

订阅专栏

web学习

38 篇文章 12 订阅

订阅专栏

文章目录

前言
实现

前言

所谓的Ajax其实就是动态的去请求另一个资源站点，然后将资源加载到我们的当前页面中，例如当你点击网页下一页时页面会发生改变，但是却没有发生跳转。这就是Ajax将请求到的资源通过修改当前页面的HTML代码添加进来。

实现

这个实现其实很简单。但是分两种，一种是通过原生的JS来实现，这里我都将举例子，尽管使用jQuery是个不错的选择。

页面布局

先来看看本dome当中的HTML代码

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

<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>
    <style>
        #img_aum {
            position: absolute;
            top: 50px;
            width: 96%;
        }
        
        #more_img {
            background-color: aqua;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: large;
            font-style: inherit;
            position: fixed;
            width: 96%;
            height: 40px;
        }
    </style>
</head>

<body>
    <div id="img_aum">

    </div>
    <div>
        <button id="more_img">加载更多</button>
    </div>
</body>

</html>

只有一个按钮，除此之外别无其它。

原生JS实现Ajax

在这里我必须先说明一下一个报错。那就是跨站点资源请求的错误，当你使用跨站点的请求时，浏览器会自动进行检测，那就意味着你所连接使用的第三方接口返回的数据很有可能会被浏览器拦截。
通过测试，我选择了下面的这个接口

https://img.xjh.me/random_img.php?return=json&type=bg&cytpe=acg

值得一提的是，这个接口如果你使用原生的JS进行实现的话，很有可能也会被拦截，至少在我这里是这样的，此外这个接口访问较为缓慢。
当然在看代码之前可以先看看原生JS的流程图
在这里插入图片描述

<script>
    const button = document.getElementById("more_img")
    const imgDiv = document.getElementById("img_aum")

    function getImg(num) {
        let xhr = new XMLHttpRequest()
        let url = "https://img.xjh.me/random_img.php?return=json&type=bg&cytpe=acg"
        xhr.open('get', url, true)
        xhr.send(null)
        xhr.addEventListener("readystatechange", () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let img = document.createElement("img")

                let imgUrl = JSON(xhr.responseText)
     
                img.width = 290
                img.height = 400
                img.style.marginLeft = 10
                img.scr = imgUrl.img //获取节点内容


                imgDiv.insertBefore(img, imgDiv.firstChild)
            }
        })
    }
    (function() {
        let num = 0
        button.addEventListener("click", () => {
            for (let i = 0; i < 10; i++) {
                num += 1
                getImg(num)
            }
        })
    })()
</script>

这段代码很有可能失败，主要原因是API接口的问题和原生JS处理的某些问题
在这里插入图片描述

使用Jquery实现

由于在这里是get请求，并且返回的是json数据格式，所以我直接使用getJSON来实现

<script>
    const apiUrl = "https://img.xjh.me/random_img.php?return=json&type=bg&cytpe=acg"

    function showImg() {
        for (let i = 0; i < 10; i++) {
            $.getJSON(apiUrl, (json) => {
                $("#img_aum").prepend($("<img>").attr("src", json.img).attr("width", 450))
            })
        }

    }

    $(() => {
        showImg()
        $("#more_img").on("click", () => {
            showImg()
        })
    })
</script>