一个Ajax的小demo

小白在线学前端

于 2021-08-08 09:02:30 发布

阅读量239

点赞数

分类专栏：前端文章标签： javascript java ajax html

原文链接：https://blog.csdn.net/FUTEROX/article/details/119420665?utm_medium=distribute.pc_feed_v2.none-task-blog-short_term_tag-8.pc_personrecdepth_1-utm_source=distribute.pc_feed_v2.none-task-blog-short_term_tag-8.pc_personrec

版权

前端专栏收录该内容

19 篇文章 2 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

所谓的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>

在这里插入图片描述

总结

好啦，这就是今天要给大家分享的全部内容了
如果你喜欢的话，就不要吝惜你的一键三连了~,
在这里插入图片描述

小白在线学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个Ajax的小demo

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言实现一、页面布局二、原生JS实现Ajax使用Jquery实现总结前言所谓的Ajax其实就是动态的去请求另一个资源站点，然后将资源加载到我们的当前页面中，例如当你点击网页下一页时页面会发生改变，但是却没有发生跳转。这就是Ajax将请求到的资源通过修改当前页面的HTML代码添加进来。实现这个实现其实很简单。但是分两种，一种是通过原生的JS来实现，这里我都将举例子，尽管使用jQuery是个不错的选择。一、页面布局先来看看
复制链接

扫一扫