How to implement ajax request with Servlet API and JSP?

I have a JSP page that looks like this

I need to update the table when entering a search query or when selecting a sort. When sending a request to the servlet, it returns ArrayList<Product>. The Productclass has the following structure

public class Product {
    private AtomicReference<String> id;
    private String description;
    private BigDecimal price;
    private Currency currency;
    private int stock;
    private String imageUrl;
}

Here is the JSP file code:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>

<jsp:useBean id="products" type="java.util.ArrayList" scope="request"/>
<tags:master pageTitle="Product List">
  <form>
  <input name = "query" value = "${param.query}">
  <button>Search</button>
  </form>
  <table>
    <thead>
      <tr>
        <td>Image</td>
        <td>Description
            <tags:sort sort = "description" order = "asc"/>
            <tags:sort sort = "description" order = "desc"/>
        </td>
        <td class="price">Price
            <tags:sort sort = "price" order = "asc"/>
            <tags:sort sort = "price" order = "desc"/>
        </td>
      </tr>
    </thead>
    <c:forEach var="product" items="${products}">
      <tr>
        <td>
          <img class="product-tile" src="https://raw.githubusercontent.com/andrewosipenko/phoneshop-ext-images/master/${product.imageUrl}">
        </td>
        <td>
        <a href = "products/${product.id}">${product.description}</a>
        </td>
        <td class="price">
          <fmt:formatNumber value="${product.price}" type="currency" currencySymbol="${product.currency.symbol}"/>
        </td>
      </tr>
    </c:forEach>
  </table>
</tags:master>

I don't understand how to associate ajax-запрос with a servlet and how to determine the type of return value in the request. I had an idea: to make a method that would parse this class in form json-объекта

{
   "id#1" {
      "Img" : "https://...",
      "Price" : 100,
      "CurrSymb" : "$"
   },

   "id#2" {
      "Img" : "https://...",
      "Price" : 125,
      "CurrSymb" : "$"
   },
   ...
}

And then how to properly process it, I do not know.