文章目录

• 前言
• 实现
• • 页面布局
  • 原生JS实现Ajax
  • 使用Jquery实现

前言

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

实现

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

页面布局

先来看看本dome当中的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 = 290img.height = 400img.style.marginLeft = 10img.scr = imgUrl.img //获取节点内容imgDiv.insertBefore(img, imgDiv.firstChild)}})}(function() {let num = 0button.addEventListener("click", () => {for (let i = 0; i < 10; i++) {num += 1getImg(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($("").attr("src", json.img).attr("width", 450))})}}$(() => {showImg()$("#more_img").on("click", () => {showImg()})})
</script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！