Javascript 如何构造ajax调用在刷新网页时随机化网页上的图像？

我正在一个小组项目中工作，我希望能够将网页上数据库中的图像随机化，并将这些图像链接到适当的网页。我完全不懂ajax和php，我一直在致力于这个网站的前端开发。到目前为止，我已经得到了这些php方法

function executeZParamQuery($sql) 

{
    //executes and returns data from database
    $stmt = mysqli_stmt_init($mysqli);
    mysqli_stmt_prepare($stmt, $sql);

    if (mysqli_stmt_execute($stmt))
    {
        $result = iimysqli_stmt_get_result($stmt);

        $data = array();
        while ($row = iimysqli_result_fetch_array($result))
            $data[] = $row;

        mysqli_stmt_close($stmt);
        return $data;
     }

    error_log("Failed to execute prepared statement: "
    .mysqli_stmt_error($stmt));
    die ("Failed to execute prepared statement: "
    .mysqli_stmt_error($stmt));
}

function getAllImg()
{
    $sql = "SELECT RecipeID, PictureID FROM Pictures";

    echo json_encode(executeZParamQuery($sql));
} 

但我不知道如何使用ajax来实际操作这些函数并生成随机图像。请发送一些指导

编辑：我想给你们看一下html以及我想链接图片和链接的地方

<div class="banner">
    <a href="">
    <img class="first" src="http://i.imgur.com/gZo0lXk.jpg" alt=""        style="width:350px; height: 233px;" />
    </a>
  <a href="">
    <img src="http://i.imgur.com/o0H3If2.png" alt="" style="width:350px; height: 233px;" />
  </a>
  <a href="">
    <img src="http://i.imgur.com/p1DFGse.png" alt="" style="width:350px; height: 233px;" />
  </a>
  <a href="">
    <img src="http://i.imgur.com/ck0dtSd.png" alt="" style="width:350px; height: 233px;" />
  </a> 
  <a href="">
    <img src="http://i.imgur.com/RAHLxlm.png" alt="" style="width:350px; height: 233px;" />
  </a>
  <a href="">
    <img src="http://i.imgur.com/bVGK4hq.png" alt="" style="width:350px; height: 233px;" />
  </a>
  <a href="">
    <img src="http://i.imgur.com/gZo0lXk.jpg" alt="" style="width:350px; height: 233px;" />
  </a>
  <a href="">
    <img src="http://i.imgur.com/o0H3If2.png" alt="" style="width:350px; height: 233px;" />
  </a>
   <a href=""> 
    <img src="http://i.imgur.com/p1DFGse.png" alt="" style="width:350px; height: 233px;" />
  </a>
  <a href="">
    <img src="http://i.imgur.com/ck0dtSd.png" alt="" style="width:350px; height: 233px;" />
  <a href="">
  </div>

---

最后4个图像与前4个图像相同，因为我有一个动画移动横幅。

在您的例子中，您不需要Ajax来返回随机图像，在SQL语句本身中，您实际上可以获得随机图像

function getAllImg()
{
    $sql = "SELECT RecipeID, PictureID FROM Pictures ORDER BY RAND() ";

    echo json_encode(executeZParamQuery($sql));
} 

---

你知道我是如何在网页上实现它的吗。谢谢。就像我如何将这个函数与HTML合并来更改图像一样