1. Introduction to AJAX

AJAX (Asynchronous JavaScript and XML) is a technique that enables asynchronous communication between a web browser and a server. It allows partial updates to a web page without reloading the entire page, improving user experience and reducing bandwidth usage.

1.1. Implementing AJAX Using Native JavaScript

A Java servlet can serve as a backend endpoint for an AJAX request. Here's a simplified version of a servlet that checks if a username is already taken:

@WebServlet("/userCheck")
public class UsernameCheckServlet extends HttpServlet {
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
       response.setContentType("text/html;charset=UTF-8");
       String username = request.getParameter("username");
       if ("john_doe".equals(username)) {
           response.getWriter().write("<span style="color:red">Username Taken</span>");
       } else {
           response.getWriter().write("<span style="color:green">Available</span>");
       }
   }
}
 

Frontend HTML and JavaScript to trigger the AJAX request on blur event of an input field:

<input type="text" id="usernameInput">
<span id="usernameFeedback"></span>

<script>
document.getElementById('usernameInput').addEventListener('blur', function() {
   const xhr = new XMLHttpRequest();
   const username = this.value;
   xhr.open('GET', 'userCheck?username=' + encodeURIComponent(username), true);
   xhr.send();

   xhr.onreadystatechange = function () {
       if (xhr.readyState === 4 && xhr.status === 200) {
           document.getElementById('usernameFeedback').innerHTML = xhr.responseText;
       }
   };
});
</script>
 

1.2. AJAX Using jQuery

jQuery simplifies AJAX implementation with methods like $.get, $.post, and $.ajax.

1.2.1. GET Request

$("#usernameInput").on("blur", function() {
   let user = $(this).val();
   $.get("userCheck", { username: user }, function(data) {
       $("#usernameFeedback").html(data);
   }, "html");
});
 

1.2.2. POST Request

$.post("userCheck", { username: user }, function(data) {
   $("#usernameFeedback").html(data);
}, "html");
 

1.2.3. Generic AJAX Call

$.ajax({
   url: "userCheck",
   method: "POST",
   data: { username: user },
   dataType: "html",
   success: function(response) {
       $("#usernameFeedback").html(response);
   },
   error: function() {
       alert("Request failed");
   }
});
 

2. Working with JSON

JSON (JavaScript Object Notation) is a lightweight data interchange format. It's easy for humans to read and write and easy for machines to parse and generate.

2.1. JSON Handling in Java with Jackson

Jackson is a popular library for handling JSON in Java. Below are some examples of converting between Java objects and JSON strings:

2.1.1. Converting Java Object to JSON

ObjectMapper mapper = new ObjectMapper();
User user = new User("Alice", 28);
String json = mapper.writeValueAsString(user);
 

2.1.2. Converting JSON to Java Object

User user = mapper.readValue(json, User.class);
 

2.1.3. Converting Map to JSON

Map<String, String> data = new HashMap<>();
data.put("name", "Bob");
data.put("role", "Developer");
String json = mapper.writeValueAsString(data);
 

2.1.4. Converting JSON to Map

Map<String, String> map = mapper.readValue(json, new TypeReference<HashMap<String, String>>() {});
 

3. Practical Use Case: Search Suggestions

A typical use case for AJAX is implementing search suggestions as a user types a query.

3.1. HTML Frontend

<input type="text" id="searchBox">
<div id="suggestionBox"></div>

<script>
$("#searchBox").on("input", function() {
   let query = $(this).val();
   if (query.length === 0) {
       $("#suggestionBox").hide();
       return;
   }

   $.ajax({
       url: "suggest",
       method: "POST",
       data: { q: query },
       dataType: "json",
       success: function(results) {
           let html = "";
           results.forEach(function(item) {
               html += "<div>" + item.name + "</div>";
           });
           $("#suggestionBox").html(html).show();
       }
   });
});
</script>
 

3.2. Java Backend

@WebServlet("/suggest")
public class SuggestionServlet extends HttpServlet {
   protected void doPost(HttpServletRequest req, HttpServletResponse res) throws IOException {
       res.setContentType("application/json");
       String query = req.getParameter("q");
       List<User> matches = searchService.findMatches(query);
       String json = new ObjectMapper().writeValueAsString(matches);
       res.getWriter().write(json);
   }
}
 

4. Pagination Example

Implementing infinite scroll pagination using AJAX and jQuery.

4.1. Client-side JavaScript

let currentPage = 1;
const pageSize = 10;

$(window).scroll(function() {
   if ($(window).scrollTop() + $(window).height() >= $(document).height() - 50) {
       loadPage(currentPage++);
   }
});

function loadPage(page) {
   $.post("/news", { page: page, size: pageSize }, function(data) {
       if (data.length === 0) return;
       data.forEach(item => {
           $(".news_list").append("<li>" + item.title + "</li>");
       });
   }, "json");
}
 

4.2. Java Backend

@WebServlet("/news")
public class NewsServlet extends HttpServlet {
   protected void doPost(HttpServletRequest req, HttpServletResponse res) throws IOException {
       int page = Integer.parseInt(req.getParameter("page"));
       int size = Integer.parseInt(req.getParameter("size"));
       List<News> items = newsService.fetchPage(page, size);
       res.setContentType("application/json");
       res.getWriter().write(new ObjectMapper().writeValueAsString(items));
   }
}