XMLHttpRequest 与 Java 后端交互实现

在Web开发中，XMLHttpRequest 是一种在客户端与服务器之间进行异步通信的技术。通过它，我们可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页。本文将介绍如何使用 XMLHttpRequest 与 Java 后端进行交互，并解决一个实际问题。

问题描述

假设我们需要开发一个在线图书管理系统，用户可以查询图书信息。当用户输入书名后，我们希望在不刷新页面的情况下，从服务器获取图书信息并显示给用户。

技术选型

  • 前端：使用 XMLHttpRequest 进行异步请求。
  • 后端：使用 Java Servlet 处理请求并返回数据。

实现步骤

1. 创建 Java Servlet

首先，我们需要创建一个 Servlet 来处理前端的请求。这里是一个简单的示例：

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class BookServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String bookName = request.getParameter("bookName");
        // 假设我们从数据库中获取图书信息
        String bookInfo = "书名: " + bookName + ", 作者: 张三, 出版社: 出版社A";
        response.setContentType("text/plain");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(bookInfo);
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
2. 前端 JavaScript 代码

接下来，我们需要编写前端 JavaScript 代码，使用 XMLHttpRequest 发送请求并处理响应：

function searchBook() {
    var bookName = document.getElementById("bookName").value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "BookServlet?bookName=" + encodeURIComponent(bookName), true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("bookInfo").innerText = xhr.responseText;
        }
    };
    xhr.send();
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
3. HTML 页面

最后，我们需要一个简单的 HTML 页面来展示输入框和显示结果：

<!DOCTYPE html>
<html>
<head>
    <title>图书查询</title>
</head>
<body>
    <input type="text" id="bookName" placeholder="请输入书名">
    <button onclick="searchBook()">查询</button>
    <p id="bookInfo"></p>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

状态图

以下是使用 Mermaid 语法表示的图书查询状态图：

用户在输入框中输入书名 用户点击查询按钮 XMLHttpRequest 发送请求到服务器 服务器返回图书信息并显示在页面上 输入书名 发送请求 等待响应 显示结果

结语

通过上述步骤，我们实现了一个简单的在线图书查询系统。用户可以在不刷新页面的情况下，通过 XMLHttpRequest 与 Java Servlet 进行异步通信，获取并显示图书信息。这种技术在现代 Web 应用中非常常见，可以提高用户体验和应用性能。