如何使用 JSON 文件中的 Ajax 将图像添加到幻灯片中？

Question

I have created a slideshow using JQUERY but can't add images via HTML. I'm supposed to use AJAX to add the pictures from a JSON file. How can I do this? I looked HTML Code:

    <html>
    <head>
        <title>Assignment 4 - COMP_122</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery-3.6.0.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>Image Gallery</h1>
            <div class="gallery-outer">
                <img src="images/arrow-left.png" class="previous" alt="Previous">
                <div class="gallery-inner">
                    <!-- <img src="Images/1.jpg" width="500px" height="300px" class="image 
                    active">
                    <img src="Images/2.jpg" width="500px" height="300px" class="image">
                    <img src="Images/3.jpg" width="500px" height="300px" class="image">
                    <img src="Images/4.jpg" width="500px" height="300px" class="image">
                    <img src="Images/5.jpg" width="500px" height="300px" class="image"> -->
                </div>
                <img src="images/arrow-right.png" class="next" alt="Next">
            </div>
        </div>
    </body>
    </html>

JS Code:

    var xhttp = new XMLHttpRequest;
    xhttp.onreadstatechange = function() {
        if (this.readyState == 4 & this.status == 200) {
            document.getElementById("gallery-inner")

I know the JS code is incomplete... I just don't know how to proceed. How can I use AJAX to add the JSON file to the page while also maintaining the slideshow functionality?