Ajax-CSDN博客

本文链接：https://blog.csdn.net/jonson_arr/article/details/101455653

Ajax

概述

AJAX（Asynchronous Javascript And
XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

案例介绍

为了容易理解，咱们还是拿用户注册的案例进行讲解
AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。
所有的异步交互都是使用XMLHttpRequest对象完成的。
也就是说，我们只需要学习一个Javascript的新对象即可。
在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。
服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。
客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！

案例代码

import com.srzx.sms.service.impl.AdminServiceImpl;
import com.srzx.sms.service.inte.AdminServiceInte;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/register")
public class RegisterServlet extends HttpServlet {

    AdminServiceInte asi = new AdminServiceImpl();

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String action = req.getParameter("a");

        if("ui".equals(action)){
            req.getRequestDispatcher("/WEB-INF/sms/register.jsp").forward(req,resp);
        }

        //ajax 检查账号是否已存在
        if("check".equals(action)){
            String account = req.getParameter("account");

            boolean flag = asi.checkAccount(account);

            PrintWriter pw = resp.getWriter();
            //resp.setContentType("application/json");
            if(flag){
                pw.print("{'status':1,'msg':'ok'}");
            }else{
                pw.print("{'status':2,'msg':'error'}");
            }

        }


    }
}

前台页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String contextPath = request.getContextPath();
%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="<%=contextPath%>/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="<%=contextPath%>/bootstrap/js/jquery-3.4.1.js"></script>
    <script src="<%=contextPath%>/bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
        #form{
            /*background-color: #cccccc;*/
        }
        #fm{
            margin-top:40px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6" id="form">
            <h2>注册</h2>
            <h4 id="msg" class="">${err_msg}</h4>
            <form class="form-horizontal" action="<%=contextPath%>/login?a=login" method="post">
                <div class="form-group">
                    <label for="account" class="col-sm-2 control-label">账号</label>
                    <div class="col-sm-10">
                        <input type="text" name="account" class="form-control" id="account" placeholder="账号">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" name="password" class="form-control" id="password" placeholder="密码">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> 同意协议
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">注册</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
<script type="text/javascript">

    $("#account").change(function(){

        var value = $(this).val();

        $.get("?a=check",{'account':value},function(data){
            console.log(data);//{'status':2,'msg':'error'}
            eval("var d = ("+ data + ")");
            if(d.status == 2){//重复
                $('#msg').text(d.msg).removeClass("text-success").addClass("text-danger");
            }else{
                $('#msg').text(d.msg).removeClass("text-danger").addClass("text-success");
            }
        });
    });


</script>
</body>
</html>