一个Ajax的Dome
Posted HUTEROX
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个Ajax的Dome相关的知识，希望对你有一定的参考价值。
前言
所谓的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>
以上是关于一个Ajax的Dome的主要内容，如果未能解决你的问题，请参考以下文章