JavaWeb_18_Ajax交互-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42788897/article/details/131210584

本文介绍了Ajax技术，包括它的异步特性和局部刷新功能，以及JSON作为轻量级数据交换格式的特性。通过一个Jquery实现的Ajax例子，展示了如何进行用户输入验证，与后端Servlet进行通信，返回响应信息到前端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《Ajax交互》

一、Ajax简介

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。Ajax技术最大特点为异步交互，局部刷新。

请添加图片描述

二、Json简介

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

语法规则

JSON是一个标记符的序列。这套标记符包含六个构造字符、字符串、数字和三个字面名。
JSON是一个序列化的对象或数组。

{
	"userId":1001,
	"userName":"Alice",
	"hobby":[
		"羽毛球",
		"乒乓球",
		"橄榄球"
	]
}

三、Ajax实现

Ajax可使用Javascript原生写法来实现（但写法相对复杂，在此不做赘述），同时各大前端框架都对Ajax进行了高级封装，如Jquery、Vue、Angular等，在此以Jquery方式示例。

index.jsp

<%-- page指令指定内容类型 --%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%-- html代码 --%>
<html>
<head>
    <title>首页</title>
    <meta charset="utf-8">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        table {
            margin: 40px auto;
            border: 1px solid black;
        }

        td {
            width: 300px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<table>
    <form action="./index.do?">
        <tr>
            <td>账号：<input id="userId" name="userId"></td>
            <td><span id="msg"></span></td>
        </tr>
        <tr>
            <td>密码：<input id="password" name="password"></td>
            <td></td>
        </tr>
    </form>
</table>
</body>
<script>
    $(document).ready(() => {
        $("#userId").blur(() => {
            $.ajax({
                //请求路径
                url: "./index.do",
                //请求方式
                method: "get",
                //要传给后端的参数
                data: {
                    "userId": $("#userId").val()
                },
                //响应数据类型
                dataType: "text",
                //成功回调函数
                success: (dt) => {
                    if (dt === "ok") {
                        $("#msg").html("√").css("color", "green");
                    } else {
                        $("#msg").html(dt).css("color", "red");
                    }
                },
                //失败回调函数
                error: () => {
                    alert("服务器故障，请联系后台管理员解决！");
                }
            });
        });
    });
</script>
</html>

IndexServlet

@WebServlet("/index.do")
public class IndexServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String userId = request.getParameter("userId");
        if (userId.equals("1001")) {
            response.getWriter().write("ok");
        } else {
            response.getWriter().write("账号不存在！");
        }
    }
}