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

在初学ajax后，我们可以尝试着使用ajax来完成页面的一个简单的渲染。效果就是把几张图片和文字渲染到页面上，来加深我们对ajax的理解和熟悉ajax的应用。有详细步骤的讲解，不需要讲解的大佬也可以去后面看源码。

才疏学浅，也希望大佬们莫要嘲笑，也希望大家多多批评。

目录

效果展示

步骤

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

二，使用ajax请求

1.创建一个XMLHttpRequest实例

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

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

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

5.渲染页面

源码：

图片资源

效果展示

先看一下想要的效果：

 

然后我们看怎么写

步骤

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

以下是我所写的数据,主要是图片的路径。

[
    {
        "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来发送