JavaWeb 开发入门：理解 MVC、Ajax 和 JSON

长不大的小孩882

已于 2024-08-12 09:28:04 修改

阅读量608

点赞数 6

文章标签： mvc ajax 前端

于 2024-08-12 09:27:24 首次发布

本文链接：https://blog.csdn.net/qq_63289396/article/details/141122257

版权

MVC 开发模式

MVC（Model-View-Controller）模式是一种将应用程序分为三个主要部分的软件设计模式：

模型 (Model): 负责数据的处理和业务逻辑。它通常以 JavaBean 的形式存在，例如数据 Bean 用于数据传递，业务 Bean 用于封装业务逻辑。
视图 (View): 负责展示数据和用户界面。它可以是 HTML、JSP、PHP 等页面。
控制器 (Controller): 负责接收用户请求，并调用模型和视图。它通常以 Servlet 或 Handler 的形式存在。

MVC 优点:

代码结构清晰: 将应用程序分为三个部分，使代码结构更加清晰，易于维护和扩展。
职责分明: 每个部分负责不同的功能，职责分明，便于团队合作。
复用性强: 模型可以独立于视图和控制器，易于复用。

代码示例:

1. Model

public class User {
    private Integer id;
    private String username;
    private String password;

    // Getter 和 Setter 方法
}

2. View

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <form action="login" method="post">
        Username: <input type="text" name="username" />
        Password: <input type="password" name="password" />
        <input type="submit" value="Login" />
    </form>
</body>
</html>

3. Controller

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        User user = new User();
        user.setUsername(username);
        user.setPassword(password);

        // 调用 Service 层验证用户
        boolean isValid = userService.validateUser(user);

        if (isValid) {
            // 登录成功
            request.getSession().setAttribute("user", user);
            response.sendRedirect("welcome.jsp");
        } else {
            // 登录失败
            request.setAttribute("error", "Invalid username or password");
            request.getRequestDispatcher("login.jsp").forward(request, response);
        }
    }
}

4. Service 层

public class UserService {
    private UserDao userDao = new UserDaoImpl();

    public boolean validateUser(User user) {
        return userDao.findUserByUsernameAndPassword(user.getUsername(), user.getPassword()) != null;
    }
}

5. DAO 层

public class UserDaoImpl implements UserDao {
    public User findUserByUsernameAndPassword(String username, String password) {
        // 数据库查询逻辑
        return null; // 假设用户名和密码正确
    }
}

Ajax 技术

Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它使用 JavaScript 向服务器发送异步请求，并接收服务器返回的数据，然后更新网页的局部内容。

Ajax 优点:

用户体验好: 页面无需刷新，用户体验更流畅。
性能高: 服务器响应内容不再是整个页面，而是页面中的局部，性能更高。
灵活性高: 可以实现各种复杂的交互效果。

Ajax 常见应用场景:

自动完成: 例如，在输入框中输入关键字，下拉列表自动显示相关内容。
数据验证: 例如，输入用户名后，自动检查用户名是否已存在。
动态加载: 例如，动态加载新闻列表或图片。

Ajax 实现:

XMLHttpRequest 对象: 是 Ajax 的核心，用于发送异步请求和接收响应数据。
jQuery: 提供了丰富的 Ajax 方法，例如 .𝑎𝑗𝑎𝑥()、.ajax()、.get()、$.post() 等，简化了 Ajax 的开发。

代码示例:

1. 使用 jQuery 发送 Ajax 请求

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#loginBtn").click(function() {
            var username = $("#username").val();
            var password = $("#password").val();

            $.ajax({
                url: "login",
                type: "post",
                data: {
                    username: username,
                    password: password
                },
                success: function(data) {
                    if (data.isValid) {
                        window.location.href = "welcome.jsp";
                    } else {
                        alert("Invalid username or password");
                    }
                }
            });
        });
    });
</script>

2. Servlet 处理 Ajax 请求并返回 JSON 数据

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        User user = new User();
        user.setUsername(username);
        user.setPassword(password);

        // 调用 Service 层验证用户
        boolean isValid = userService.validateUser(user);

        // 返回 JSON 数据
        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        out.print("{\"isValid\":" + isValid + "}");
        out.flush();
        out.close();
    }
}

JSON 数据格式

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它使用字符串来表示 JavaScript 对象。JSON 语法简单，易于读写，被广泛应用于 Web 开发中。

JSON 语法:

{
  "name": "John",
  "age": 30,
  "car": null
}

JSON 优点:

易于读写: JSON 语法简单，易于理解和编写。
易于解析: 许多编程语言都提供了 JSON 解析库，方便解析 JSON 数据。
易于传输: JSON 数据格式紧凑，易于在网络中传输。

JSON 库:

Jackson: 是一个功能强大的 JSON 库，提供了丰富的 API 用于解析和生成 JSON 数据。
Fastjson: 是阿里巴巴开源的 JSON 库，性能优异，使用方便。

代码示例:

1. 使用 Jackson 将 Java 对象转换为 JSON 字符串

ObjectMapper objectMapper = new ObjectMapper();
String json = objectMapper.writeValueAsString(user);

2. 使用 Jackson 将 JSON 字符串转换为 Java 对象

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

总结

MVC 开发模式、Ajax 技术和 JSON 数据格式是 JavaWeb 开发的三大核心概念。掌握这三个概念，可以帮助你构建功能更完善、性能更优、用户体验更好的 JavaWeb 应用程序。希望这篇文章能帮助你入门 JavaWeb 开发，并激发你进一步探索的兴趣！

长不大的小孩882

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫