[
    {
        "id":1,
        "img":"./1115img/20220325201733_1.jpg",
        "title":"暗月与拉尼",
        "contont":"埃尔登法环"
    },
    {
        "id":2,
        "img":"./1115img/20220410195718_1.jpg",
        "title":"雷亚鲁卡利亚魔法学院",
        "contont":"埃尔登法环"
    },
    {
        "id":3,
        "img":"./1115img/20220410200346_1.jpg",
        "title":"湖之耶莱尼亚",
        "contont":"埃尔登法环"

    },
    {
        "id":4,

        "img":"./1115img/风暴城.jpg",
        "title":"史东维尔城",
        "contont":"埃尔登法环"

    }
]

二，使用ajax请求

1.创建一个XMLHttpRequest实例

即为创建一个ajax对象。

我们使用

var xhr = new XMLHttpRequest()

来创建一个ajax对象，现在就可以使用这个xhr来发送ajax请求。

2.调用open方法，开始发送请求

调用open方法，开始发送请求

语法为 xhr.open(参数一，参数二，参数三)

参数一：请求的方式：get（请求数据）/post（传递数据）

参数二：请求地址 url http：//ww ./数据.json

参数三：是否异步 true--异步 false--同步（一般都是异步）

xhr.open('get', './shuju.json', true)

3.开始和服务端进行交互，调用send方法

xhr.send()

4.onreadystatechange 事件与监听浏览器和服务器的状态

onreadystatechange 事件

用于存储函数（或函数名），每当 readyState 属性改变时，就会触发 onreadystatechange 事件，就是会调用该函数。这就是请求被发送到服务器时，我们需要执行一些基于响应的任务。

readyState 属性存有 XMLHttpRequest 的状态信息。

监听一下浏览器和服务器的状态

我们注册监听一下浏览器和服务器的状态，一旦发生改变if语句就会判断。

xhr.readyState === 4代表浏览器响应内容成功，响应内容解析完成，可以在客户端调用了。

而xhr.status === 200代表服务器状态良好，服务器成功地接受了客户端请求，网页处于可访问状态。

只有这两个状态正常，我们才可以去执行下面的步骤。

xhr.onreadystatechange = function () {//
        if (xhr.readyState === 4) {//浏览器响应内容成功
         if (xhr.status === 200) {//服务器状态良好，成功地接受了客户端请求
            //渲染页面的函数
}
}
}

5.渲染页面

所以为了方便渲染页面我们首先把json字符串格式的数据转换为json对象。

JSON.parse方法把json字符串转换为json对象。这个json字符串必须符合严格的JSON格式。

xhr.responseText 就是在请求被发送后，从服务器端返回文本。

var text = JSON.parse(xhr.responseText)

然后我们去渲染页面

经过JSON.parse的转换我们就可以使用for循环去遍历，然后依次渲染到界面上。

for循环每循环以次，我们去创建一个新的div，添加到body上。然后使用innerHTML把想要的数据渲染上去。

for (let i = 0; i < text.length; i++) {

         var p1 = document.createElement('div')//创建一个div标签
         document.body.appendChild(p1)//为父元素添加一个div标签
         p1.innerHTML = `<div>
         <p>"${text[i].contont}"</p>
         <img src="${text[i].img}" alt="">
         <p>"${text[i].title}"</p>
         </div>`
}

小补充：

别忘了样式

        img {
            width: 500px;
            height: 270px;
        }
        div{
            width: 500px;
            height: 350px;
            display: flex;
            justify-content: space-evenly;
            flex-direction: column;
        }

源码：

JavaScript：

  var xhr = new XMLHttpRequest()//创建一个ajax对象。
        xhr.open('get', './shuju.json', true)//调用open方法，开始发送请求
        xhr.send()//调用open方法，开始发送请求
        console.log(xhr);//打印一下xhr，方便学习，可以不写
//用于存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {//浏览器响应内容成功
                if (xhr.status === 200) {//服务器状态良好，成功地接受了客户端请求
                    var text = JSON.parse(xhr.responseText)//把json字符串转换为json对象
                    for (let i = 0; i < text.length; i++) {//for循环遍历

                        var p1 = document.createElement('div')//创建一个p标签
                        document.body.appendChild(p1)//为父元素添加一个p标签
                        //渲染页面
                        p1.innerHTML = `<div>
                            <p>"${text[i].contont}"</p>
                            <img src="${text[i].img}" alt="">
                            <p>"${text[i].title}"</p>
                            </div>`
                    }

                }
            }
        }

图片资源

本人把图片给大家，如果需要的话

简单的ajax案例，页面的简单渲染

效果展示

步骤

一，先创建一个josn文件，来存放我们需要访问的数据