初始ajax技术

野性酷女 2021-09-29 09:10 259阅读 0赞

![loading.gif][]一、AJAX是啥？

1.页面无需刷新，异步请求。

2.为什么使用ajax？

原因：

1传统模式  需要将请求发送到服务器，服务器经过业务处理，返回一个页面给客户端。这样做，会很浪费资源。

2.ajax  只需要请求一次页面，之后的数据交互 都无需重新记载当前页面。是不是很强大?

3ajax的应用场景？

注册中的 用户名校验、注册提交、注册验证码、登录提交等。

二、JSON？

1.是啥？

是一种数据格式

2.为啥使用？

优点：方便数据传输，便于传递和解析。

3.啥时候用？

ajax--------json------------后台

后台------json-------------ajax

json  对象存储数据  类似java中的  foreach

![1602553-20190424210543923-1628075271.png][]

三 ，检查注册页面 使用ajax技术。

![1602553-20190424211631084-1844102640.png][]

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
    %>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>注册 - 贵美·商城</title>
            <base href="<%=basePath%>">
             <link rel="icon" href="img/icon.png" type="image/x-icon">
            <link rel="stylesheet" type="text/css" href="css/register.css"/>
        </head>
        <body>
            <div class="wrap">
                <div class="guimeilogo"></div>
                <div class="register">
                    <div class="top">
                        <h1>新用户注册</h1>
                        <a href="/shop/views/login.jsp">已有账号</a>
                    </div>
                    <div class="mid">
                        <div style="color: red">${error}</div>
                        <form action="/shop/register" method="post">
                            <%--在这里添加提示信息 1.成功注册   2.失败注册--%>
                            <div id="showMsg"></div>
                        <input type="text" name="username" id="username" placeholder="用户名" required="required"/>
                        <div class="sec">
                            <input type="text" name="code" id="code" placeholder="验证码" required="required" />
                            <a  class="send" onclick="send()"> 发送验证码 </a>
                            <script>
                                function send(){
                                     return false;
                                }
                            </script>
                        </div>
                            <input type="password" name="password" id="password" placeholder="密码" required="required" />
                            <input type="password" name="reppw" id="reppw" placeholder="重复密码" required="required" />
                            <input type="text" name="telephone" id="telephone" placeholder="手机号" required="required"/>
                            <input type="text" name="nickname" id="nickname" placeholder="亲，您的昵称" required="required" />
                            <input type="text" name="email" id="email" placeholder="亲，您的邮箱" required="required"/>
                            <input type="submit" id="submit" value="注册"/>
                        </form>
                    </div>
                </div>
            </div>
                <%--导入JS包--%>
            <script src="js/jquery-2.1.0.js">
    
            </script>
        <script >
    
            /*
                用户： 输入用户名完毕后    鼠标离开后   立刻提交用户名是否可用   给用户提示
    
                1.给username 输入框  添加失去焦点的事件  onblur
                        username.οnblur=function () {
                            alert(username.value)
                        }
                2.获取用户输入的数据 value
    
                3.通过ajax 将用户输入的用户名发送给服务器   注意  涉及到函数  需要导入js的包  jQuery-2.1.0.js
    
    
                    $.post("url" ,"参数"，function(data){});
                    $.post("/shop/CheckUsername",{username:username.value},function (data)
                                    {username:username.value}
                4.接受服务器返回响应
    
                5.将回传的值  展示到页面中
    
                后台？
                    1.接收请求的参数
                    2.通过 dao 检验用户名是否可用
                    3.将校验结果  响应给浏览器
             */
            //1.给username 输入框 添加时期焦点事件  通过id的方式
            username.onblur=function () {
                //2.通过ajax 将用户的用户名发送给服务器
                $.post("/shop/checkUsername",{username:username.value},function (data) {
                    if (data.code == "1044"){
                        $("#showMsg").html("用户名 已经被注册过").css("color","red");
                    } else{
                        $("#showMsg").html("此用户名 可以注册").css("color","green");
                    }
                })
            }
    
    
            if ("${success}"=="注册成功"){
                if(confirm("注册成功，是否登录？")){
                    window.location.href="/shop/views/login.jsp";
                }
            }
        </script>
        </body>
    </html>

servlet部分

package com.aaa.servlet;
    
    import com.aaa.dao.Impl.UserDAOImpl;
    import com.alibaba.fastjson.JSON;
    
    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;
    import java.util.HashMap;
    
    /**
     * 验证用户唯一性 在后台要先获取到 用户注册的参数。
     * 1.获得请求参数
     *
     * 2.需要验证  用户名的唯一性 ?  调用dao 方法中的isExist
     *
     * 3.将检验结果   返回给浏览器  响应ajax的请求?
     *
     *          1.resp 响应浏览器  防止乱码  设置编码格式
     *          resp.setContentType("text/json:charset=UTF-8");
     *
     *          2.resp 获取数据
     *          PrintWriter out = resp.getWriter();                 getWriter()获取通向浏览器的字符流(同一次请求处理中,字节流和字符流不能同时存在)
     *
     * 3.思考？
     *  json的格式  和java中的map相似 创建hashmap集合 存储数据？    HashMap<Object, Object> map = new HashMap<>();
     *
     *      JSON.parseObject，是将Json字符串转化为相应的对象；
     *      JSON.toJSONString则是将对象转化为Json字符串。           直接导包使用  fastjson-1.2.9.jar
     *
     *         4.输出数据？
     *
     *         5.关闭流？
     *
     */
    @WebServlet("/checkUsername")
    public class CheckUsernameServlet extends HttpServlet {
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String username = req.getParameter("username");
    
            UserDAOImpl dao = new UserDAOImpl();
            boolean exist = dao.isExist(username);
    
            resp.setContentType("text/json:character=utf-8");
            PrintWriter out = resp.getWriter();
            HashMap<Object, Object> map = new HashMap<>();
    
            if (exist){
                map.put("code","1044");
                map.put("message","用户名已被占用");
            }else{
                map.put("code","102200");
                map.put("message","用户名 可用");
            }
            String s = JSON.toJSONString(map);
    
            out.write(s);
            out.close();
        }
    }

效果

![1602553-20190424212155492-1965640096.png][]

![1602553-20190424212228257-1303904863.png][]

转载于:https://www.cnblogs.com/ZXF6/p/10765049.html

[loading.gif]: /images/20210725/5fc4a437040e4b8b84af08291ee60234.png
[1602553-20190424210543923-1628075271.png]: /images/20210725/b5dd113c0daf4454a79d81bbb0898c0a.png
[1602553-20190424211631084-1844102640.png]: /images/20210725/e5046f2ad3d2472180a1156b2818bb22.png
[1602553-20190424212155492-1965640096.png]: /images/20210725/ba825683b2f447d7b746c0405053aa47.png
[1602553-20190424212228257-1303904863.png]: /images/20210725/a38c1220ca8e4292a8140e3985a1ab4e.png