Как реализовать ajax запрос с Servlet API и JSP?

У меня есть JSP страница, которая выглядит так

Мне нужно обновить таблицу при вводе поискового запроса или при выборе сортировки. При отправке запроса на сервлет, он возвращает ArrayList<Product>. Класс Productимеет следующую структуру

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

Вот код JSP файла:

<%@ 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>

Я не понимаю, как связать ajax-запрос с сервлетом и как определить тип возвращаемого значения в запросе. У меня была идея: сделать метод, который бы парсил данный класс в форму json-объекта

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

А как потом правильно обработать я не знаю.