jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路

实现无刷新的用户验证，可以使用JSP和AJAX技术配合使用。具体思路如下：

1. 在JSP页面创建用户名输入框，并为其添加onblur事件监听器，当输入框失去焦点时触发事件。

2. 在JSP页面上创建一个AJAX函数，用于向服务端发送请求并接收响应数据。

3. 在服务端创建一个Servlet，对AJAX请求进行处理，并返回验证结果。

4. 在Servlet中使用JDBC或ORM等方式连接数据库，并查询验证信息，再将验证结果返回给客户端。

5. 在AJAX函数中接收到响应后，根据响应数据改变页面显示。

下面是一个简单的示例，通过JSP和AJAX实现无刷新验证用户名是否存在：

一、JSP页面代码:

<input id="username" type="text" onblur="checkUsername()" />
<span id="usernameTip"></span>

<script>
function checkUsername() {
  var username = document.getElementById("username").value;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("usernameTip").innerHTML = xmlhttp.responseText;
      // 如果返回值为"用户名已存在"，则可以设置相应的样式，提示用户该用户名已经被注册了
    }
  };
  xmlhttp.open("GET", "CheckUsernameServlet?username=" + username, true);
  xmlhttp.send();
}
</script>

二、Servlet代码：

public class CheckUsernameServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException {
        response.setContentType("text/html;charset=utf-8"); // 设置响应编码
        String username = request.getParameter("username"); // 获取请求参数
        boolean result = checkUsername(username);  // 验证用户名是否存在
        PrintWriter out = response.getWriter();  // 获取响应输出流
        if (result) {
            out.print("用户名已存在");
        } else {
            out.print("恭喜您，用户名可以使用");
        }
        out.flush();  // 刷新输出缓存
    }

    // 查询用户名是否存在的方法
    private boolean checkUsername(String username) {
        // 连接数据库，查询用户名是否存在
        // 如果存在，返回true；否则返回false
    }
}

在上述示例中，当用户在JSP页面中离开用户名输入框时，会向服务端发送AJAX请求，服务端会根据请求参数验证用户名是否存在，并将验证结果返回给客户端。客户端根据响应数据，改变页面显示内容，从而实现无刷新验证用户名是否存在。

示例二：

另外一个简单的示例可以是实现一个简单的表单提交功能，当用户提交表单时，可以使用AJAX技术向服务端发送请求，如果数据不合法则不提交表单，如果数据合法则提交表单。

这里可以使用JQuery的$.ajax()函数，实现无刷新表单提交功能。

例如：

<form>
    <input type="text" name="username" id="username">
    <input type="password" name="password" id="password">
    <input type="submit" value="提交" id="submit">
    <div id="result"></div>
</form>

<script>
$(document).on('submit', 'form', function(e) {
    e.preventDefault();
    var username = $('#username').val();
    var password = $('#password').val();
    $.ajax({
        type: 'POST',
        url: '/submit',
        data: {username: username, password: password},
        success: function(data) {
            $('#result').text(data.message);
            if (data.success) {
                $('form').submit(); // 如果数据合法，提交表单
            }
        },
        dataType: 'json' // 设置接收数据的类型为json
    });
});
</script>

这段代码使用了JQuery的$.ajax()函数，实现在用户提交表单前对表单数据进行验证。当用户点击提交按钮时，使用e.preventDefault()取消默认的表单提交行为，然后使用AJAX技术向服务端发送表单数据。服务端验证表单数据是否合法，如果合法则返回JSON格式的数据，并将data.success设置为true，否则将data.success设置为false。客户端根据响应数据，判断数据是否合法，如果合法则调用form.submit()提交表单，否则根据返回的提示信息，提示用户表单提交失败。