J2EE知识点4 - AJAX基本使用 - 《Java笔记》

package controller;
import service.UserService;
import util.MySpring;
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("/checkName")
public class CheckNameController extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username=req.getParameter("username");
        UserService userService= MySpring.getBean("service.UserService");
        String result=userService.checkName(username);
        //根据业务结果给予响应
        //1.直接给响应   response.getWriter();write("");
        //2.转发  JSP（本身就是拼接响应 内容就是响应信息）
        resp.setCharacterEncoding("UTF-8");
        PrintWriter out= resp.getWriter();
        out.write(result);
    }
}

package dao;


import domain.User;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class UserDao {
    private String className="com.mysql.jdbc.Driver";
    private String url="jdbc:mysql://localhost:3306/qq";
    private String password="cy414ljh212,,,";
    public User selectOne(String username){
        User user=null;
        try {
            Class.forName(className);
            Connection connection= DriverManager.getConnection(url,"root",password);
            String sql="SELECT PASSWORD, NICKNAME FROM USERS WHERE USERNAME = ?";
            PreparedStatement preparedStatement=connection.prepareStatement(sql);
            preparedStatement.setString(1,username);
            ResultSet resultSet=preparedStatement.executeQuery();
            if(resultSet.next()){
                user=new User(username, resultSet.getString("password"), resultSet.getString("nickName"));
            }
            resultSet.close();
            preparedStatement.close();
        }catch (Exception e){
            e.printStackTrace();
        }
        return user;
    }
}

package domain;

public class User {
    private String username;
    private String password;
    private String nickName;

    public User() {}

    public User(String username, String password,String nickName) {
        this.username = username;
        this.password = password;
        this.nickName=nickName;
    }

    public String getUsername() {
        return username;
    }

    public String getPassword() {
        return password;
    }

    public String getNickName() {
        return nickName;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public void setNickName(String nickName) {
        this.nickName = nickName;
    }
}

package service;

import dao.UserDao;
import domain.User;
import util.MySpring;

public class UserService {
    private UserDao userDao= MySpring.getBean("dao.UserDao");

    public String checkName(String username){
        User user= userDao.selectOne(username);
        if(user==null){
            return "账号符合规范";
        }
        return "账号已存在";
    }
}

package util;

import java.util.HashMap;

public class MySpring {
    private static HashMap<String,Object> beanMap=new HashMap<>();
    public static <T>T getBean(String className){
        T obj=(T) beanMap.get(className);
        if(obj==null){
            try {
                Class clazz = Class.forName(className);
                obj=(T)clazz.newInstance();
                beanMap.put(className,obj);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return obj;
    }

}

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript">
        // window.onload=function (){
        //   document.getElementById("uname").onblur=function (){
        //     //1.找到用来展示的span组件
        //     var spanEle=document.getElementById("showSpan");
        //     //2.找到账号文本框那个组件---组件里面的value属性
        //     var unameEleValue=this.value;
        //     //3.判断unameEleValue的字符长度
        //     if(unameEleValue.length>=6&&unameEleValue.length<=10){
        //       spanEle.innerHTML="账号长度合法";
        //     }else{
        //       spanEle.innerHTML="账号长度不合法";
        //     }
        //   }
        // }
        window.onload = function () {
            //1.找到账号文本框，绑定一个失去焦点的事件
            document.getElementById("uname").onblur = function () {

                //2.找到账号文本框那个组件---组件里面的value属性
                var unameEleValue = this.value;

                //3.发送一个AJAX异步请求  需要一个XMLHTTPRequest对象
                //3.1创建一个AJAX对象
                var xmlHttp = new XMLHttpRequest();

                //3.2打开一个管道（用来与服务器进行通信）
                //有三个参数，1为String类型，请求的方式get/post；
                // 2为String类型，请求的名字，可以拼接？作为参数；3为boolean类型，是否为异步请求，默认为true
                xmlHttp.open("get", "checkName?username=" + unameEleValue, true);

                //3.3发送请求
                xmlHttp.send();

                //xmlHttp对象有一个属性readyState，是int类型（范围是0-4），用于检测服务器的处理状态
                //0：请求未初始化；1：服务器连接已建立；2：请求已接收；3：请求处理中；4：请求已完成，且响应已就绪
                //4.等待回来的响应信息---处理  展示在span标签内
                xmlHttp.onreadystatechange=function () {
                    if(xmlHttp.readyState==4){
                        //接收响应信息
                        var result=xmlHttp.responseText;
                        //将信息展示在span标签内
                        var spanEle = document.getElementById("showSpan");
                        spanEle.innerHTML=result;
                    }
                }
            }
        }
    </script>
</head>
<body>
<form action="" method="post">
    账号：<input id="uname" type="text" name="username" value=""><span id="showSpan"></span><br>
    密码：<input type="text" name="password" value=""><br>
    确认：<input type="text" name="checkP" value=""><br>
    电话：<input type="text" name="telephone" value=""><br>
    国籍：
    <select>
        <option>==请选择==</option>
        <option>中国</option>
        <option>法国</option>
        <option>美国</option>
    </select>
    <br>
    爱好：
    <input type="checkbox" name="hobby" value="唱歌">唱歌
    <input type="checkbox" name="hobby" value="跳舞">跳舞
    <input type="checkbox" name="hobby" value="看书">看书
    <br>
    <input type="submit" value="注册">
</form>
</body>
</html>